天猫精灵IoT开放平台
SelectPicker 移动端选择框
更新时间：2019/01/29
访问次数：1489
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 |
Event
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| confirm | 点击确定回调 | —— |
| cancel | 点击取消回调 | —— |
| closed | 消失动画结束回调 | —— |
| change | 切换选取值回调，在上下滚动切换时生效 | —— |
使用示例
<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>
