dm-vue-picker-h5 v1.0.3

vue-picker-h5

基于vue-awesome-picker修改
依赖 better-scroll

属性

textTitle 标题
data 数据源
name 唯一标记(用于一个picker动态绑定不同数据时候,Confirm事件来区分来源数据)
picker-class 自定义class
anchor 默认选中值

事件

事件名：change
事件返回值：见下方代码

事件名：confirm
事件返回值：见下方代码

cancel
事件返回值：无

代码

<picker
        ref="picker"
        :textTitle="picker.title"
        :data="picker.data"
        :name="picker.name"
        :picker-class="picker.pickerClass"
        :anchor="picker.anchor"
        @change="handlePickerChange"
        @confirm="handlePickerConfirm">
</picker>

{
    data: () => {
        return {
            data1: [
                {
                    value:'1',
                    text:'test1'
                },
                {
                    value:'2',
                    text:'test2'
                },
                {
                    value:'3',
                    text:'test3'
                }
            ],
            data2: [
                {
                    value:'1',
                    text:'test1',
                    strong:'string1',
                    children:[
                        value:'1',
                        text:'test1'
                    ]
                },
                {
                    value:'2',
                    text:'test2',
                    strong:'string2',
                    children:[
                        value:'2',
                        text:'test2'
                    ]
                },
                {
                    value:'3',
                    text:'test3',
                    strong:'string3',
                    children:[
                        value:'3',
                        text:'test3'
                    ]
                }
            ],
            picker: {
                title: '',
                data:[],
                name:'',
                pickerClass:'',
                anchor:[]
            }
        }
    },
    methods: {
        showPickerData1() {
            this.picker.data = this.data1;
            this.picker.anchor = [1]
            this.picker.name = "data1";
            this.$refs.picker.show()
        },
        showPickerData2() {
            this.picker.data = this.data2;
            this.picker.anchor = [1,1]
            this.picker.name = "data2";
            this.$refs.picker.show()
        },
        handlePickerChange(column, line, name) {
            if(name == "data1") {
                console.log(column)//选中的列的索引
                console.log(line)//选中的行的索引
            }
            if(name == "data2") {
                console.log(column)//选中的列的索引
                console.log(line)//选中的行的索引
            }
        },
        handlePickerConfirm(value,column,text,strong,name) {
            console.log(value)//选中的条目的value
            console.log(column)//选中的列的索引
            console.log(text)//选中的条目的text
            console.log(strong)//选中的条目的strong
            
        }
    }
}