mpvue之mpvue-picker级联组件使用

单列：
多列:
级联：
<template>
  <div class="address-list">
    <div class="mpvue-picer">
      <button @click="showPicker">test for mpvuePicker</button>
      <mpvue-picker
        ref="mpvuePicker"
        :mode="mode"
        :pickerValueDefault="pickerValueDefault"
        @onChange="onChange"
        @onConfirm="onConfirm"
        @onCancel="onCancel"
        :pickerValueArray="pickerValueArray" />

      <mpvue-picker
        :mode="mode2"
        :deepLength="deepLength2"
        ref="mpvuePicker2"
        :pickerValueArray="mulLinkageTwoPicker2"
        :pickerValueDefault="pickerValueDefault2"
        @onConfirm="onConfirm"></mpvue-picker>

      <mpvue-picker
        :mode="mode3"
        :deepLength="deepLength3"
        ref="mpvuePicker3"
        :pickerValueArray="mulLinkageTwoPicker3"
        :pickerValueDefault="pickerValueDefault3"
        @onConfirm="onConfirm"></mpvue-picker>
    </div>
  </div>
</template>

<script>
// import { formatTime } from '@/utils/index'
import mpvuePicker from 'mpvue-picker'

export default {
  components: {
    mpvuePicker
  },

  data () {
    return {
      mode: 'selector',
      pickerValueArray: [
        {
          label: '住宿费',
          value: 1
        },
        {
          label: '活动费',
          value: 2
        },
        {
          label: '通讯费',
          value: 3
        },
        {
          label: '补助',
          value: 4
        }
      ],
      pickerValueDefault: [3],

      mode2: 'multiSelector',
      deepLength2: 1,
      mulLinkageTwoPicker2: [
        [
          {
            label: '火车',
            value: 10
          },
          {
            label: '飞机',
            value: 12
          }
        ],
        [
          {
            label: '火车2',
            value: 13
          },
          {
            label: '飞机2',
            value: 14
          }
        ]
      ],
      pickerValueDefault2: [1, 0],

      mode3: 'multiLinkageSelector',
      deepLength3: 3,
      mulLinkageTwoPicker3: [
        {
          label: '火车',
          value: 10,
          children: [
            {
              label: '火车1',
              value: 11,
              children: [
                {
                  label: '火车2',
                  value: 12,
                  children: []
                },
                {
                  label: '火车3',
                  value: 13,
                  children: []
                }
              ]
            }
          ]
        },
        {
          label: '火车20',
          value: 210,
          children: [
            {
              label: '火车21',
              value: 211,
              children: [
                {
                  label: '火车22',
                  value: 212,
                  children: []
                },
                {
                  label: '火车23',
                  value: 213,
                  children: []
                }
              ]
            }
          ]
        }
      ],
      pickerValueDefault3: [1, 0, 1]
    }
  },
  computed: {
    categoryId () {
      return this.$mp.query.id
    }
  },
  methods: {
    showPicker () {
      // this.$refs.mpvuePicker.show()
      this.$refs.mpvuePicker2.show()
      // this.$refs.mpvuePicker3.show()
    },
    onConfirm (e) {
      console.log(e)
    },
    onChange (e) {
      console.log(e)
    },
    onCancel (e) {
      console.log(e)
    },
    init () {
    }
  },

  created () {
  },
  mounted () {
    this.init()
    this.showPicker()
  }

}
</script>

<style lang="less">
</style>