vux 實現多欄滾動

1.PopupPicker 組件

<!-- vux-ui -->
<template>
  <div>
    <!-- 標題欄 -->
    <x-header title="vux-ui"></x-header>
    <!-- 內容部分 -->
    <group>
      <x-input :placeholder="'標題'"></x-input>
      <x-textarea :value="content" :max="200" name="description" :placeholder="'提示'"></x-textarea>
    </group>
    <!-- 兩欄滾動 -->
    <divider>兩欄滾動</divider>
    <popup-picker :title="title2" :data="list2" :columns="2" v-model="value2" @on-change="onChangeValue2" show-name></popup-picker>
    <!-- 三欄滾動 -->
    <divider>三欄滾動</divider>
    <popup-picker :title="title3" :data="list3" :columns="3" v-model="value3" @on-change="onChangeValue3" show-name></popup-picker>
  </div>
</template>

<script>
  import { XHeader, Group, XInput, XTextarea, Divider, PopupPicker } from 'vux'

  export default {
    name: 'VuxUI',
    components: {
      XHeader,
      Group,
      XInput,
      XTextarea,
      Divider,
      PopupPicker,
    },
    data(){
      return {
        content:'使用vux,須要配置webpack.base.conf.js文件',
        // 兩欄滾動
        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: [],
        // 三欄滾動
        title3: '聯動顯示文字',
        list3: [{
          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'
        }, {
          name: '廣州',
          value: 'gz',
          parent: 'china001'
        }, {
          name: '深圳',
          value: 'sz',
          parent: 'china001'
        }, {
          name: '廣西001',
          value: 'gx001',
          parent: 'china002'
        }, {
          name: '廣西002',
          value: 'gx002',
          parent: 'china002'
        }, {
          name: '美國001_001',
          value: '0003',
          parent: 'usa001'
        }, {
          name: '美國001_002',
          value: '0004',
          parent: 'usa001'
        }, {
          name: '美國002_001',
          value: '0005',
          parent: 'usa002'
        }, {
          name: '美國002_002',
          value: '0006',
          parent: 'usa002'
        }],
        value3: []
      }
    },
    methods: {
      onChangeValue2(val){
        console.log(val);
      },
      onChangeValue3(val){
        console.log(val);
      }
    }
  }
</script>

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

2.效果圖

 

.