快捷導(dǎo)航

Vant?UI中van-collapse下拉折疊面板默認(rèn)展開(kāi)第一項(xiàng)的方法

更新時(shí)間：2022年03月29日 12:09:32 作者：Developer?小馬

之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開(kāi)第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下

問(wèn)題重現(xiàn)

最近在做項(xiàng)目時(shí)，有一個(gè)需求是讓 van-collapse 下拉折疊面板的第一項(xiàng)默認(rèn)是展開(kāi)狀態(tài)；我使用到了 Vant UI 組件，首先按照官網(wǎng)文檔的寫法直接引入：

<!--下拉折疊面板-->
  <van-collapse class="collapse" v-model="activeNames" is-link="false">
    <van-collapse-item title="" :name="index">
      <!--展開(kāi)后顯示的內(nèi)容-->
      <span class="coll_show">制定拜訪計(jì)劃</span>
      <span class="coll_show">保險(xiǎn)保障分析</span>
      <span class="coll_show">制作計(jì)劃書(shū)</span>
      <span class="coll_show">會(huì)客廳講解</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個(gè)字" 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'],
    };
  },
};

默認(rèn)每一項(xiàng)都是不展開(kāi)的：

需求實(shí)現(xiàn)

先看官方文檔 Collapse Props：

參數(shù)	說(shuō)明	類型	默認(rèn)值
v-model	當(dāng)前展開(kāi)面板的 name	手風(fēng)琴模式：number \| string 非手風(fēng)琴模式：(number \| string)[ ]	-
accordion	是否開(kāi)啟手風(fēng)琴模式	boolean	`false`
border	是否顯示外邊框	boolean	`true`

通過(guò)官方文檔我們可以知道，van-collapse 的 v-model 屬性所綁定的是當(dāng)前展開(kāi)面板 van-collapse-item 的 name 值，我的下拉面板父級(jí)為遍歷產(chǎn)生，所以 name 值采用了動(dòng)態(tài)的下標(biāo)的依次為數(shù)字 0、1、2、3.....

而是否開(kāi)啟手風(fēng)琴模式則決定了 v-model 屬性值的類型。

非手風(fēng)琴模式下：v-model 為數(shù)組類型，那么此時(shí)我們想讓第一項(xiàng)也就是 name 值為 0 的折疊項(xiàng)默認(rèn)展開(kāi)，在 data 中傳入 activeNames 時(shí)就應(yīng)該將其設(shè)置數(shù)組格式且默認(rèn)值為 0，但注意是 [0] 而不是 ["0"]：

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

此時(shí)第一項(xiàng)默認(rèn)展開(kāi)：

手風(fēng)琴模式下：v-model 屬性值類型為數(shù)字或字符串，那么我們將 data 中的 activeNames 改為數(shù)字或字符串即可；

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

效果可以實(shí)現(xiàn)；

附：vant之van-collapse無(wú)法默認(rèn)展開(kāi)某一項(xiàng)的解決方法

name 唯一標(biāo)識(shí)符，默認(rèn)為索引值 number | string index

v-model 當(dāng)前展開(kāi)面板的 name 手風(fēng)琴模式：number | string

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

但我在使用時(shí) activeNames: [‘0’] 死活不管用，后來(lái)改[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="標(biāo)題"
? ? ? ?:name="listIndex">
? ? ?</van-collapse-item>
? ?</van-collapse>
</div>

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

總結(jié)

到此這篇關(guān)于Vant UI中van-collapse下拉折疊面板默認(rèn)展開(kāi)第一項(xiàng)的文章就介紹到這了,更多相關(guān)Vant UI van-collapse下拉默認(rèn)第一項(xiàng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: