- 因為日期選擇器使用的地方較多,放在 mixins 里面使用比較方便;
- 正常日期范圍也一樣,就是把數據放出來即可;
// rangeDate.js
import moment from 'moment'
const rangeDate = {
data() {
return {
ranges: {
'昨天': [moment().day(moment().day() - 1), moment().day(moment().day() - 1)],
'今天': [moment(), moment()],
'上周': [moment().week(moment().week() - 1).startOf('week'), moment().week(moment().week() - 1).endOf('week')],
'本周': [moment().weekday(0), moment().weekday(6)],
'上月': [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
'本月': [moment().startOf('month'), moment().endOf('month')],
'上季度': [moment().quarter(moment().quarter() - 1).startOf('quarter'), moment().quarter(moment().quarter() - 1).endOf('quarter')],
'本季度': [moment().startOf('quarter'), moment().endOf('quarter')],
'去年': [moment().year(moment().year() - 1).startOf('year'), moment().year(moment().year() - 1).endOf('year')],
}
}
},
metheds: { moment }
}
export { rangeDate }
// 日期范圍組件中
<template>
<a-range-picker @change="dateChange" :value="[queryParam.start,queryParam.end]" :ranges="ranges" valueFormat="YYYY-MM-DD" />
</template>
<script>
import { rangeDate } from '../littleMixin/rangeDate'
export default {
mixins: [ rangeDate ],
data () {
return {
queryParam: {
start: '2021-11-01',
end: '2021-11-30'
},
}
},
methods: {
dateChange (val) {
this.queryParam.start = val[0];
this.queryParam.end = val[1];
},
}
}
</script>
vue Ant Design Select 選擇框輸入搜索已有數據 mixin
vue + Ant Design 表格多選 mixin
中文按拼音首字母排序
數組方法
兩個數組中相同元素、大數組中不包含小數組部分、一行代碼數組去重
element 在表格中使用表單校驗
element-ui Upload 自定義上傳 loading
vue 中父子組件通信 js 引用的作用
Vue組件通信—provide/inject