vw布局下的picker组件(依赖vue-awesome-swiper)
- 使用swiper组件实现滚动(npm install vue-awesome-swiper --save)
- 监听options,如传入options,则显示picker(options为String数组或对象数组,对象格式{text: '文字', value: '值'})
- origin表示多个选项框在同一页面时的来源
- 监听父组件自定义的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';
}
},
}