Ant Design Vue 底部确定按钮消失与隐藏

最新推荐文章于 2024-10-18 19:33:48 发布

liujing8173

最新推荐文章于 2024-10-18 19:33:48 发布

阅读量1.9k

点赞数

文章标签： vue.js javascript 前端

原文链接：https://blog.youkuaiyun.com/qq_47648083/article/details/128645226

版权

在Vue.js应用中，通过设置组件属性实现编辑和查看模式的切换。编辑模式下显示底部按钮，查看模式时不显示，通过控制footer的值（undefined显示，null隐藏）来达到目的。具体做法是绑定modal组件的footer属性到data中的showFooter，并在编辑和查看方法中改变其值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际的应用开发中我遇到了编辑和查看使用同一个弹窗但是查看这个功能不需要下方的点击按钮，也就是底部的按钮部分。
当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>

————————————————
版权声明：本文为优快云博主「懒啦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：