el-dialog封装成函数调用
1、 使用Vue实例化方法
// MyDialog.js
import Vue from 'vue'
export const openFormDialog = function ({ props = {}, events = {} }) {
const vm = new Vue({
data () {
return {
form: {}
}
},
render () {
return (
<el-dialog
visible={true}
{...{ props }}
{...{ on: events }}
onClose={() => handleEvent('close')}
>
<el-form label-width='80px'>
<el-form-item label='活动名称'>
<el-input v-model={this.form.name}></el-input>
</el-form-item>
<el-form-item label='活动区域'>
<el-select v-model={this.form.region} placeholder='请选择活动区域'>
<el-option label='区域一' value='shanghai'></el-option>
<el-option label='区域二' value='beijing'></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot='footer' class="dialog-footer">
<el-button onClick={() => { handleEvent('cancel') } }>取 消</el-button>
<el-button type="primary" onClick={() => handleEvent('confirm', this.form) }>确 定</el-button>
</span>
</el-dialog>
)
}
}).$mount()
const close = () => {
document.body.removeChild(vm.$el)
vm.$destroy()
}
const handleEvent = async (eventName, form) => {
await events[eventName] && typeof events[eventName] === 'function' && events[eventName](form)
close()
}
document.body.appendChild(vm.$el)
}
2、使用Vue.extend方法
// MyDialog.vue
<template>
<el-dialog
:visible.sync="dialogVisible"
v-bind="options.props"
v-on="options.events"
>
<el-form label-width='80px'>
<el-form-item label='活动名称'>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label='活动区域'>
<el-select v-model="form.region" placeholder='请选择活动区域'>
<el-option label='区域一' value='shanghai'></el-option>
<el-option label='区域二' value='beijing'></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="onConfirm">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data () {
return {
dialogVisible: true,
options: {
props: {
width: '30%'
},
events: {}
},
form: {}
}
},
methods: {
setAttrs (options) {
this.options = { ...options }
},
async onConfirm () {
await this.options.events.confirm && typeof this.options.events.confirm === 'function' && this.options.events.confirm(this.form)
this.dialogVisible = false
}
}
}
</script>
// MyDialog.js
import Vue from 'vue'
import Dialog from './VDialog.vue'
export const openFormDialog = function (options) {
const DialogConstructor = Vue.extend(Dialog)
const instance = new DialogConstructor()
instance.setAttrs(options)
instance.$mount()
document.body.appendChild(instance.$el)
}
3、注册使用
// main.js
import { openFormDialog } from './components/MyDialog.js'
Vue.prototype.$openFormDialog = openFormDialog
// 调用方法
this.$openFormDialog({
props: {
title: '测试标题',
width: '30%',
beforeClose (done) {
done()
}
},
events: {
close () {
console.log('close')
},
cancel () {
console.log('cancel')
},
confirm (form) {
console.log(form)
}
}
})
以上为简单例子,可根据场景进行优化,期望各位留言告知是否有更好的实现方法
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhihabgc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22