快捷導(dǎo)航

Vant2移動端Vue組件庫問題記錄

更新時間：2023年01月19日 08:50:03 作者：雨季mo淺憶

Vant是一套輕量、可靠的移動端組件庫,通過Vant可以快速搭建出風(fēng)格統(tǒng)一的頁面,提升開發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于Vant2移動端Vue組件庫問題的相關(guān)資料,需要的朋友可以參考下

發(fā)布初衷：

記錄在移動端項目中使用 Vant 2 組件庫時遇到的各種問題，

方便以后再次遇到類似問題，能夠快時查閱解決

Popup 彈出層

介紹

彈出層容器，用于展示彈窗、信息提示等內(nèi)容，支持多個彈出層疊加展示。

問題記錄： Field 輸入框和 Popup 彈出層兩個結(jié)合使用時，

在 iPhone 真機上測試的時候出現(xiàn)的一個小 bug ：

點擊 Field 輸入框的時候， 第一次會彈出一個手機的鍵盤輸入框 ，

點擊第二次的時候才出來 Popup 彈出層里面的內(nèi)容（比如日期選擇器）

解決方案：

給 Field 輸入框設(shè)置 readonly ，通過 readonly 將輸入框設(shè)置為只讀狀態(tài)

輸入框 van-field 必須得加入 readonly 這個只讀屬性 ,

不然會導(dǎo)致用戶手機觸發(fā) 默認(rèn)鍵盤遮擋你的彈窗和選擇器內(nèi)容影響體驗

也不要用 disabled 來禁用輸入框 , 樣式會變成禁用狀態(tài)下的樣式很難改動

只需要設(shè)置為只讀即可 , 也不會觸發(fā)手機鍵盤

DatetimePicker 時間選擇

介紹

時間選擇器，支持日期、年月、時分等維度，通常與彈出層組件配合使用。

確認(rèn)選擇的時間數(shù)據(jù)是需要自己處理的，詳見 confirmPicker 方法

<template>
  <div class="seller">
    <van-cell
      title="開始時間"
      is-link
      :value-class="className"
      :value="timeValue"
      @click="showPopup" />
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="選擇時間"
        :loading="isLoadingShow"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="show = false"
        @confirm="confirmPicker"
      />
    </van-popup>
  </div>
</template>
 
<script>
export default {
  name: 'Seller',
  data () {
    return {
      msg: '商家頁面',
      timeValue: '請選擇時間',
      show: false,
      isLoadingShow: true,
      currentDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2020, 12, 31),
      className: ''
    }
  },
  methods: {
    // 顯示彈窗
    showPopup () {
      this.show = true
      this.isLoadingShow = true
      setTimeout(() => {
        this.isLoadingShow = false
      }, 500)
    },
    // 確認(rèn)選擇的時間
    confirmPicker (val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
      this.className = 'timeClass'
      this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`
      this.show = false
    },
    // 選項格式化函數(shù)
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}時`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    }
  }
}
</script>
 
<style lang="stylus" rel="stylesheet/stylus" scoped>
.seller
  .timeClass {
    color: #333;
  }
</style>

Field 輸入框

介紹

表單中的輸入框組件。

問題記錄： Field 輸入框 和 Popup 彈出層兩個結(jié)合使用時，

在 iPhone 真機 上測試的時候出現(xiàn)的一個小 bug ：

點擊 Field 輸入框 的時候， 第一次會彈出一個手機的鍵盤輸入框 ，

點擊第二次的時候才出來 Popup 彈出層里面的內(nèi)容（比如日期選擇器）

解決方案：

給 Field 輸入框設(shè)置 readonly ，通過 readonly 將輸入框設(shè)置為只讀狀態(tài)

輸入框 van-field 必須得加入 readonly 這個只讀屬性 ,

不然會導(dǎo)致用戶手機觸發(fā) 默認(rèn)鍵盤遮擋你的彈窗和選擇器內(nèi)容影響體驗

也不要用 disabled 來禁用輸入框 , 樣式會變成禁用狀態(tài)下的樣式很難改動

