Ant Design of Vue对话框a-model动态实现显示隐藏底部
Ant Design of Vue对话框a-model动态实现显示隐藏底部
·
在antDesignOfVue中的官方描述中不需要确定按钮的时候可以把footer设为null
在实际的应用开发中我遇到了编辑和查看使用同一个弹窗 但是查看这个功能不需要下方的点击按钮,也就是底部的按钮部分。
当footer="undefined"
时底部按钮就可以显示当footer="null"
时底部按钮就可以隐藏。给footer赋值,然后控制值的改变就可以控制底部是否显示隐藏。
按照这个思路就可以完成。下面看完整代码。
<template>
<a-button type="primary" @click="look">查看</a-button>
<a-button type="primary" @click="edit">编辑</a-button>
<a-modal
v-model="visible"
:title="title"
ok-text="确认"
cancel-text="取消"
:width="700"
@ok="hideModal"
destroyOnClose
:footer='showFooter'
>
<p>123123132132132132132132</p>
</a-modal>
</template>
<script>
export default {
data(){
return{
visible:false,
title:'',
showFooter:undefined,
}
},
methods: {
edit(){
this.visible = true
this.title = '编辑'
this.showFooter=undefined
},
look(){
this.visible = true
this.title = '查看'
this.showFooter=null
},
hideModal(){
this.visible = false
},
},
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)