博客地址:https://ainyi.com/83
常见的 Element 组件的 MessageBox 弹窗组件,调用方法:
this.$confirm('xxx')
还可以增加其回调方法:
this.$confirm('这是一条信息').then(() => {
console.log('确定了')
}).catch(() => {
console.log('关闭了')
})
首先在 packages 文件夹下新建 confirm 文件夹,往里面新建 src 目录,存放源代码
src 下新建 Confirm.vue 文件写好相关弹窗的 html、js 代码
应用时有相关的回调函数,相应的实现方法就是使用==Promise==实现
<template>
<div>
...
</div>
</template>
<script>
export default {
name: 'confirm',
data() {
return {
promptMessage: '',
modelOperate: '确认',
confirmVisible: false,
resolve: '', // promise,类型 function
reject: '' // promise,类型 function
}
},
watch: {},
computed: {
showClass() {
return this.confirmVisible ? 'view' : ''
}
},
mounted() {},
created() {},
filters: {},
methods: {
close() {
this.reject() // catch 获取
this.confirmVisible = false
},
confirm() {
this.resolve() // then 获取
this.confirmVisible = false
}
}
}
</script>
在 Confirm.vue 同级目录下新建 main.js
import Main from './Confirm.vue'
import Vue from 'vue'
let ConfirmConstructor = Vue.extend(Main)
let instance, params
const Confirm = function(options) {
return new Promise((resolve, reject) => { // eslint-disable-line
if (typeof options === 'string') {
params = {
promptMessage: options,
resolve: resolve, // 将 resolve、reject 传到组件内调用
reject: reject
}
} else {
params = {
...options,
resolve: resolve,
reject: reject
}
}
showConfirm()
})
}
const showConfirm = () => {
let options = params || {}
instance = new ConfirmConstructor({
data: options
})
instance.$mount() // 挂载
document.body.appendChild(instance.$el)
instance.confirmVisible = true
}
export default Confirm
然后在上级目录(Confirm 文件夹)下新建 index.js 文件导出
import Confirm from './src/main'
export default Confirm
然后再最外层的 index.js 整合
import Confirm from './confirm'
const install = function(Vue, opts = {}) {
Vue.prototype.$confirm = Confirm
}
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
Confirm,
install
}
最后就可以通过文章最顶部的调用方式愉快地玩耍了
博客地址:https://ainyi.com/83
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。