基於 mpvue 框架的小程序選擇組件，支持單列，多列，級聯

時間 2019-11-21

標籤基於 mpvue 框架程序選擇組件支持單列多列級聯简体版

原文原文鏈接

mpvue-picker

前言

在 mpvue開源之初寫了用 vue 寫小程序，基於 mpvue 框架重寫 weui。當時用的是小程序的原生組件，沒有對其進行封裝和組件化。而對於如今的前端開發環境，組件化，模塊化，工程化以及自動化已是一種標配。而mpvue框架又提供了一個很好的組件化開發平臺，所以就對小程序中的 picker 組件進行封裝，使其在用mpvue開發的時候可以用快速的實現 picker的功能。javascript

爲何封裝 `picker` 組件

其實小程序提供了原生的 picker 組件，可是在開發的時候會發如今 android 手機上看到的 picker效果與微信開發者工具預覽的效果不同，其實就是醜了一點點...
在小程序中使用 picker 的地方不少，很常見。

使用

安裝

npm install mpvue-picker --save 或者 cnpm install mpvue-picker --save
複製代碼

在頁面中使用

<template>
  <div class="mpvue-picer"> <button @click="showPicker">test for mpvuePicker</button> <mpvue-picker ref="mpvuePicker" :pickerValueArray="pickerValueArray" :pickerValueDefault='pickerValueDefault' @pickerConfirm="pickerConfirm"></mpvue-picker> </div> </template>

<script>
import mpvuePicker from 'mpvue-picker';
export default {
  components: {
    mpvuePicker
  },
  data() {
    return {
      pickerValueArray: ['住宿費', '禮品費', '活動費', '通信費', '補助'],
      pickerValueDefault: [1]
    };
  },
  methods: {
    showPicker() {
      this.$refs.mpvuePicker.show();
    },
    pickerConfirm(e) {
      console.log(e);
    }
  }
};
</script>

<style>
</style>

複製代碼

初始化

在父組件中調用 mpvuePicker 實例中的 show 方法便可。前端

參數說明

mode

說明：picker 組件類型
類型：String
可選值：
- selector（單列）
- multiSelector（多列）
- multiLinkageSelector（級聯）
是否必填：否
默認值：selector

pickerValueArray

說明：picker 渲染數據
類型：Array
可選值：-
是否必填：是
默認值：-

pickerValueDefault

說明：picker 默認選中值
類型：Array
可選值：-
是否必填：否
默認值：[]

deepLength

說明：幾級聯動
類型：Number
可選值：
- 2
- 3
是否必填：否
默認值：2

onChange

說明：picer 組件滾動時回調，返回選中的數組索引
類型：EventHandle
可選值：-
是否必填：否
默認值：-

onConfirm

說明：picer 組件點擊肯定時回調，返回選中的數組索引
類型：EventHandle
可選值：-
是否必填：否
默認值：-

效果

相關數據結構說明

單列

pickerValueArray: ['住宿費', '禮品費', '活動費', '通信費', '補助']
複製代碼

多列

pickerValueArray: [
  ['中國', '美國', '日本', '俄羅斯'],
  ['茶', '咖啡', '壽司', '奶酪'],
  ['殲20', 'F22', '秋月級', 'T50']
]
複製代碼

點擊展開二級聯動數據結構

pickerValueArray:
[
  {
    label: '飛機票',
    value: 0,
    children: [{
      label: '經濟艙',
      value: 1
    },
    {
      label: '商務艙',
      value: 2
    }
    ]
  },
  {
    label: '火車票',
    value: 1,
    children: [{
      label: '臥鋪',
      value: 1
    },
    {
      label: '坐票',
      value: 2
    },
    {
      label: '站票',
      value: 3
    }
    ]
  },
  {
    label: '汽車票',
    value: 3,
    children: [{
      label: '快班',
      value: 1
    },
    {
      label: '普通',
      value: 2
    }
    ]
  }
]
複製代碼

點擊展開三級聯動數據結構

pickerValueArray:
[
  {
    label: 'phone',
    value: 0,
    children: [
      {
        label: 'iphone',
        value: 1,
        children: [{
          label: 'iphoneX',
          value: 1
        },
        {
          label: 'iphone8',
          value: 2
        }, {
          label: 'iphone8 Plus',
          value: 3
        }]
      },
      {
        label: 'android',
        value: 1,
        children: [
          {
            label: 'vivo',
            value: 1
          },
          {
            label: '魅族',
            value: 2
          }, {
            label: '小米',
            value: 3
          }
        ]
      }
    ]
  },
  {
    label: 'PC',
    value: 0,
    children: [
      {
        label: 'mac',
        value: 1,
        children: [
          {
            label: 'macbook Pro',
            value: 1
          },
          {
            label: 'iMac',
            value: 2
          }, {
            label: 'mackbook',
            value: 3
          }, {
            label: 'mackbook air',
            value: 3
          }
        ]
      },
      {
        label: 'windows',
        value: 1,
        children: [
          {
            label: 'dell',
            value: 1
          },
          {
            label: 'surface',
            value: 2
          }, {
            label: 'thinkpad',
            value: 3
          }
        ]
      }
    ]
  }
]
複製代碼