使用vuejs和elementui生成一个弹出层组件组件包含width宽度属性类型为数字;title属性类型为字符串。该组件包含一个默认插槽并通过点击按钮触发该组件的显示
<template>
<el-dialog
:visible.sync="dialogVisible"
:title="title"
:width="width"
:before-close="beforeClose"
>
<slot></slot>
</el-dialog>
<el-button type="primary" @click="dialogVisible = true">打开弹出层</el-button>
</template>
<script>
export default {
name: "MyDialog",
props: {
width: {
type: Number,
default: 600
},
title: {
type: String,
default: "弹出层标题"
}
},
data() {
return {
dialogVisible: false
}
},
methods: {
beforeClose(done) {
this.$confirm("确定关闭弹出层?")
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>

原文地址: http://www.cveoy.top/t/topic/reR 著作权归作者所有。请勿转载和采集!