Vue+Element实现封装抽屉弹框
作者：山水有轻音
这篇文章主要为大家详细介绍了如何利用Vue和Element实现简单的抽屉弹框效果，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
一进行showDrawer()封装
新建dialog.js
// 弹框模板
import Vue from 'vue';
import { Drawer } from 'element-ui';
const modalTemplate = `
<el-drawer :visible.sync="visible" :title="title" :size="size" :direction="direction">
<component :is="component" v-bind="props" @ok="handleOk" @cancel="handleCancel"></component>
</el-drawer>
`
// 弹框构造函数
const ModalConstructor = Vue.extend({
template: modalTemplate,
data() {
return {
visible: false,
title: '',
size: '70%',
direction: 'rtl',
component: null,
props: null,
resolve: null,
reject: null,
}
},
methods: {
show(component, props, options) {
this.visible = true
this.component = component
this.props = props || {}
this.title = options.title || '提示'
this.size = options.width || '70%'
this.direction = options.direction || 'rtl'
return new Promise((resolve, reject) => {
this.resolve = resolve
this.reject = reject
})
},
hide() {
this.visible = false
},
handleOk(res) {
this.resolve(res)
this.hide()
},
handleCancel() {
this.reject()
this.hide()
},
},
})
// 创建组件实例并挂载到文档中
const Modal = new ModalConstructor().$mount()
document.body.appendChild(Modal.$el)
// $showDrawer 方法
Vue.prototype.$showDrawer = function (component, props, options) {
return Modal.show(component, props, options)
}
// $showDialog 方法
Vue.prototype.$showDialog = function (component, props, options) {
return new Promise((resolve, reject) => {
let MyDialogConstructor = Vue.extend({
components: {
'my-dialog': component
},
template: `<el-dialog :visible.sync="visible" :title="title" :width="width" :before-close="beforeClose">
<my-dialog :props="props" @ok="handleOk" @cancel="handleCancel"></my-dialog>
</el-dialog>`,
data() {
return {
visible: true,
title: options.title || '提示',
width: options.width || '50%',
props: props,
resolve: resolve,
reject: reject,
}
},
methods: {
hide() {
this.visible = false
},
handleOk(res) {
this.resolve(res)
this.hide()
},
handleCancel() {
this.reject()
this.hide()
},
beforeClose(done) {
ElementUI.MessageBox.confirm('确认关闭？').then(() => {
done()
}).catch(() => {})
},
},
})
let MyDialog = new MyDialogConstructor().$mount()
document.body.appendChild(MyDialog.$el)
})
}在上面的代码中，我们首先定义了一个 modalTemplate 模板，使用 Element UI 的 Drawer 和组件插槽来实现弹框内容的展示，并添加了一些我们需要的属性和方法。 然后定义了一个 ModalConstructor 构造函数，通过 show 方法来打开弹框，并返回 Promise 来等待用户的操作，最后返回用户的操作结果。
在 show 方法中，我们通过传入组件和 props 的方式来动态渲染组件，并设置其他选项，如弹框的标题、大小、方向等。
## 2在main.js里引入dialog.js ```js import '@util/dialog'
如何使用
// 调用 $showDrawer 方法
this.$showDrawer(ExamDetail, {
examId: rowId
}, {
title: '考试详情',
width: '1200px',
}).then(() => {
this.searchForm()
})
// 调用 $showDialog 方法
this.$showDialog(ExamDetail, {
examId: rowId
}, {
title: '考试详情',
width: '1200px',
}).then(() => {
this.searchForm()
})到此这篇关于Vue+Element实现封装抽屉弹框的文章就介绍到这了,更多相关Vue Element抽屉弹框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！