vue2怎么实现同一个弹框点击审核的时候弹框里有审核按钮点击查看详情的时候没有
可以在弹框组件中通过props传递一个参数,来控制弹框中是否显示审核按钮。具体实现步骤如下:
-
在父组件中定义一个变量
showAuditButton,用于控制弹框中是否显示审核按钮。 -
在弹框组件中定义一个props,用于接收父组件传递过来的
showAuditButton参数。 -
在弹框组件中使用
v-if指令来控制审核按钮是否显示,如下所示:<button v-if="showAuditButton" @click="audit">审核</button> -
在父组件中根据需要设置
showAuditButton的值。// 点击审核按钮时,弹出带有审核按钮的弹框 this.showAuditButton = true; // 点击查看详情按钮时,弹出不带审核按钮的弹框 this.showAuditButton = false;
完整的示例代码如下:
<!-- 父组件 -->
<template>
<div>
<button @click="showAuditModal">审核</button>
<button @click="showDetailModal">查看详情</button>
<modal :show-audit-button="showAuditButton"></modal>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data() {
return {
showAuditButton: true
}
},
methods: {
showAuditModal() {
this.showAuditButton = true;
},
showDetailModal() {
this.showAuditButton = false;
}
}
}
</script>
<!-- 弹框组件 -->
<template>
<div>
<h2>弹框标题</h2>
<p>弹框内容</p>
<button v-if="showAuditButton" @click="audit">审核</button>
<button @click="close">关闭</button>
</div>
</template>
<script>
export default {
props: {
showAuditButton: {
type: Boolean,
default: true
}
},
methods: {
audit() {
// 审核操作
},
close() {
// 关闭弹框
}
}
}
</script>
``
原文地址: http://www.cveoy.top/t/topic/eEJm 著作权归作者所有。请勿转载和采集!