<!--定义一个有按钮的对话框 相当于dialog和按钮组合使用-->
<template><!-- 有按钮的对话框 这个位置的代码会被包裹过去--><!--close-on-click-modal	是否可以通过点击 modal 关闭 Dialog append-to-body控制不能出现遮挡层--><el-dialog:title="title":show-close="ShowClose":fullscreen="fullscreen":close-on-click-modal="closeOnClickModal":visible.sync="visible":width="width":destroy-on-close="destroyOnClose"@close="close"append-to-body><!--向别的位置包裹代码 上面的代码会被包裹过去--><slot /><!--定义所在插槽的按钮--><div slot="footer"><template v-if="buttonList"><el-buttonv-for="(button, index) in buttonList":key="index":type="button.type":icon="button.icon"@click="button.onClick">{{ button.text }}</el-button></template><!--定义其中的确定取消按钮--><template v-else><el-button v-if="ListShow" @click="cancel">{{ cancelButtonText }}</el-button><el-button type="primary" @click="ok" :disabled="disabled">{{ okButtonText }}</el-button></template></div></el-dialog>
</template>
<script>
export default {name: "ButtonDialog",/*通过父子组件传值可以通过父子组件传值*/props: {/*定义一个标题*/title: { type: String, required: false }, // 标题/*是否为全屏显示*/fullscreen: { type: Boolean, default: false, required: false }, // 是否为全屏显示/*是否可以通过model关闭*/closeOnClickModal: { type: Boolean, default: true, required: false }, // 见 element ui 参数/*确定按钮显示文字*/okButtonText: { type: String, default: "确 定", required: false }, // 确定按钮显示文字/*取消按钮显示文字*/cancelButtonText: { type: String, default: "取 消", required: false }, // 取消按钮显示文字/*显示按钮显示文字*/buttonList: { type: Array, required: false }, // 显示按钮列表；如果设置了该参数，默认的按钮会被覆盖/*设置宽度*/width: { type: String, required: false, default: "50%" }, // 宽度/*关闭时候销毁dialog里的元素*/destroyOnClose: { type: Boolean, default: false, required: false }, // 见 element ui 参数/*控制按钮禁用*/disabled:{type:Boolean},/*控制是否有关闭按钮*/ShowClose:{type:Boolean,default:false},/*按钮是否禁用*/ListShow:{type:Boolean,default:true}},data() {return {visible: false,};},methods: {/*控制dialog的显示*/show() {this.visible = true;},/*控制dialog的关闭*/close() {this.visible = false;this.$emit("close");},/*控制dialog的调用父组件的方法*/ok() {this.$emit("ok");},/*控制组件调用父级的方法*/cancel() {this.$emit("cancel");this.close();}}
};
</script><style scoped></style>

父子组件传值

通过mode控制按钮禁用

<button-dialog :disabled="!mode" :ListShow="false" ref="dialog" width="600px" @ok="confirm"><h2 class="login-h1">请选择登录角色</h2><div class="container" ><el-radio-group  v-model="mode"><div class="login-btn"><el-radio-button class="login-btn" label="0">营销端</el-radio-button></div><div class="login-btn"><el-radio-button class="login-btn" label="1">业务端</el-radio-button></div></el-radio-group></div></button-dialog>