vant van-cell + popover 重复弹框问题

效果图.jpeg

点击显示popover，结果所有cell上的popover都显示了

定位问题

出现这个问题，首先喊了声我屮艸芔茻，咋弄，以前也cell+popover这么用过啊。

一想那时候封装了cell，这次没封装，估计就是这的问题，就是下面方案一

二想既然显示出来了，那就百度吧，看咋控制隐藏，结果网上没找到啥有用的信息，就是下面方案二，还是自己巴拉的

三想为了充实点工作时间（适当摸鱼），应该还有其他方案，或者我可以提供一个方案，毕竟网上没找到（我蠢）。就是下面方案三

解决方案

方案一 封装cell

把cell提成组件，内部控制popover的逻辑

这个方案最麻烦，但思路最简单，就是一个v-model控制一个popover

方案二 控制popover的display

popover-code.jpeg

看到没，两个popover对比，是通过display:none 控制的

只要是显示到界面上的ui，都能通过css控制显示隐藏，所以，就开始找popover显示

在页面打印一下this，一层一层的往下找，先找到具体的ref对应的popover

popover-refs.png

然后再往下找popover显示的元素。可以从源码中看到popover创建的element

popover-el.jpeg

所有，有了下面的代码

      this.$nextTick(() => {
        const el = this.$refs[('popover' + index)]
        if (el) {
          for (let i = 0; i < this.fileList.length; i++) {
            if (i !== index) {
              this.$refs[('popover' + i)][0].$refs.popover.$el.style.display = 'none'
            }
          }
        }
      })

简直不要太蠢，并且感觉也不可靠，所以又抽空优化了一下，如下方案三

方案三 唯一model

第一种方案以前开发时候用过，但是不想那么麻烦了，并且遇到问题绕过去也挺不舒服。至于第二种方案，感觉有点蠢，算是一种笨方法。

所以，就又翻了一下popover，思考了一下：

1、popover用v-model控制显示的
2、cell+popover实现的时候，一个value被多个popover绑定，内部又不知道
3、那，一个popover绑定一个value应该就可以

所以，就有了如下代码，很简单

// popover的v-model是个boolean，所以show是个boolean数组就行
<van-popover
  v-model="show[index]"
  ...
  >
    <template #reference>
      ...
    </template>
</van-popover>
          
data() {
  return {
    // v-model属性
    show: []
  }
}

// 请使用Vue的set方法，立即触发popover内对value的监听
this.$set(this.show, index, true)

其实这种方案原理跟第一种方案是一样的，都是一个value控制一个popover的状态