vue自定义组件+Dialog 对话框组件定制弹出框教程(转载)
1、新建一个.vue页面,写一个Dialog组件、把弹出框上想要展示的内容放进去。<template><el-dialogtitle="新增标签":visible.sync="centerDialogVisible"width="80%"center><div><!-- 这个div放置内容 --></div></el-dialog&
·
1、新建一个.vue页面,写一个Dialog组件、把弹出框上想要展示的内容放进去。
<template>
<el-dialog
title="新增标签"
:visible.sync="centerDialogVisible"
width="80%"
center>
<div>
<!-- 这个div放置内容 -->
</div>
</el-dialog>
</template>
<script>
export default {
name: "Popup",
data(){
return{
centerDialogVisible:false
}
}
}
</script>
2.父组件引入并注册Dialog组件
import Popup from '/src/components/labelfact/Popup.vue';
<Popup ref="Popup"></Popup>
3.触发Dialog组件的事件调用
this.$refs.Popup.centerDialogVisible = true;
注:弹出框周围要有阴影部分,否则说明用错组件了
更多推荐
已为社区贡献3条内容
所有评论(0)