vue+el-element中根据文件名动态创建dialog的方法实践

目录
  • 背景
  • 实现
    • 1.封装的/utils/dialogControl.js
    • 2.dialog文件定义
    •  3.使用

背景

在项目中使用对话框的通常做法是把对话框封装成组件,在使用的地方引入,然后添加到template,使用visible.sync控制对话框的显示/隐藏,监听confirm事件处理用户点击确定。如下:

 <confirm-dialog
     v-if="confirmDialogVisible"
     :title="$t(`mineData.tips.deleteDataset`)"
     :visible.sync="confirmDialogVisible"
     @confirm="confimHandler"
 ></confirm-dialog>

 在封装的dialog内部也需要在关闭时更新visible,确定时触发confirm事件:

 methods: {
    close() {
        this.$emit("update:visible", false);
    },
    confirm() {
        this.close();
        this.$emit("confirm");
    }
}

这样的做法不仅仅导致页面初始化时引入所有对话框组件而影响加载速度,更头疼的是页面中引入了很多对话框时,会导致页面很杂乱:需要为每个对话框插入一段html,为每个对话框维护一个单独的visible变量,为每个对话框添加confirm事件监听...

而这些操作大部分是和业务无关的,且这些操作又是极其相似的。

那么,有没有通过js动态创建dialog的方法呢?

createDialog("confirm-dialog.vue");

就像上面这样根据文件名即可打开对话框,不用定义visible及添加一堆html和事件回调,甚至不需要先引入对话框组件!

是不是很简单!心动了吧?看下去吧。

实现

1.封装的/utils/dialogControl.js

import Vue from 'vue'
async function createDialog (fileName, data) {
  const dialogsContext = require.context(
    '../components', // 定义查找文件的范围
    true,
    /([a-zA-Z\-0-9]+)\.vue$/, // 定义文件名规则
    'lazy'
  )
  // 查找到传入名字的文件并加载该文件
  let match = dialogsContext.keys().find((key) => key.includes(fileName))
  if (!match) return
  let componentContext = await dialogsContext(match)
  let temp = componentContext.default
  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)))
    component.data = function () {
      return initData
    }
    // 创建构造器创建实例挂载
    let DialogC = Vue.extend(component)
    let dialog = new DialogC()
    // 关闭事件
    let _onClose = dialog.$options.methods.onClose
    dialog.onClose = function () {
      resolve()
      dialog.$destroy()
      _onClose && _onClose.call(dialog)
      document.body.removeChild(dialog.$el)
    }
    // 回调事件
    let _onCallback = dialog.$options.methods.onCallback
    dialog.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()
    // 点击关闭按钮时会改变visible
    dialog.$watch('visible', function (n, o) {
      dialog === false && dialog.onClose()
    })
    document.body.appendChild(dialog.$el)
  })
}

export { createDialog }

说明:
1.需要指定查找文件的路径及匹配名称的正则表达式,这样能过滤掉一些不需要的文件

2.接收一个fileName参数用于匹配要打开的对话框文件,data参数是传递给对话框的数据,会合并到组件的data中

3.使用visible变量控制对话框的显示/隐藏

4.定义了一个onClose方法用于关闭对话框,对话框中可以使用该方法进行关闭

5.onCallback方法用于向调用对话框的父组件传值,如点击确定按钮时向父组件传值

2.dialog文件定义

如/components/ConfirmDialog.vue,使用visible变量控制显示/隐藏,onClose处理关闭事件,确定按钮的回调是onCallback(和dialogControl.js中的定义一致)。

<template>
    <el-dialog title="提示" :visible.sync="visible" width="30%">
        <span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt quis
            perspiciatis fugiat molestiae provident accusantium repudiandae fugit
            minima, eaque, repellat quibusdam iste sed ad? Debitis qui praesentium
            minus incidunt esse!</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="onClose">取 消</el-button>
            <el-button type="primary" @click="onCallback(true)">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
  }}
</script>

 3.使用

 引入dialogControl中的createDialog方法,直接传入文件名称即可打开。

如果有其他的属性,则以键值对的形式放入第二个参数,这些属性会合并到对话框组件的data中,因此对话框组件中可以直接使用这些属性。

createDialog方法得到一个promise对象,其then方法能得到confirm返回的结果。

<template>
  <div>
    <h1>This is an show page</h1>
    <el-button type="primary" @click="openDialog">打开</el-button>
  </div>
</template>

<script>
import { createDialog } from "@/utils/dialogControl";
export default {
  methods: {
    openDialog() {
      let dialog = createDialog("confirm-dialog.vue");
      dialog.then((v) => {
        if (v) {
          console.info("确定");
        }
      });
    },
  },
};
</script>

效果如下:

 

如果你还在使用文章开始的方式调用对话框,那么赶紧把这个方法用起来吧! 

参考:

https://www.freesion.com/article/43311065748/

