天猫精灵IoT开放平台
DayPicker 星期选择器
更新时间：2019/02/11
访问次数：1070
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | string | 否 | ’‘ | 标题 | | show | boolean | 是 | false | 弹窗显示状态 | | initValue | number[] | 否 | [] | 初始化已选中的值，0-6分别表示周日至周六 | | confirmBtn | string | 否 | ’确定’ |
确定操作文案 |
| cancelBtn | string | 否 | ‘取消’ | 取消操作文案 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| update:show | (show: boolean) | 更新弹窗显示状态 |
| confirm | (days: number[]) | 确认 |
| cancel | - | 取消 |
使用示例
<template>
<div class="day-picker">
<span @click="onShow">开始选择日期（星期日）</span>
<p >{{daysText}}</p>
<day-picker
title="选择日期"
:show.sync="show"
:initValue="days"
@confirm="onConfirm"
@cancel="onCancel"
>
</day-picker>
</div>
</template>
<script>
import Vue from "vue";
import { DayPicker } from "genie-ui";
export default {
components: {
DayPicker,
},
data() {
return {
// 是否显示选择器
show: false,
// 初始默认选中日期
days: [1],
}
},
computed: {
daysText() {
const defaultDays = [
{ key: 0, name: '周日' },
{ key: 1, name: '周一' },
{ key: 2, name: '周二' },
{ key: 3, name: '周三' },
{ key: 4, name: '周四' },
{ key: 5, name: '周五' },
{ key: 6, name: '周六' },
]
return this.days.map(key => {
const day = defaultDays.find(item => item.key === key)
return day ? day.name : ''
})
}
},
methods: {
onShow() {
console.log('show day picker')
this.show = true
},
onConfirm(selectedDays) {
console.log('on confirm pick day', selectedDays)
this.days = selectedDays
},
onCancel() {
console.log('on cancel pick day')
},
}
};
</script>
<style scoped>
.del {
height: 100%;
width: 50px;
background: #f00;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
