Once showDrawer() encapsulation
New
// Broadcast frame templateimport Vue from 'vue';
import { Drawer } from 'element-ui';
const modalTemplate = `
<el-drawer :="visible" :title="title" :size="size" :direction="direction">
<component :is="component" v-bind="props" @ok="handleOk" @cancel="handleCancel"></component>
</el-drawer>
`
// Broadcast frame constructorconst ModalConstructor = ({
template: modalTemplate,
data() {
return {
visible: false,
title: '',
size: '70%',
direction: 'rtl',
component: null,
props: null,
resolve: null,
reject: null,
}
},
methods: {
show(component, props, options) {
= true
= component
= props || {}
= || 'hint'
= || '70%'
= || 'rtl'
return new Promise((resolve, reject) => {
= resolve
= reject
})
},
hide() {
= false
},
handleOk(res) {
(res)
()
},
handleCancel() {
()
()
},
},
})
// Create component instance and mount it into the documentconst Modal = new ModalConstructor().$mount()
(Modal.$el)
// $showDrawer method.$showDrawer = function (component, props, options) {
return (component, props, options)
}
// $showDialog method.$showDialog = function (component, props, options) {
return new Promise((resolve, reject) => {
let MyDialogConstructor = ({
components: {
'my-dialog': component
},
template: `<el-dialog :="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: || 'hint',
width: || '50%',
props: props,
resolve: resolve,
reject: reject,
}
},
methods: {
hide() {
= false
},
handleOk(res) {
(res)
()
},
handleCancel() {
()
()
},
beforeClose(done) {
('Confirm to close? ').then(() => {
done()
}).catch(() => {})
},
},
})
let MyDialog = new MyDialogConstructor().$mount()
(MyDialog.$el)
})
}In the above code, we first define amodalTemplateTemplate, using the Drawer and component slots of the Element UI to display the content of the pop-up frame, and adds some properties and methods we need. Then a ModalConstructor constructor is defined, throughshowMethod to open the pop-up box, return Promise to wait for the user's operation, and finally return the user's operation result.
existshowIn the method, we dynamically render the component by passing in components and props, and set other options, such as the title, size, direction of the pop-up box, etc.
## 2 introduced in```js import '@util/dialog'
How to use
// Call the $showDrawer methodthis.$showDrawer(ExamDetail, {
examId: rowId
}, {
title: 'Exam Details',
width: '1200px',
}).then(() => {
()
})
// Call the $showDialog methodthis.$showDialog(ExamDetail, {
examId: rowId
}, {
title: 'Exam Details',
width: '1200px',
}).then(() => {
()
})This is the end of this article about Vue+Element encapsulating drawer frames. For more related contents of Vue Element drawer frames, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!