vant的picker組件設(shè)置文字超長(zhǎng)滾動(dòng)方式

更新時(shí)間：2022年12月06日 09:30:20 作者：_木兮_

這篇文章主要介紹了vant的picker組件設(shè)置文字超長(zhǎng)滾動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

picker組件設(shè)置文字超長(zhǎng)滾動(dòng)

我們的手機(jī)端使用vant來(lái)做前端UI框架。

今天在使用vant的picker組件時(shí)候，遇到了一個(gè)問(wèn)題。當(dāng)文字過(guò)長(zhǎng)的時(shí)候，vant的處理方式是ellipsis，超長(zhǎng)部分顯示【…】

如果恰好省略號(hào)前邊內(nèi)容相同，用戶就無(wú)法區(qū)分選項(xiàng)了。如圖：

vant沒(méi)有提供滾動(dòng)的實(shí)現(xiàn)方式，所以我們自己兼容實(shí)現(xiàn)一下。

首先，打開(kāi)開(kāi)發(fā)者工具看下dom結(jié)構(gòu)

我的思路是，如果在選中狀態(tài)下，內(nèi)層文字div長(zhǎng)度大于外層的時(shí)候。給內(nèi)層增加一個(gè)滾動(dòng)動(dòng)畫(huà)效果。

實(shí)現(xiàn)如下：

重寫(xiě).van-ellipsis兩個(gè)樣式，去掉ellipsis效果和overflow:hidden
監(jiān)聽(tīng)picker的change事件
在dom渲染結(jié)束之后，獲取.van-picker-column__item–selected并判斷它與內(nèi)部文字的寬度
如果內(nèi)部組件寬度大于外部，在添加一個(gè)animation

<template>
  <div id="app">
    <van-picker show-toolbar title="標(biāo)題" :columns="columns" @change="checkScroll" />
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      columns: [{
        text: '浙江',
        children: [{
          text: '溫州溫州溫州溫州溫州溫州溫州-杭州',
          children: [{ text: '西湖區(qū)' }, { text: '余杭區(qū)' }],
        }, {
          text: '溫州溫州溫州溫州溫州溫州溫州-溫州',
          children: [{ text: '鹿城區(qū)' }, { text: '甌海區(qū)' }],
        }]
      }]
    }
  },
  methods: {
    checkScroll () {
      this.$nextTick(() => {
        // 獲取選中元素
        let selectedItems = [...document.querySelectorAll('.van-picker-column__item--selected')]
        selectedItems.forEach(item => {
          let child = item.querySelector('.van-ellipsis')
          if (child.offsetWidth > item.offsetWidth) { // 判斷child文字寬度
            item.classList.add('scroll')
          } else {
            item.classList.remove('scroll')
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-picker-column__item--selected {
  /* 重寫(xiě)選中后的效果 */
  .van-ellipsis {
    text-overflow: unset;
    overflow: visible;
  }
  /* 增加scroll類 */
  &.scroll > .van-ellipsis {
    animation: move 4s linear infinite;
  }
}
@keyframes move {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

這樣，當(dāng)滾動(dòng)picker選中文字超長(zhǎng)的時(shí)候，選中項(xiàng)就會(huì)出現(xiàn)滾動(dòng)效果。

vant_picker_選擇器(搭配彈出層使用)

<van-field
  readonly
  clickable
  label="城市"
  :value="value"
  placeholder="選擇城市"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" round position="bottom">
  <van-picker
    show-toolbar
    :columns="columns"
    value-key="name" 
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>
<!--
重點(diǎn)：自定義value-key屬性：默認(rèn)值是text
value-key這個(gè)屬性是自定義后臺(tái)返回字段作為選擇器顯示的內(nèi)容，這樣后臺(tái)返回的字段位未name時(shí)，也可以顯示了。
否則默認(rèn)的原始對(duì)象默認(rèn)是[{text:'選項(xiàng)一',value:'1'},{text:'選項(xiàng)二',value:'2'}]
-->

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: