weex 选择器 weex picker weex-x-picker

weex-x-picker

weex-x-picker 支持 single(单选)，area(区域)，section(区间)，date(日期)，time(时间), linkage(联动)。

weex-x-picker 基于 alibaba 的weex-ui中的wxc-popup，wxc-overlay 组件开发， 感谢weex-ui的开发团队辛苦开源weex-ui。

x-picker

用于选择器，包括单选，选择区间，时间，日期，区域等。

安装

npm add weex-x-picker

使用方法

<template>
  <div class="wrapper">
    <text @click="openPicker">打开picker</text>

    <x-picker :type="pickerType"
              :show="showPicker"
              :dataset="list"
              :defaultTitle="defaultTitle"
              @overlayClick="pickerOverlayClick"
              @onchange="change" />
  </div>
</template>

<script>

  import { XPicker } from 'weex-x-picker';

  export default {
    components: { XPicker },
    data: () => ({

      pickerType: 'single',

      showPicker: false,

      list: [
        { title: '金星' },
        { title: '木星' },
        { title: '水星' },
        { title: '火星' },
        { title: '地球' },
        { title: '天王星' },
        { title: '海王星' },
        { title: '冥王星' },
        { title: '哈雷彗星' },
      ],

      defaultTitle : '地球'

    }),
    methods: {
      openPicker () {
        this.showPicker = true;
      },
      pickerOverlayClick (e) {
        this.showPicker = false;
      },
      change (e) {
        console.log(e)
      }
    }
  }

</script>

<style scoped>

  .wrapper {
    padding-top: 100px;
  }

</style>

可配置参数

Prop	Type	Required	Default	Desc