102 lines
2.8 KiB
Vue
102 lines
2.8 KiB
Vue
|
<!--
|
||
|
|
* @Descripttion: scDialog 弹窗扩展演示文件
|
||
|
|
* @version: 1.0
|
||
|
|
* @Author: sakuya
|
||
|
|
* @Date: 2021年8月27日08:56:30
|
||
|
|
* @LastEditors:
|
||
|
|
* @LastEditTime:
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<el-main>
|
||
|
|
<el-alert title="二次封装el-dialog,加入加载中/最大化." type="success" style="margin:0 0 20px 0;"></el-alert>
|
||
|
|
<el-card shadow="never" header="内置">
|
||
|
|
<el-button type="primary" @click="open1">默认</el-button>
|
||
|
|
<el-button type="primary" @click="open2">加载</el-button>
|
||
|
|
<el-button type="primary" @click="open3">禁止拖拽最大化和关闭</el-button>
|
||
|
|
</el-card>
|
||
|
|
<el-card shadow="never" header="异步" style="margin-top: 15px;">
|
||
|
|
<el-button type="primary" @click="asyn1">异步加载1</el-button>
|
||
|
|
<el-button type="primary" @click="asyn2">异步加载2</el-button>
|
||
|
|
<el-alert title="适用于页面有很多弹窗操作,利用异步组件按需加载,加快首屏的加载速度和打包体积" style="margin-top: 20px;"></el-alert>
|
||
|
|
</el-card>
|
||
|
|
</el-main>
|
||
|
|
|
||
|
|
<sc-dialog v-model="dialog1" draggable title="提示">
|
||
|
|
内容
|
||
|
|
<template #footer>
|
||
|
|
<el-button @click="dialog1 = false">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="dialog1 = false">确 定</el-button>
|
||
|
|
</template>
|
||
|
|
</sc-dialog>
|
||
|
|
|
||
|
|
<sc-dialog v-model="dialog2" draggable title="模拟加载" :width="400" :loading="dialog2Loading">
|
||
|
|
<el-empty description="NO Data" :image-size="80"></el-empty>
|
||
|
|
<template #footer>
|
||
|
|
<el-button @click="dialog2 = false">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="dialog2 = false" :loading="dialog2Loading">确 定</el-button>
|
||
|
|
</template>
|
||
|
|
</sc-dialog>
|
||
|
|
|
||
|
|
<sc-dialog v-model="dialog3" title="禁用拖拽" :show-fullscreen="false" :show-close="false">
|
||
|
|
内容
|
||
|
|
<template #footer>
|
||
|
|
<el-button @click="dialog3 = false">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="dialog3 = false">确 定</el-button>
|
||
|
|
</template>
|
||
|
|
</sc-dialog>
|
||
|
|
|
||
|
|
<dialog1 v-if="asynDialog1" draggable @closed="asynDialog1 = false"></dialog1>
|
||
|
|
<dialog2 v-if="asynDialog2" draggable @closed="asynDialog2 = false"></dialog2>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { defineAsyncComponent } from 'vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'dialogExtend',
|
||
|
|
components: {
|
||
|
|
dialog1: defineAsyncComponent(() => import("./dialog1")),
|
||
|
|
dialog2: defineAsyncComponent(() => import("./dialog2"))
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialog1: false,
|
||
|
|
dialog2: false,
|
||
|
|
dialog3: false,
|
||
|
|
dialog2Loading: false,
|
||
|
|
asynDialog1: false,
|
||
|
|
asynDialog2: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
open1(){
|
||
|
|
this.dialog1 = true
|
||
|
|
},
|
||
|
|
open2(){
|
||
|
|
this.dialog2 = true
|
||
|
|
this.dialog2Loading = true
|
||
|
|
setTimeout(()=>{
|
||
|
|
this.dialog2Loading = false
|
||
|
|
}, 1000)
|
||
|
|
},
|
||
|
|
open3(){
|
||
|
|
this.dialog3 = true
|
||
|
|
},
|
||
|
|
asyn1(){
|
||
|
|
this.asynDialog1 = true
|
||
|
|
},
|
||
|
|
asyn2(){
|
||
|
|
this.asynDialog2 = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
</style>
|