[uniapp]弹窗操作技巧

2024年9月2日 16:47 by wst

场景

在uniapp中需要一个弹窗，这个弹窗是有满足某些条件的时候才会显示；

问题

根据使用文档，有个属性ishide, 当ishide=false的时候弹窗不显示，可是代码写到vue文件中时，还是会被渲染，导致找不到变量报错；代码如下：

  <!-- 查看可用操作 -->
  <zwy-popup v-if="popShow" :ishide='popShow' width="480rpx" height="380rpx" radius="16rpx">
    <view class="pop-head">
      可用操作
    </view>
    <view class="pop-content">
      <view class="btn-zone" v-if="orderedList[eleIndex].ordered_flag">
        <button type="primary" size="mini" @tap="gaveDish(eleIndex)">赠送</button>
        <button type="primary" size="mini" @tap="backDish(eleIndex)">退菜</button>
        <button type="primary" size="mini" @tap="toSelectDish(eleIndex)">选口味</button>
      </view>
      <view class="btn-zone" v-else>
        <button type="primary" @tap="plusDish(eleIndex)" size="mini">加量</button>
        <button type="primary" @tap="minusDish(eleIndex)" size="mini">减量</button>
        <button type="primary" @tap="gaveDish(eleIndex)" size="mini">赠送</button>
        <button type="primary" @tap="deleteDish(eleIndex)" size="mini">删除</button>
      </view>
    </view>
    <view class="close" @click="popShow = false">✕</view>
  </zwy-popup>

解决方法

既然渲染报错，那么就让它不渲染呗，于是加了v-if搞定！

如果你也有什么经验要分享，欢迎评论！