基于elementui 封装周选择范围组件

最新推荐文章于 2024-09-25 16:49:01 发布

Kill_paradise

最新推荐文章于 2024-09-25 16:49:01 发布

阅读量1.6k

点赞数 1

分类专栏： js 文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/Kill_paradise/article/details/122236206

版权

js 专栏收录该内容

37 篇文章

订阅专栏

这篇博客详细介绍了如何在Vue.js应用中创建一个周选择器组件，包括计算当前周数、设置默认值以及处理近n周的快捷选择。通过监听`value1`和`value2`的变化，确保日期范围的正确性，并提供了自定义的日期格式化。此外，还实现了点击预设快捷选项更新日期范围的功能，如近1周、近4周和近12周。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template部分，这里的value1,value2的值为我们所选周的星期一，为格林尼治时间的格式； date1, date2为周选择器的value对应的日期，date1取当周的星期一(起始日期)，date2取当周的星期日(结束日期)，weekNum为周数

computed: {
weekNum() {
return Math.round((this.value2 - this.value1) / (24 * 60 * 60 * 1000 * 7)) + 1
},
},

data() {
return {
value1: null,
value2: null,
date1: '',
date2: '',

pickerOptions: {
firstDayOfWeek: 1,
disabledDate: (time) => this.getDisabledDate(time, 'start'),
shortcuts: [{
text: '近1周',
onClick: (picker) => {
this.onWeekChange(picker, 1)
}
}, {
text: '近4周',
onClick: (picker) => {
this.onWeekChange(picker, 4)
}
}, {
text: '近12周',
onClick: (picker) => {
this.onWeekChange(picker, 12)
}
}]
}
}
},

created里面来设置一个起始日期,这里将value设为了最近一周的周一,

created() {
this.value1 = this.value2 = moment().isoWeekday(-5).toDate()
},

watch: {
value1() {
if (!this.value1) return
if (this.value1 >= this.value2) { // 保证value2大于value1
this.value2 = this.value1
}
this.date1 = moment(this.value1.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
this.onValueChange() // 这里为我们希望value改变时触发的方法
},
value2() {
if (!this.value2) return
this.date2 = moment(this.value2.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
this.onValueChange()
},

}

methods: {
onWeekChange(picker, k) { // 选中近k周后触发的操作
this.value1 = moment().isoWeekday(-(5 + (k - 1) * 7)).toDate()
this.value2 = moment().isoWeekday(-5).toDate() //value2与k值无关，因为它总是为最近一周的周一
this.$forceUpdate() // 这里如果不强制更新视图，会出现value值改变而视图中的第几周和日期无变化的情况
},
}