vux picker

1.通过实验证明：

PopupPicker = TransferDom + Popup + PopupHeader + Picker

2.代码

Picker.vue

<!-- Picker 组件 -->
<template>
  <div>
    <!-- 标题栏 -->
    <x-header title="Picker组件"></x-header>
    <!-- 内容部分 -->
    <group>
      <x-textarea :value="content" :max="200" name="description" :placeholder="'提示'" readonly></x-textarea>
    </group>
    <!-- TransferDom + Popup + PopupHeader + Picker -->
    <divider>TransferDom + Popup + PopupHeader + Picker</divider>
    <x-switch title="底部弹窗" v-model="show1"></x-switch>

    <div v-transfer-dom>
      <popup v-model="show1">
        <popup-header
        left-text="取消"
        right-text="确认"
        title="请选择"
        :show-bottom-border="false"
        @on-click-left="show1 = false"
        @on-click-right="show1 = false">
        </popup-header>
        <picker :data='years' v-model='year1' @on-change='change'></picker>
      </popup>
    </div>
    <!-- PopupPicker -->
    <divider>PopupPicker</divider>
    <popup-picker :title="title2" :data="list2" :columns="2" v-model="value2" @on-change="onChangeValue2" show-name></popup-picker>
  </div>
</template>

<script>
  import { XHeader, Group, XTextarea, Divider, PopupPicker, TransferDom, Popup, PopupHeader, Picker, XSwitch } from 'vux'

  export default {
    name: 'picker',
    directives: {
      TransferDom
    },
    components: {
      XHeader,
      Group,
      XTextarea,
      Divider,
      PopupPicker,
      TransferDom,
      Popup,
      PopupHeader,
      Picker,
      XSwitch,
    },
    data(){
      return {
        content:'PopupPicker = TransferDom + Popup + PopupHeader + Picker',
        show1: false,
        years: [[1,2,3,4,5,6,7]],
        year1:[1],
        title2: '两栏滚动',
        list2: [{
          name: '中国',
          value: 'china',
          parent: 0
        }, {
          name: '美国',
          value: 'USA',
          parent: 0
        }, {
          name: '广东',
          value: 'china001',
          parent: 'china'
        }, {
          name: '广西',
          value: 'china002',
          parent: 'china'
        }, {
          name: '美国001',
          value: 'usa001',
          parent: 'USA'
        }, {
          name: '美国002',
          value: 'usa002',
          parent: 'USA'
        }],
        value2: []
      }
    },
    methods: {
      onChangeValue2(val){
        console.log(val);
      },
      change(val){
        console.log(val);
      }
    }
  }
</script>

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

3.效果图