注意：以下文档只适用于TOP接口，请谨慎使用！
注意：以下文档只适用于TOP接口，请谨慎使用！
1.始终有效选项与其他日期选项互斥，一旦选择会清空其他选项，并将其设置为disable不可选。
2.注意始终有效 完全不等于 “全选”！
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | string | 否 | ’’ | 标题 |
| alwaysText | string | 否 | 始终有效 | 始终有效选项的显示文案 |
| show | boolean | 是 | false | 弹窗显示状态 |
| initValue | number[] | 否 | [] | 初始化已选中的值，0-6分别表示周日至周六 |
| confirmBtn | string | 否 | 确定 | 确定操作文案 |
| cancelBtn | string | 否 | 取消 | 取消操作文案 |
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| update:show | 更新弹窗显示状态 | (show: boolean) |
| confirm | 确认选择日期 | (days: number[]) |
| confirm-always | 确认选择始终有效 | 无 |
| cancel | 取消 | 无 |
<template>
<div class="day-picker">
<span @click="onShow">开始选择日期（星期日）</span>
<p>已选择数据：{{isSelectAlways ? '始终有效' : days}}</p>
<iot-day-picker
title="选择有效周期"
alwaysText="始终有效"
:show.sync="show"
:initValue="days"
@confirm="onConfirm"
@confirm-always="onConfirmAlways"
@cancel="onCancel"
>
</iot-day-picker>
</div>
</template>
<script>
import { IotDayPicker } from 'genie-ui'
export default {
components: {
IotDayPicker,
},
data() {
return {
// 是否显示选择器
show: false,
// 是否始终有效
isSelectAlways: false,
// 初始默认选中日期
days: [1],
}
},
methods: {
onShow() {
console.log('show day picker')
this.show = true
},
onConfirm(selectedDays) {
console.log('on confirm select day', selectedDays)
this.days = selectedDays
this.isSelectAlways = false
},
onConfirmAlways() {
console.log('on confirm select always')
this.days = []
this.isSelectAlways = true
},
onCancel() {
console.log('on cancel select day')
},
}
}
</script>
<style scoped>
.del {
height: 100%;
width: 50px;
background: #f00;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