只需要設(shè)置為只讀即可 , 也不會觸發(fā)手機鍵盤

Picker 選擇器

介紹

提供多個選項集合供用戶選擇，支持單列選擇和多列級聯(lián)，通常與彈出層組件配合使用。

業(yè)務(wù)場景：

一開始以為只能渲染純數(shù)組

但后來用的時候，后端返回來的數(shù)據(jù)結(jié)構(gòu)是數(shù)組嵌套對象的模式，

因此還特意將數(shù)組對象里面的數(shù)據(jù)專門篩選出來一個新數(shù)組用于渲染。。

但后來傳參的時候需要數(shù)據(jù)結(jié)構(gòu)里面的其他數(shù)據(jù)用于傳參

所以又找了找這個Picker選擇器可不可以渲染數(shù)組對象結(jié)構(gòu)的案例：

發(fā)現(xiàn) [ { } ] , 是可以渲染的，只不過還要做一下處理：

使用案例：
<van-popup
  v-model="showTitle"
  position="bottom"
>
  <van-picker
    title="標(biāo)題"
    show-toolbar
 
    value-key="name"
 
    :columns="columns"
    @confirm="onConfirm"
    @cancel="onCancel"
  />
</van-popup>
export default {
  data() {
    return {
      showTitle: false,
      columns: [], // 后端請求的數(shù)據(jù)
      queryFrom: {
        id: null,
        name: '',
      }
    };
  },
  methods: {
    onConfirm(value, index) {
      this.queryFrom.id = value.id // 需要傳給后端的id值
      this.queryFrom.name = value.name // 用于渲染選擇器列表數(shù)據(jù)
      this.showTitle = false // 關(guān)閉彈出層
    },
    onCancel() {
      this.showTitle = false
    },
  },
};

補充知識：

vant-ui 之 Field 輸入框和 Picker 結(jié)合使用時，如何綁定正確的 id 類型的值的問題。

很常見的需求：

表單中的一項，需要從 picker 控件中選擇正確的值后，展示的是字符串，

然后提交到后臺服務(wù)器的則是字符串對應(yīng)的 value 類型的值的問題。

點擊表單的檔案組，彈出 Picker 選擇組件，選擇正確的值，填充到表單項，但是，

提交到服務(wù)器去，需要提交對應(yīng)的 id ，而不是看到的字符串。

如何實現(xiàn) ？

定義兩個屬性，id 和 name ，兩個是一一對應(yīng)的關(guān)系。

在 van-picker 中，綁定的 confirm 函數(shù) ，參數(shù)獲取到的是一個對象

在這個函數(shù)內(nèi)，同時更新 id 和 name ，保證他倆一一對應(yīng) 。

  onConfirm(value, index) {
    this.queryFrom.id = value.id // 需要傳給后端的id值
    this.queryFrom.name = value.name // 用于渲染選擇器列表數(shù)據(jù)
    this.showTitle = false // 關(guān)閉彈出層
  },

如何展示默認(rèn)選中項

項目使用背景：

用戶填寫表單時，需要根據(jù)上面填寫的乘車人數(shù) 來自動讓下面的 Picker 選擇器

下拉時默認(rèn)值展示與人數(shù)相匹配的車輛類型

而又由于車輛類型是后端返回的數(shù)據(jù) ，并不是固定不變的，所以前端沒辦法寫死匹配方法

1、用戶輸入完乘車人數(shù) 后，自動發(fā)起請求，由后端來匹配相對應(yīng)的車輛類型

2、但是這里前端 Picker 組件需要用其索引值來展示下拉默認(rèn)值，后端又無法返給我索引

3、前端這里只能先請求車輛類型數(shù)據(jù)列表后，再請求匹配車型數(shù)據(jù)值，循環(huán)去匹配后拿到當(dāng)前匹配的索引值后再賦值給 Picker 組件

代碼實現(xiàn) ：
根據(jù)乘車人數(shù)展示默認(rèn)選中項
<van-picker
  show-toolbar
  title="車輛類型"
  value-key="dictLabel"
  :default-index="defaultMatch"
  :columns="applyType"
