Vant UI中van-collapse下拉摺疊面板預設展開第一項的方法

2022-03-29 13:00:07

問題重現

最近在做專案時，有一個需求是讓 van-collapse 下拉摺疊面板的第一項預設是展開狀態；我使用到了 Vant UI 元件，首先按照官網檔案的寫法直接引入：

<!--下拉摺疊面板-->
  <van-collapse class="collapse" v-model="activeNames" is-link="false">
    <van-collapse-item title="" :name="index">
      <!--展開後顯示的內容-->
      <span class="coll_show">制定拜訪計劃</span>
      <span class="coll_show">保險保障分析</span>
      <span class="coll_show">製作計劃書</span>
      <span class="coll_show">會客廳講解</span>
      <span class="coll_show">
        <van-cell @click="showEdit">修改備註</van-cell>
        <van-popup v-model="showRemark">
          <p>修改備註</p>
          <form action="/">
            <input class="text" placeholder="最多輸入50個字" type="text">
            <input class="btn1" type="button" value="取消">
            <input class="btn2" type="submit" value="提交">
          </form>
        </van-popup>
      </span>
    </van-collapse-item>
  </van-collapse>

export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};

預設每一項都是不展開的：

需求實現

先看官方檔案 Collapse Props：

引數	說明	型別	預設值
v-model	當前展開面板的 name	手風琴模式：number \| string 非手風琴模式：(number \| string)[ ]	-
accordion	是否開啟手風琴模式	boolean	`false`
border	是否顯示外邊框	boolean	`true`

通過官方檔案我們可以知道，van-collapse 的 v-model 屬性所繫結的是當前展開面板 van-collapse-item 的 name 值，我的下拉麵板父級為遍歷產生，所以 name 值採用了動態的下標的依次為數位 0、1、2、3.....

而是否開啟手風琴模式則決定了 v-model 屬性值的型別。

非手風琴模式下：v-model 為陣列型別，那麼此時我們想讓第一項也就是 name 值為 0 的摺疊項預設展開，在 data 中傳入 activeNames 時就應該將其設定陣列格式且預設值為 0，但注意是 [0] 而不是 ["0"]：

export default {
  data() {
    return {
      activeNames: [0],
    };
  },
};

此時第一項預設展開：

手風琴模式下：v-model 屬性值型別為數位或字串，那麼我們將 data 中的 activeNames 改為數位或字串即可；

export default {
  data() {
    return {
      activeNames: 0,
    };
  },
};

效果可以實現；

附：vant之van-collapse無法預設展開某一項的解決方法

name 唯一識別符號，預設為索引值 number | string index

v-model 當前展開面板的 name 手風琴模式：number | string

非手風琴模式：(number | string)[]

但我在使用時 activeNames: [‘0’] 死活不管用，後來改[0]好了

<div class="small-area-details" v-for="(listItem, listIndex) in goldAlbumList" :key="listIndex">
   <van-collapse v-model="activeNames" :border="false">
     <van-collapse-item
       title="標題"
       :name="listIndex">
     </van-collapse-item>
   </van-collapse>
</div>

<script>
export default {
data() {
    return {
        activeNames: [0] //不能是['0']
        }
    }
}
</script>

總結

到此這篇關於Vant UI中van-collapse下拉摺疊面板預設展開第一項的文章就介紹到這了,更多相關Vant UI van-collapse下拉預設第一項內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vant UI中van-collapse下拉摺疊面板預設展開第一項的方法

目錄

問題重現

需求實現

附：vant之van-collapse無法預設展開某一項的解決方法

總結

熱門文章