先上效果图:
贴上我的代码:
<span v-if="!isBin" class="chat-btn">
<el-popover
v-if="!isBin"
v-model="popoverVisable" // 通过改变 v-model 绑定的属性值,来控制显示隐藏
placement="right"
width="181"
popper-class="bind-card-popover"
trigger="manual"
>
<div v-if="!isBin" class="con">点击这里尽快绑定学员名片哦~</div>
<el-button
v-if="!isBin"
slot="reference"
type="primary"
size="mini"
@click="(popoverVisable = true), (show = true)"
>
绑定名片
</el-button>
</el-popover>
<!-- <el-button slot="reference" type="primary" size="mini" @click="show = true">
绑定名片
</el-button> -->
</span>
这里是使用 el-popover
来写的,我们要根据条件来渲染图片中的内容,但是发现 当v-if条件变化时,虽然 v-if绑定的值已经拿到了,但是像我的代码中的button
就是不渲染。
解决办法: 使用 v-model
来控制渲染,就能解决button
不渲染的问题。
在data中定义一个属性 popoverVisable:false
,然后去改变这属性,来控制显示。
贴上我的写法:
popoverhiddleToShow() {
this.popoverVisable = false;
setTimeout(() => {
this.popoverVisable = true;
}, 200);
可以使用watch监控判断的条件,当条件变化时来调用这个函数,改变这个属性,以达到是否渲染显示的效果。
如果一开始就要判断是否渲染可以在 mounted这个生命周期中来改变属性值。
mounted() {
setTimeout(() => {
this.popoverVisable = true;
}, 200);
},