/>
 
data() {
  return {
    defaultMatch: 0, // 車輛類型下拉展示默認(rèn)索引值
    applyType: [], // 車輛類型列表
  }
}
 
methods: {
  // 根據(jù)乘車人數(shù)自動匹配車輛類型
  async blurMatchType() {
  let arr = []
  // 先請求車輛類型列表數(shù)據(jù)用于匹配
  let res = await this.getDicts('car_apply_type')
  if (res.code == 200) arr = res.data
  // 根據(jù)乘車人數(shù)請求匹配的車輛類型值
  let ret = await getMatchType(this.userCarForm.riderNum)
  const { code, data } = ret
  if (code == 200) {
      // 循環(huán)匹配后賦值其索引值
      arr.forEach((item, index) => {
        if (item.dictValue == data) {
          this.defaultMatch = index
        }
      })
    }
  }
}

List 列表

介紹

瀑布流滾動加載，用于展示長列表，當(dāng)列表即將滾動到底部時，會觸發(fā)事件并加載更多列表項。

List 組件通過 loading 和 finished 兩個變量控制加載狀態(tài)，當(dāng)組件滾動到底部時，會觸發(fā) load 事件并將 loading 設(shè)置成 true。

此時可以發(fā)起異步操作并更新數(shù)據(jù)，數(shù)據(jù)更新完畢后，將 loading 設(shè)置成 false 即可。

若數(shù)據(jù)已全部加載完畢，則直接將 finished 設(shè)置成 true 即可。

<van-list
  v-model="loading"
  :finished="finished"
  :finished-text="appList.length ? '沒有更多了' : ''"
  @load="onLoad"
>
  <van-cell v-for="item in appList" :key="item" :title="item" />
</van-list>
 
export default {
  data() {
    return {
      loading: false,
      finished: false,
      appList: [], // 用車申請列表
      appQuery: {
        page: '1', // 要查詢的頁碼
        rows: '10', // 每頁記錄數(shù)量
        userId: null, // 用戶 Id
      }
    };
  },
  methods: {
    async onLoad() {
      // 異步更新數(shù)據(jù)
      let ret = await getAppList(this.appQuery)
      const { code, data } = ret
      if (code == 200) {
        this.appList = this.appList.concat(data.rows)
        // 加載狀態(tài)結(jié)束
        this.loading = false;
        if (this.appList.length >= data.total) {
          // 沒有更多數(shù)據(jù)了
          this.finished = true;
          Notify({
            message: '已加載完全部訂單'，
            background: '#ee0a24'
          })
        } else {
          this.appQuery.page++
        }
      }
    },
  },
};

以上是正常情況下， onLoad 滾動到底部可以正常觸發(fā)加載下一頁數(shù)據(jù)

接下來就是說明一個不正常使用情況，此 bug 組件庫還未修復(fù)

就是和 Tab 標(biāo)簽頁組件公用：

我猜估計是包裹內(nèi)容的高度它無法斷定了吧，所以 onLoad 加載就有問題了

Tab 標(biāo)簽頁

<van-tabs v-model="active">
  <van-tab title="標(biāo)簽 1">
    <ApprovalItem type='1' />
  </van-tab>
  <van-tab title="標(biāo)簽 2">
    <ApprovalItem type='2' />
  </van-tab>
  <van-tab title="標(biāo)簽 3">
    <ApprovalItem type='3' />
  </van-tab>
  <van-tab title="標(biāo)簽 4">
    <ApprovalItem type='4' />
  </van-tab>
</van-tabs>
 
data() {
  return {
    active: 2,
  };
},

主要注意點就是子組件的高度需要設(shè)置一下，

一開始嘗試的給 ApprovalItem 子組件一個高度 height：100% ，

但并沒有解決一直觸發(fā) onLoad 加載的問題，

后來改成 height：100vh ，就 OK 了。。

沒別的了，就是記錄一下，提醒避坑。