参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
show | 是否显示,支持sync | Boolean | —— | false |
title | 标题 | string | —— | —— |
confirmBtn | 确认按钮 | string/object | —— | 确定 |
closeBtn | 取消按钮 | string/object | —— | 取消 |
value | select选中值 | Object, String, Number | —— | —— |
listData | select列表值格式{label:‘xxx’,value:xxx},如果是多列,是二维数据格式 | Array | —— | [] |
multi | 是否是多列 | Boolean | —— | false |
事件名称 | 说明 | 回调参数 |
---|---|---|
confirm | 点击确定回调 | —— |
cancel | 点击取消回调 | —— |
closed | 消失动画结束回调 | —— |
change | 切换选取值回调,在上下滚动切换时生效 | —— |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <template> <div class = "actionDialog" > <p @click = "onShow" style= "font-size:20px" >点我</p> <p >value: {{value}}</p> <select-picker title= "自定义标题" closeBtn= "取消按钮" confirmBtn= "下一步" :show.sync= "show" :listData= "listData" :value.sync= "value" @change = "onChange" @confirm = "onConfirm" @close = "onClose" @closed = "onClosed" > </select-picker> </div> </template> <script> import { SelectPicker } from "genie-ui" ; export default { components: { SelectPicker }, data() { return { show: true , listData: Array.from( { length: 30 }, (value, index) => "customValue" + index ).map((val, index) => { return { label: val, value: index }; }), value: 1 }; }, methods: { onChange(val) { console.log( "onChange" , val); }, onShow() { console.log( "onShow" ); this .show = true ; }, onConfirm() { console.log( "confirm" ); }, onClose() { console.log( "close" ); }, onClosed() { console.log( "closed" ); } }, mounted() {} }; </script> |