动态创建弹框el-dialog

相信大家在页面中写了很多基于el-dialog的弹框，尤其是弹框比较多时，显得很臃肿，不利于后期维护，还有一些相似的弹框功能让你复制粘贴感觉很麻烦还要换个名字，讲句实话代码越难维护，越能体现你的价值（不过为了自己舒服还是用一下吧）有个还行的方法动态创建，只需要传数据，然后返回数据就可以了，下面直接贴代码哈哈，我不喜欢讲东西，想看详细一点，看我朋友（也是我的两任同事哈哈）的https://blog.csdn.net/qq_34295211/article/details/107576589?spm=1001.2014.3001.5501

dialog.js

import Vue from 'vue'
function snake2Camel(str, capLower) {let s = str.replace(/[-_](\w)/g, function (x) {return x.slice(1).toUpperCase()})s = s.replace(/^\w/, function (x) {return capLower ? x.toLowerCase() : x.toUpperCase()})return s
}function camel2Snake(str) {return str.replace(/([A-Z])/g, '-$1').toLowerCase()
}const dialogsContext = require.context('../', true, /@([a-zA-Z\-0-9]+)\.vue$/)
const dialogs = dialogsContext.keys().reduce((views, key) => {const fileName = key.match(/@([a-zA-Z\-0-9]+)\.vue$/i)[1]if (!fileName) return viewslet componentName = camel2Snake(fileName)let clsName = snake2Camel(componentName)return Object.assign(views, { [clsName]: dialogsContext(key) })
}, {})const createDialog = function (temp, data, callback) {let opt = {data,callback}let component = Object.assign({}, temp)let initData = {visible: true}Object.assign(initData, component.data())opt.data && Object.assign(initData, JSON.parse(JSON.stringify(opt.data)))component.data = function () {return initData}let DialogC = Vue.extend(component)let dialog = new DialogC()// 关闭事件let _onClose = dialog.$options.methods.onClosedialog.$watch('visible', function (n, o) {dialog === false && dialog.onClose()})dialog.onClose = function () {dialog.$destroy()_onClose && _onClose.call(dialog)document.body.removeChild(dialog.$el)}// 回调事件let _onCallback = dialog.$options.methods.onCallbackdialog.onCallback = function (...arg) {try {_onCallback && _onCallback()if (callback && typeof callback === 'function') {callback.call(this, ...arg, dialog)}} catch (e) {console.log(e)}}dialog.$mount()dialog.$watch('visible', function (n, o) {dialog === false && dialog.onClose()})document.body.appendChild(dialog.$el)
}function createDialogAsync(temp, data) {return new Promise(function (resolve, reject) {let opt = {data}let component = Object.assign({}, temp)let initData = {visible: true}Object.assign(initData, component.data())opt.data && Object.assign(initData, JSON.parse(JSON.stringify(opt.data)))console.log(initData, 'init')component.data = function () {return initData}let DialogC = Vue.extend(component)let dialog = new DialogC()// 关闭事件let _onClose = dialog.$options.methods.onClosedialog.onClose = function () {resolve()dialog.$destroy()_onClose && _onClose.call(dialog)document.body.removeChild(dialog.$el)}// 回调事件let _onCallback = dialog.$options.methods.onCallbackdialog.onCallback = function (...arg) {try {_onCallback && _onCallback()resolve(...arg)dialog.$destroy()_onClose && _onClose.call(dialog)document.body.removeChild(dialog.$el)} catch (e) {console.log(e)}}dialog.$mount()dialog.$watch('visible', function (n, o) {dialog === false && dialog.onClose()})document.body.appendChild(dialog.$el)})
}function init(values) {let dialogComponents = {}if (!values) returnObject.keys(values).forEach((name) => {let ComponentContext = values[name].defaultdialogComponents[name] = function (data, callback) {if (callback && typeof callback === 'function') {return createDialog.call(this, ComponentContext, data, callback)}return createDialogAsync.call(this, ComponentContext, data)}})return dialogComponents
}Vue.prototype.$dialog = init(dialogs)

1.这个js文件直接在main.js引入就完事了

2.第二步新建一个弹框页面文件名@confirm.vue

<template><el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false"><div>{{text}}</div><div style="margin-top: 10px;">{{newLineText}}</div><div slot="footer" class="dialog-footer"><el-button type="primary" @click="onCallback(true)" v-if="confirmShow">{{confirmText}}</el-button><el-button  @click="onCallback(false)" v-if="cancelShow">{{cancelText}}</el-button></div></el-dialog>
</template><script>export default {data () {return {title: '提示',text: '确定该操作？',confirmText: '确定',cancelText: '取消',confirmShow: 1,cancelShow: 1,newLineText: ''}},methods: {}}
</script>

3、第三步直接使用

      async opt () {let ret = await this.$dialog.Confirm({text: '确定提交?'})if (ret) {console.log(ret,'Dayer')}},

动态创建弹框el-dialog相关推荐

axure rp 创建弹框_如何在Axure RP 9中创建交换机
axure rp 创建弹框 Axure is a well-known prototyping tool with a lot of history, it has been around for y ...
用react中的state写一个按钮+弹框的程序
题目:在页面上有一个按钮,点击按钮出现一个旋转的loading,提交按钮不可点击,等待一秒后弹框显示提交失败或者提交成功,接下来我们直接开始在此之前,我相信您已经安装好了react运行环境,如何创建 ...
直播app源代码，android弹框的几种操作
直播app源代码,实现android弹框几种操作的相关代码在android中创建文本框:这里是创建了一个list列表式的文本框 package com.example.dialog3;import ...
ASP.NET AJAX Advance Tips Tricks (11) 三种方法动态创建Tooltip
前言如何动态创建提示框(Tooltip)是ASP.NET Forum里的常见问题之一,在做技术支持时,我曾在英文博客上总结过ASP.NET和ASP.NET AJAX环境下如何动态创建提示框的三种常见 ...
原生js如何创建弹出层
我们会经常遇到需要点击按钮出现弹出层的情况,弹出层和弹窗是不一样的.下面就来讲讲我的创建弹出层的方法. 首先,创建一个按钮,为按钮绑定事件,点击按钮 ,打开弹出层. <button id = & ...
超过 3K + 的一个开源弹框库，使用方便，功能强大，简直碉堡了
[公众号回复 "1024",免费领取程序员赚钱实操经验] 今天章鱼猫带领大家来看一个基于 Android 的弹窗库,其实对于做 Android 的兄弟姐妹来讲,各种样式的弹窗,尤其 ...
练习：LOL 英雄列表（加入弹框修改英雄名称）
此图是代表ios8前后创建弹框的方法对比: 设置弹框内容: 列表的实现代码就不详细列出了,此处仅对弹框部分实现代码做展示. 调用了 UITableViewDelegate 和 UIAlertVi ...
vue懒加载对话框API封装技巧（项目必备技能，适用于各种需要懒加载动态展示的弹框组件）
懒加载对话框的方式做到了在你调用弹框展示API的那一刻,才去加载对话框文件并最终显示弹框效果.它最大的意义在于减少了你初次进入页面时加载的文件资源请求量和大小(加载资源小了,网页加载速度自然就提升了) ...
Android 几种弹框样式自定义Dialog PopupWindow的使用
1.弹框的波浪线是动态的和小度弹框样式相似用到PopWindow 和自定义View . 2.这个弹框是动态的用于网络加载时候用到自定义Dialog 3.这就是一简单通用的弹框样式第一种弹框 ...

动态创建弹框el-dialog

动态创建弹框el-dialog相关推荐

最新文章

热门文章