工作233：定义有对话框的按钮

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

工作233：定义有对话框的按钮相关推荐

如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置
今天有个工作是把所有的确认按钮放在取消按钮的左边,类似于下图这样的,公司用的时antd组件但是antd组件的按钮时确认键放在右边的可以采用下面的方式,将按钮调换过来: 对的,就是在modal里面的 ...
android 中怎么实现点击了对话框的按钮以后对话框不会消失,android 中怎么实现点击了对话框的按钮以后对话框不会消失...
满意答案 henpokeyo 2014.05.17 采纳率:40% 等级:9 已帮助:667人在android中当你点击了对话框的按钮以后不管你是否调用了dismis()函数系统本省都会去调 ...
[ucgui] 对话框7——按钮触发与模式窗口
>_<" 模式窗口,只有结束该窗口时才能聚焦到其他的窗口上~ 1 // 2 //全局函数 3 // 4 static void _cbDialog0(WM_MESSAGE * p ...
工作总结：文件对话框的分类(C++)
原文地址:http://www.jizhuomi.com/software/173.html 文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中经常见到这两种文件对话框.例如 ...
vb.net 弹出对话框修改按钮名_Microsoft Excel怎么批量快速修改批注？
知识改变命运,科技成就未来.在使用Microsoft Excel的时候,可能会对单元格添加批注.如果需要对单元格的批注进行批量修改,几个批注处理起来很简单,但是批注过多该怎么办呢?通过Microsof ...
Win32：MessageBox、AfxMessageBox、及工作线程中的对话框
首先我们要清晰一点,同样是线程,但创建线程方式不同,由于创建线程的内部实现不同,也就意味着对后期影响是不一样的. 三种创建线程的方式 C语言的:__beginthread()/__beginthrea ...
[Web 开发] 定制IE下载对话框的按钮（打开/保存）
下图常见的IE 下载对话框, 上面有3个主要按钮: Run (打开), Save(保存), Cancel (取消) 在某些情况下, 你不希望用户点击"Run" 按钮或者 &quo ...
vb.net 弹出对话框修改按钮名_批量修改日期格式
在一些手工录入的表格里,会因为输入不规范导致出现各种各样的日期格式,如下图: 在这种状态下,进行日期的筛选统计,或者透视分析,都会因为日期格式的不规范,导致无法直接得到结果.如果是数据量比较大的时候, ...
自己定义AlertDialog对话框布局
自己定义对话框中的信息body布局 LayoutInflater inflater =getLayoutInflater();View layout = inflater.inflate(R.layo ...

工作233：定义有对话框的按钮

工作233：定义有对话框的按钮相关推荐

最新文章

热门文章