vant van-cell + popover 重複彈框問題

點擊顯示popover，結果所有cell上的popover都顯示了

定位問題

出現這個問題，首先喊了聲我屮艸芔茻，咋弄，以前也cell+popover這麼用過啊。

一想那時候封裝了cell，這次沒封裝，估計就是這的問題，就是下面方案一

二想既然顯示出來了，那就百度吧，看咋控制隱藏，結果網上沒找到啥有用的信息，就是下面方案二，還是自己巴拉的

三想爲了充實點工作時間（適當摸魚），應該還有其他方案，或者我可以提供一個方案，畢竟網上沒找到（我蠢）。就是下面方案三

解決方案

方案一 封裝cell

把cell提成組件，內部控制popover的邏輯

這個方案最麻煩，但思路最簡單，就是一個v-model控制一個popover

方案二 控制popover的display

看到沒，兩個popover對比，是通過display:none 控制的

只要是顯示到界面上的ui，都能通過css控制顯示隱藏，所以，就開始找popover顯示

在頁面打印一下this，一層一層的往下找，先找到具體的ref對應的popover

然後再往下找popover顯示的元素。可以從源碼中看到popover創建的element

所有，有了下面的代碼

      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的狀態