buttondialog.vue

<!--定义一个有按钮的对话框 相当于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 @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}},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>