外贸网站建设公司服务,住房城乡建设部网站文件查询,php 网站,现在网站做多宽!--定义一个有按钮的对话框 相当于dialog和按钮组合使用--
template!-- 有按钮的对话框 这个位置的代码会被包裹过去--!--close-on-click-modal 是否可以通过点击 modal 关闭 Dialog append-to-body控制不能出现遮挡层--el-dialog:title!--定义一个有按钮的对话框 相当于dialog和按钮组合使用--
template!-- 有按钮的对话框 这个位置的代码会被包裹过去--!--close-on-click-modal 是否可以通过点击 modal 关闭 Dialog append-to-body控制不能出现遮挡层--el-dialog:titletitle:show-closeShowClose:fullscreenfullscreen:close-on-click-modalcloseOnClickModal:visible.syncvisible:widthwidth:destroy-on-closedestroyOnCloseclosecloseappend-to-body!--向别的位置包裹代码 上面的代码会被包裹过去--slot /!--定义所在插槽的按钮--div slotfootertemplate v-ifbuttonListel-buttonv-for(button, index) in buttonList:keyindex:typebutton.type:iconbutton.iconclickbutton.onClick{{ button.text }}/el-button/template!--定义其中的确定取消按钮--template v-elseel-button v-ifListShow clickcancel{{ cancelButtonText }}/el-buttonel-button typeprimary clickok :disableddisabled{{ 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();}}
};
/scriptstyle scoped/style
