vueel-dialog的简单介绍

本篇文章给大家谈谈vueel-dialog，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、关于vue+element-UI的el-dialog显示地图的问题
• 2、vue+elementui的el-dialog全局配置拖拽
• 3、Vue——每次弹出el-dialog，都会执行mounted
• 4、一个页面中有多个el-dialog平级,如何调用

关于vue+element-UI的el-dialog显示地图的问题

1.我们想实现一个功能，在elementUI的对话框上制作一个表单，用来提交姓名，年龄，地址，这些需要输入的都没有问题，但是如果你需要调用一些其他的功能（例如地图），就挺恶心迟基的。

2.百度地图是必须让它在页面加载完成后显示（生命周期mounted），但是由于element的对话框是基于v-if这个功能，所则仿以地图放在对话框中的话，你无论使用vue中的watch监听对话框是否打开也好，使用element的open（element的对话框回调）也好，都没用，起码第一次打开对话框的时候一定是显示空白，第二次打开的时码盯谨候才会出现地图。

3.所以有这种需求的话，写在单独的组建中是最好的选择。

[img]

vue+elementui的el-dialog全局配置拖拽

1、config/element文件夹下新穗槐烂建dialogDrag文件

2、config/element/猜漏index.js文件修改:

  import dialogDragMixin from './dialogDrag'

  export function installElement(Vue, Element) {

     明顷 Element.Dialog.mixins.push(dialogDragMixin);

  }

3、main.js中引入

import { installElement } from '@/config/element';

installElement(Vue, Element);

Vue——每次弹出el-dialog，都会执行mounted

在Vue开发中，有时需要我在同一个页颤竖橡面或列表中，多次加载同一个组件，但问题来了。（例如使用：新增、编辑、详情，使用弹框组件纤烂时）

该组件只在页面加载中，加载一次，后面不会茄旁再加载了，如el-dialog,解决办法如下，在el-dialog外再加一层div.

div中以v-if来控制组件el-dialog的出现与否,每次弹出el-dialog，都会执行mounted,而不加div,只会执行一次。

一个页面中有多个el-dialog平级,如何调用

最近使用vue+elementUI做项目，自然少不了dialog这个组件的使用，关于dialog嵌套有两个小问做虚题总结下。

1.dialog嵌套时，内层dialog上有遮罩层，无法点击。

关于这个，其实官方网站在介绍嵌套的dialog时也有提到：

正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套

Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body

元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

内层的dialog在使用时，需要加上append-to-body属性，官方诗示例为： el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body /el-dialog

2.嵌套dialog为父子组件关系时，子组件（内层dialog）关闭后无法打开。关于这个问题，之前带戚百度的方法都是在子组件监听父组件传过来的值，并在子组件的dialog执行close方法时，像父组件传递一个false的状态值。最近在查看官方有关计算属性的文档时，发现这个完全可以用计算属性解决，现将两种方法父子组件的代码分别示例，大家可根据个纯行燃人习惯选择使用：

父组件代码段（两种方法相同）：

template

div

el-button type="primary" @click="outerVisible = true"点击打开外层 Dialog/el-button

el-dialog title="外层 Dialog" :visible.sync="outerVisible"

确定删除这条信息吗？

div slot="footer" class="dialog-footer"

el-button @click="outerVisible = false"取 消/el-button

el-button type="primary" @click="innerVisible = true"确认/el-button

/div

/el-dialog

child :innerVisible="innerVisible" v-on:innerDialog="getInnerStatus($event)"/child

/div

/template

script

import child from "./child";

export default {

name: "father",

components: { child },

data() {

return {

outerVisible: false,

innerVisible: false

};

},

methods: {

getInnerStatus(status) {

this.innerVisible = status;

}

}

};

/script

关于vueel-dialog和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。