欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 真機(jī)上測試的時候 出現(xiàn)的一個小 bug :

點擊 Field 輸入框 的時候 , 第一次會 彈出 一個 手機(jī)的鍵盤輸入框

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

解決方案 : 

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

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

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

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

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

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 真機(jī) 上測試的時候 出現(xiàn)的一個小 bug :

點擊 Field 輸入框 的時候 , 第一次會 彈出 一個 手機(jī)的鍵盤輸入框 ,

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

解決方案 : 

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

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

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

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

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

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
    },
  },
};

補(bǔ)充知識 :

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 了 。。

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

總結(jié)

到此這篇關(guān)于Vant2移動端Vue組件庫問題記錄的文章就介紹到這了,更多相關(guān)Vant2移動端Vue組件庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue $set 實現(xiàn)給數(shù)組集合對象賦值

    vue $set 實現(xiàn)給數(shù)組集合對象賦值

    這篇文章主要介紹了vue $set 實現(xiàn)給數(shù)組集合對象賦值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-07-07
  • Vue動態(tài)樣式方法實例總結(jié)

    Vue動態(tài)樣式方法實例總結(jié)

    在vue項目中,很多場景要求我們動態(tài)改變元素的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)樣式方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • layui實際項目使用過程中遇到的兼容性問題及解決

    layui實際項目使用過程中遇到的兼容性問題及解決

    這篇文章主要介紹了layui實際項目使用過程中遇到的兼容性問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • 淺談nuxtjs校驗登錄中間件和混入(mixin)

    淺談nuxtjs校驗登錄中間件和混入(mixin)

    這篇文章主要介紹了淺談nuxtjs校驗登錄中間件和混入(mixin),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn)

    vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn)

    這篇文章主要介紹了vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn),圖片回顯時隱藏上傳區(qū)域,鼠標(biāo)懸浮顯示遮罩層進(jìn)行編輯、刪除操作,刪除圖片后顯示上傳區(qū)域,本文通過實例代碼分享實現(xiàn)方法,感興趣的朋友一起看看吧
    2023-12-12
  • vue組件Prop傳遞數(shù)據(jù)的實現(xiàn)示例

    vue組件Prop傳遞數(shù)據(jù)的實現(xiàn)示例

    本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法

    在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法

    由于路由中存在不需要遍歷的數(shù)據(jù)所以像用v-if來過濾,但是報錯,百度說vue不能同時使用v-if和v-for,今天小編給大家分享解決方式,感興趣的朋友跟隨小編一起看看吧
    2023-07-07
  • vue.js入門(3)——詳解組件通信

    vue.js入門(3)——詳解組件通信

    這篇文章主要介紹了vue.js入門(3)——詳解組件通信 ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。
    2016-12-12
  • vue使用csp的簡單示例

    vue使用csp的簡單示例

    Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue被設(shè)計為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue使用csp的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • 關(guān)于vxe-table復(fù)選框翻頁選中問題及解決

    關(guān)于vxe-table復(fù)選框翻頁選中問題及解決

    這篇文章主要介紹了關(guān)于vxe-table復(fù)選框翻頁選中問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論