对话框
该组件是个对话框,基于 Vue 、element-ui 的 【Dialog 对话框】& 【Button 按钮】
组件调用方式、优点及需求来源
组件调用方式
this.$daillog({
text: '123' // 这里定义提示文字
})
.then(() => { // 点击确定 后需要执行的操作
console.log('success')
})
.catch(() => { // 点击取消 后需要执行的操作
console.log('fail')
})
组件优点
使用插件方式引入,不需要在模板中定义
需求来源
一个对话框,使用页面很多,只有提示文件是动态的,但是需要知道用户点击了哪个按钮。每次都在模板中定义很麻烦
代码分析
Dailog.vue(定义构造器)
<template>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" v-if="dialogVisible">
<div style="padding: 20px;">
<span>{{text}}</span>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="handle('cancel')">取 消</el-button>
<el-button type="primary" @click="handle('ok')">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
text: String
},
data() {
return {
dialogVisible: false,
callback: null
}
},
methods: {
handle(action) {
this.dialogVisible = false
this.callback(action)
}
}
}
</script>
dailog.js(使用 extend 方法创建组件实例)
import Vue from 'vue'
import Dialog from './Dialog.vue'
let instance = null
// 创建实例
function initInstance(propsData) {
const Instance = Vue.extend(Dialog)
instance = new Instance({
propsData,
el: document.createElement('div')
})
}
// 这里主要用于将props项合并
function mergeOpt({ text }) {
return {
text
}
}
// 打开对话框
function showDialog() {
instance.dialogVisible = true
document.body.appendChild(instance.$el)
}
export default function(opstions = {}) {
const propsData = mergeOpt(opstions)
if (!instance) {
initInstance(propsData)
}
showDialog()
return new Promise((resolve, reject) => {
// 这里通过重新定义 instance callback 变量的方式,来 触发 resolve 和 reject
instance.callback = action => {
if (action === 'ok') {
resolve()
} else {
reject()
}
setTimeout(() => {
instance.$destroy()
instance = null
})
}
})
}
install.js(抛出一个install 方法,用户插件注册)
import Daillog from './Daillog .js'
export default {
install: function(Vue) {
Vue.prototype.$daillog= Daillog
}
}