vue中单独封装elementui中的Dialog弹框组件
2024-09-04 19:00:14
一。在components文件中新建 弹框组件
<template>
<div>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props:{
DialogFlag: {
default: false
}
},
data(){
return{
dialogVisible: false
}
},
watch:{
DialogFlag(){
this.dialogVisible = this.DialogFlag
}
},
methods:{
handleClose() {
this.$emit('update:DialogFlag',false)
}
}, }
</script>
二。在需要用到的组件中引入子组件
<account-inform-add :DialogFlag.sync="DialogFlag"></account-inform-add>
methods: {
addAccountInform(){
this.DialogFlag = true
}
}
最新文章
- 2、项目标准的制定 - PMO项目管理办公室
- sql select 综合运用
- C/C++构建系统 CMake
- HDU 4666 Hyperspace(曼哈顿距离)
- html5 canvas 笔记三(绘制文本和图片)
- Markdown 编辑模板
- 51nod1225 余数之和
- 洛谷 P1890 gcd区间
- Mac上安装pexpect
- 用newLISP读取Hive的元数据
- Idea高级用法
- 移动端web开发中对点透的处理,以及理解fastclick如何做到去除300ms延迟
- [ExtJS5学习笔记]第十三节 Extjs5的Ext.each方法学习
- BZOJ_2038_[2009国家集训队]小Z的袜子(hose)_莫队
- Chapter 5 Blood Type——2
- Ubuntu 16.04下安装MySQL及远程连接
- Vue之computed计算属性
- Go语言中的结构体 (struct)
- 编程语言分类,安装python解释器,变量
- Luogu3587[POI2015]POD - hash + 单调队列