将el-dialog封装成函数调用

1、 使用Vue实例化方法

javascript 复制代码
// 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方法

javascript 复制代码
// 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>
javascript 复制代码
// 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、注册使用

javascript 复制代码
// main.js
import { openFormDialog } from './components/MyDialog.js'
Vue.prototype.$openFormDialog = openFormDialog
javascript 复制代码
// 调用方法
this.$openFormDialog({
   props: {
     title: '测试标题',
     width: '30%',
     beforeClose (done) {
       done()
     }
   },
   events: {
     close () {
       console.log('close')
     },
     cancel () {
       console.log('cancel')
     },
     confirm (form) {
       console.log(form)
     }
   }
 })

以上为简单例子,可根据场景进行优化,期望各位留言告知是否有更好的实现方法

相关推荐
paopaokaka_luck8 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失94942 分钟前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_44 分钟前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js