vue + element-ui dialog 弹出框使用

ws346348183

于 2019-05-24 10:55:13 发布

阅读量2.9w

点赞数 3

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/ws346348183/article/details/90512529

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

在构建页面时，若需按钮点击弹出新页面编辑，可使用dialog弹出框并考虑复用。具体步骤为：父组件页面设按钮，dialogTableVisible默认隐藏，addUser触发；编写子组件；在父组件中引用子组件，最后展示效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构建页面时，需要按钮弹出一个新的页面进行编辑，此时需要用到dialog弹出框，考虑复用，把弹出框单独提出来使用。

1.父组件页面一个按钮，dialogTableVisible默认false，隐藏。addUser触发，

 <el-button type="primary" icon="el-icon-plus" size="small" @click="addUser()" :disabled="disp()">添加</el-button>
      <el-dialog title="登陆" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false" width="30%">
        <Add></Add>
      </el-dialog>

 data() {
      return {
        dialogTableVisible: false,
        }
    }

 addUser(){
          this.dialogTableVisible=true;//默认页面不显示为false,点击按钮将这个属性变成true
      },

2.子组件编写

<template>
    <div>子组件</div>
</template>
<script>
export default {
    
    name: 'Add',//这个LoginName最好和引入的vue的LoginName相同
}
</script>

3.父组件中引用子组件

 import Add  from './Add.vue';
 components: {
      Add
    }

4.效果图