连接地址:https://ext.dcloud.net.cn/plugin?id=2453
使用说明(目前版本为全页面,需要自己搭配弹窗插件使用)
组件日期目前是当前日期后7天,后续可更新为自定义周期,也可以自己修改
名称 | 变量 | 类型 | 使用说明 |
---|---|---|---|
取消按钮 | @showClose | String | 取消按钮回调方法设置 |
确定按钮 | @showTime | String | 确定按钮回调方法设置 |
日期选择 | @checkDate | String | 日期选择后回调方法设置 |
时间定义 | :date | Object | 传入时间对象,格式看下面代码 |
date参数 | id | Number | - |
date参数 | startTime | String | 显示时间 |
date参数 | isCan | Number | 0能够选择,1,不能选择,2,自己预约,3,他人预约,4,禁选时段 5,选择中 |
使用说明:
import nxTimePicker from '@/components/nx-time-picker/nx-time-picker.vue';
components:{
nxTimePicker,
},
引用:
<nx-time-picker :date="date" @showClose="showClose" @showTime="showTime" @checkDate="checkDate" ></nx-time-picker>
方法:
data() {
return {
date:[
{
id:1,
startTime:"8:00",
isCan:0
},
{
id:2,
startTime:"8:30",
isCan:0
}
],
date1:[
{
id:1,
startTime:"9:00",
isCan:0
},
{
id:2,
startTime:"9:30",
isCan:0
}
],
date2:[
{
id:1,
startTime:"10:00",
isCan:0
},
{
id:2,
startTime:"10:30",
isCan:0
}
]
};
},
methods:{
showClose(){
console.log("点击了取消")
},
showTime(obj){
console.log("点击了确定")
console.log(obj)
},
checkDate(date){
console.log("选择了日期")
console.log(date)
this.date = this.date1
}
}
第一次提交组件,都是自己写自己用,有问题和需求可以留言或者联系我(QQ:1164048272)