picker_y

imitating ios picker

Usage no npm install needed!

<script type="module">
  import pickerY from 'https://cdn.skypack.dev/picker_y';
</script>

README

vw布局下的picker组件(依赖vue-awesome-swiper)

  1. 使用swiper组件实现滚动(npm install vue-awesome-swiper --save)
  2. 监听options,如传入options,则显示picker(options为String数组或对象数组,对象格式{text: '文字', value: '值'})
  3. origin表示多个选项框在同一页面时的来源
  4. 监听父组件自定义的confirm事件,返回pick值 注: confirm和cancel事件,方法最后一步要this.opitons=[];否则,ajax赋值的指针类型的数据,无法触发picker显示(options输入固定的情况,可以不加)
使用方法:(父组件中)
<template>
  <div>
    <div @click="selectCity" class="clearHighlight">选择城市</div> // selectCity中传入对应options
    <div @click="selectId" class="clearHighlight">选择身份</div>  // selectId中传入对应options

    <picker :options="options" :origin="origin" @confirm="confirm" @cancel="cancel"></picker>   // picker中绑定自定义事件confirm, 传入options, picker最好放在html元素层级最外层
  </div>
</template>
import picker from 'picker'

export default {
  data () {
    return {
      origin: '',
      options: []
    }
  },
  components: {
    picker
  },
  methods: {
    confirm (data, origin) {
      console.log(data);
      console.log(origin);
      // 清空opitons,避免第二次点击不显示组件
      this.options = [];
    },
    cancel () {
      this.options = [];
    },
    selectCity () {
      this.options = ['中国', '日本', '韩国', '美国', '英国', '泰国', '德国', '意大利', '阿根廷', '西班牙', '葡萄牙'];
      this.origin = 'city';
    },
    selectId () {
      this.options = [{text: '配偶', value: 0}, {text: '儿子', value: 1}, {text: '父亲', value: 2}, {text: '母亲', value: '3'}, {text: '女儿', value: '4'}];
      this.origin = 'id';
    }
  },
}