mint-ui之picker爬坑記

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

什么是picker

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

怎么用picker

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

// 引入 一般在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)
    }
  }
}

幾個注意點

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

處理之后的代碼

   // 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，因為此時大牛或許在拯救世界壓根沒空解答如此"低級趣味"的問題。茫茫前端路無絕期，后會有期！

什么是picker

怎么用picker

幾個注意點

處理之后的代碼

參考鏈接

后記

免責聲明！