到此这篇关于vue+el-element中根据文件名动态创建dialog的方法实践的文章就介绍到这了,更多相关el-element 动态创建dialog内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • element ui 对话框el-dialog关闭事件详解

    通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了 <el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'> </el-dialog> 在标签中加入@close='closeDialog' mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 },

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • element-ui中dialog弹窗关闭按钮失效的解决

    如下所示: <el-dialog title="修改库存" :visible.sync="kcDialog" @close="kcDialog = false"> ... </el-dialog> 加一个@close可以是一个方法或者直接操作kcDialog为false 补充知识:webpack外部扩展,依赖前置 引入了外部js index.html <script src="https://code.jq

  • elementUI同一页面展示多个Dialog的实现

    要实现的效果如下: 首先官方文档是这样描述的: 但是我写了个小demo发现并不能直接平级放置即可,一样会存在先后顺序不同造成的覆盖以及遮罩层导致不能点击被遮盖的dialog. 原因如下:因为dialog先后顺序不同z-index设置的层级不同,所以必定会覆盖遮挡 那么我们要实现一个这样的效果不仅仅平级放置即可,就要用到里面的一个属性:modal 下面贴上代码: 总的思路就是:dialog先后顺序重叠问题,使用便宜去让它们错开:然后就是遮罩层导致不能点击z-index层级低的弹框,就要用到moda

  • Element Dialog对话框的使用示例

    组件- 对话框 基本用法 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"

  • element ui里dialog关闭后清除验证条件方法

    关闭dialog触发事件 //vue <!--添加用户dialog begin--> <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" custom-class="editDialog" :close-on-click-modal="false" :before-close = "cleanContent" :show-cl

  • vue+el-element中根据文件名动态创建dialog的方法实践

    目录 背景 实现 1.封装的/utils/dialogControl.js 2.dialog文件定义  3.使用 背景 在项目中使用对话框的通常做法是把对话框封装成组件,在使用的地方引入,然后添加到template,使用visible.sync控制对话框的显示/隐藏,监听confirm事件处理用户点击确定.如下: <confirm-dialog v-if="confirmDialogVisible" :title="$t(`mineData.tips.deleteDat

  • JS使用eval()动态创建变量的方法

    本文实例讲述了JS使用eval()动态创建变量的方法.分享给大家供大家参考,具体如下: 一.什么是eval()函数? eval_r()函数可计算某个字符串,并执行其中的的 JavaScript 代码. 二.如何动态定义变量? 既然eval()能够计算字符串,何不将定义变量的写法转换为字符串,然后放入eval_r()函数内进行执行,形如: var defineStr = "var number_"+i.toString(); eval_r(defineStr); 这样就定义了一个变量,你

  • vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

    html代码: <section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right&q

  • python实现动态创建类的方法分析

    本文实例讲述了python实现动态创建类的方法.分享给大家供大家参考,具体如下: python作为动态语言,如何在运行时动态创建类呢(python Creating classes dynamically),这在编程时,有时候很有用处,动态生成类,给予相应的属性和方法.通常来说有如下两种方式: 1. 根据条件,硬编码实现. 2. 利用 type metaclass  来实现. 根据条件硬编码 def choose_class(name): if name == 'foo': class Foo(

  • vue.js 实现点击按钮动态添加li的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="

  • Java中JFinal框架动态切换数据库的方法

    需求:需要根据企业ID切换对应的数据库,同时,后期可动态增加数据库配置 JFinal框架中对于对于多数据源配置有两种方式: 1.通过配置文件配置,有多少数据库就要配置多少,服务启动时加载所有数据库,缺点:不能动态增加数据库 2.只配置一个主数据库信息就可以了,其他数据库信息保存在表中,通过读取表数据加载数据库连接,优点:在数据表中增加数据库配置即可动态增加数据库连接. 本次主要介绍第2种方法: 一.新建数据表:保存数据库连接信息 配置表对应的实体类 public class DbDto { /*

  • js中匿名函数的创建与调用方法分析

    本文实例分析了js中匿名函数的创建与调用方法.分享给大家供大家参考.具体实现方法如下: 匿名函数就是没有名字的函数了,也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数.最经常用作回调函数(callback)参数的值,很多新手朋友对于匿名函数不了解.这里就来分析一下. function 函数名(参数列表){函数体;} 如果是创建匿名函数,那就应该是: function(){函数体;} 因为是匿名函数,所以一般也不会有参数传给他. 为什么要创建匿名函数呢?在什么情况下会使用到匿

  • php运行时动态创建函数的方法

    本文实例讲述了php运行时动态创建函数的方法.分享给大家供大家参考.具体分析如下: 一般的语言函数必须定义了在运行,而php支持在运行时动态创建函数,下面是一个简单的范例,在运动时根据不同的条件创建函数$a <?php if (count($_POST) > 0) { $prepped = create_function('$a', 'return trim($_POST[$a]);'); } elseif (count($_GET) > 0) { $prepped = create_f

  • Yii中Model(模型)的创建及使用方法

    本文实例分析了Yii中Model(模型)的创建及使用方法.分享给大家供大家参考,具体如下: YII 实现了两种模型,表单模型(CFormModel类)和Active Record模型(CAtiveRecord类),它们都继承自CModel类. CFormModel代表的数据模型是从HTML表单收集的输入,封装了所有逻辑(如表单的验证和其它业务逻辑,应用到表单的域上).它能将数据存储在内 存中,或者在一个Active Record的帮助下,存入数据库里. 数据库连接操作 在config/main.

  • javascript动态创建链接的方法

    本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态添加链接</title&

随机推荐