mint-ui之picker爬坑記 - JavaShuo

picker的數據來源爲動態獲取時，數據沒法正常渲染！由於方法不對，因此坑大了！深入地體會到'業不精,我之過',謹以此文，深入地記錄一下踩坑及爬坑的整個過程，以便往後再也不入坑，也給後來者提供一下參考

什麼是picker

是mint-ui中的一個選擇器組件，支持多 slot 聯動。結合popup能夠實現下拉菜單彈層化，如圖：
前端

怎麼用picker

這裏不具體表述，mint-ui文檔和源碼案例說得都很詳細，這裏詳細說下此次遇到的問題vue

// 引入 通常在main.js中全局引用並use,也能夠局部引用如:import { Picker } from 'mint-ui'
import MintUI from 'mint-ui'
Vue.use(MintUI)

// template部分，結合popup
 <div class="select" @click="popupVisible = true" >
   <mt-cell title="選擇分類" is-link>
       <span>{{currentTags?currentTags.cName: '請選擇分類'}}</span>
   </mt-cell>
 </div>
<mt-popup v-model="popupVisible" position="bottom" class="mint-popup">
// 此處slots爲動態傳入的值，經過computed來處理，數據經過vuex管理，因爲數據爲對象數組，需設置 value-key 屬性來指定顯示的字段名
  <mt-picker :slots="dataList" @change="onDateChange" :visible-item-count="5" :show-toolbar="false"  ref="picker" value-key="cName"></mt-picker>
</mt-popup>

// script
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'myshow',
  data () {
    return {
      popupVisible: false,
      dateSlots: [ // 當slots這樣定義時，由於tagList是經過api異步請求的，沒法正常渲染，出現下圖空白
       /* {
          flex: 1,
          values: this.$store.state.tagList,
          className: 'slot1',
          textAlign: 'center'
        } */
      ],
      currentTags: {}
    }
  },
  created () {
    this.$store.dispatch('getTags') // 數據需在create生命週期中設定，不然picker中沒法獲取
  },
  computed: {
    ...mapState([
      'tagList'
    ]),
    dataList () {
      let dateSlots = [
        {
          flex: 1,
          values: this.tagList,
          className: 'slot1',
          textAlign: 'center'
        }
      ];
      return  dateSlots
    }
  },
  methods: {
    ...mapMutations([
      'GET_TAGS'
    ]),
    onDateChange (picker, values) {
      console.log(picker)
      console.log(values)
    }
  }
}

幾個注意點

一、官方文檔中說明的"對應 slot 的備選值數組若爲對象數組，則需在 mt-picker 標籤上設置 value-key 屬性來指定顯示的字段名",
二、picker的slot動態數據的問題，在create生命週期獲取值，經過computed處理值，直接綁定到組件上
三、上面代碼，onchange事件會自動執行，以下圖，處理方案：掉onchange事件，在mint-picker中設置showToolbar添加確認按鈕，給按鈕加事件，具體可參考#取消onchange自動執行git

處理以後的代碼

   // picker去掉onchange事件監聽，設置show-toolbar
  <mt-picker :slots="dataList"  :visible-item-count="5" :show-toolbar="true"  ref="picker" value-key="cName">
         <mt-button @click="handleConfirm" class="sure">確認</mt-button>
  </mt-picker>
  // methods中去掉onDateChange，新增handleConfirm處理當前選中和取消popup模態框
  handleConfirm () {
      this.currentTags = this.$refs.picker.getValues()[0]
      this.popupVisible = false
}

參考連接

後記

此猿水平有限，歡迎拍磚指正！
做爲入門級菜逼，我感受遇到問題第一時間google一下或者直接翻github的issue，由於此時大牛或許在拯救世界壓根沒空解答如此"低級趣味"的問題。茫茫前端路無絕期，後會有期！github