Skip to content

Commit 8b6a887

Browse files
kouchaokouchao
committed
feat: 新增 年选择器,月选择器
1 parent addb52c commit 8b6a887

File tree

9 files changed

+224
-117
lines changed

9 files changed

+224
-117
lines changed

‎src/assets/vue-layui.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,10 @@ li {
5858
list-style: none
5959
}
6060

61+
/* 日期选择器 月份内容覆盖 */
62+
.layui-laydate-list {
63+
position: unset !important;
64+
padding: 0 !important;
65+
}
66+
6167

‎src/components/date-picker/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
### 开发计划
44
- [x] 日期选择器
5-
- [ ] 年选择器
6-
- [ ] 年月选择器
5+
- [x] 年选择器
6+
- [x] 年月选择器
77
- [ ] 自定义日期格式
88
- [ ] 公历节日
99
- [ ] 自定义重要日子

‎src/components/date-picker/src/content/index.vue renamed to ‎src/components/date-picker/src/content/date-table.vue

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
'laydate-day-next': date.month > month,
2626
'layui-this': isday(date)
2727
}"
28-
@click="emitChange(date)"
28+
@click="emitChange(date.day, date.month)"
2929
>
3030
{{ date.day }}
3131
</td>
@@ -133,12 +133,11 @@ export default {
133133
isPrev (date) {
134134
return date.month < this.month || date.year < this.year;
135135
},
136-
emitChange (date) {
137-
this.$emit('change', {
138-
year: date.year,
139-
month: date.month,
140-
day: date.day
141-
});
136+
emitChange (day, month) {
137+
if (month != this.month) {
138+
return false;
139+
}
140+
this.$emit('change', day);
142141
}
143142
}
144143
};

‎src/components/date-picker/src/content/month-table.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div class="layui-laydate-content">
3+
<ul class="layui-laydate-list laydate-month-list">
4+
<li
5+
v-for="(monthCn, _month) in months"
6+
:key="_month"
7+
:class="{
8+
'layui-this': month == _month
9+
}"
10+
@click="emitChange(_month)"
11+
>
12+
{{ monthCn }}
13+
</li>
14+
</ul>
15+
</div>
16+
</template>
17+
<script>
18+
19+
const MONTH_CN = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
20+
export default {
21+
name: 'MonthContent',
22+
props: {
23+
month: {
24+
type: Number,
25+
required: true
26+
}
27+
},
28+
data () {
29+
return {
30+
months: MONTH_CN
31+
};
32+
},
33+
methods: {
34+
emitChange (month) {
35+
this.$emit('change', month);
36+
}
37+
}
38+
};
39+
</script>

‎src/components/date-picker/src/content/year-table.vue

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class="layui-laydate-content">
3+
<ul class="layui-laydate-list laydate-year-list">
4+
<li
5+
v-for="_year in years"
6+
:key="_year"
7+
:class="{
8+
'layui-this': year == _year
9+
}"
10+
@click="emitChange(_year)"
11+
>
12+
{{ _year }}年
13+
</li>
14+
</ul>
15+
</div>
16+
</template>
17+
<script>
18+
19+
export default {
20+
name: 'MonthContent',
21+
props: {
22+
year: {
23+
type: Number,
24+
required: true
25+
}
26+
},
27+
data () {
28+
return {
29+
years: []
30+
};
31+
},
32+
watch: {
33+
year () {
34+
this.updateYear();
35+
}
36+
},
37+
mounted () {
38+
this.updateYear();
39+
},
40+
methods: {
41+
updateYear () {
42+
const _year = this.year;
43+
console.log(_year);
44+
const years = [];
45+
for (let year = _year - 7; year <= _year + 7; year++) {
46+
years.push(year);
47+
}
48+
this.years = years;
49+
console.log(this.years);
50+
},
51+
emitChange (year) {
52+
this.$emit('change', year);
53+
}
54+
}
55+
};
56+
</script>

‎src/components/date-picker/src/date-picker.vue

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div :class="$parent.block ? 'layui-input-block' : 'layui-input-inline'">
2+
<div :class="['lay-date-picker', $parent.block ? 'layui-input-block' : 'layui-input-inline']">
33
<input
44
ref="input"
55
:name="name"
@@ -10,8 +10,7 @@
1010
:class="{
1111
'layui-radio-disbaled layui-disabled': disabled
1212
}"
13-
@focus="handeleFocus"
14-
@blur="handeleBlur"
13+
@click="handeleFocus"
1514
@change="handleChange"
1615
>
1716
</div>
@@ -46,11 +45,12 @@ export default {
4645
},
4746
number: Boolean
4847
},
49-
data () {
50-
return {};
48+
destroyed () {
49+
this.handleHide();
5150
},
5251
methods: {
5352
handeleFocus () {
53+
document.addEventListener('click', this.handleHide);
5454
if (this.picker) {
5555
this.picker.showToast(() => {
5656
this.picker.$el.appendChild(this.main.$el);
@@ -63,15 +63,18 @@ export default {
6363
this.main.$mount();
6464
this.main.$on('change', this.emitChange);
6565
this.main.$on('close', () => {
66-
this.picker.show = false;
66+
this.handleHide();
6767
});
6868
6969
this.picker.showToast(() => {
7070
this.picker.$el.appendChild(this.main.$el);
7171
});
7272
},
73-
handeleBlur () {
74-
// this.picker.show = false;
73+
handleHide (e) {
74+
if (!e || !e.path.find(o => o.className && o.className.includes('lay-date-picker'))) {
75+
document.removeEventListener('click', this.handleHide);
76+
this.picker.show = false;
77+
}
7578
},
7679
handleChange () {
7780
if (!this.disabled) {

‎src/components/date-picker/src/header/index.vue

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,21 @@
55
@click="emitPrevYear"
66
></i>
77
<i
8+
v-if="type == 'date'"
89
class="layui-icon laydate-icon laydate-prev-m"
910
@click="emitPrevMonth"
1011
></i>
1112
<div class="laydate-set-ym">
1213
<span
13-
v-if="year"
1414
@click="emitSelectYear"
15-
>{{ year }}</span>
15+
>{{ type == 'year' ? `${year - 7}年 - ${year + 7}年` : `${year}年` }}</span>
1616
<span
17-
v-if="month"
17+
v-if="type == 'date'"
1818
@click="emitSelectMonth"
19-
>{{ month }}</span>
19+
>{{ month }}月</span>
2020
</div>
2121
<i
22+
v-if="type == 'date'"
2223
class="layui-icon laydate-icon laydate-next-m"
2324
@click="emitNextMonth"
2425
></i>
@@ -29,16 +30,29 @@
2930
</div>
3031
</template>
3132
<script>
33+
import { oneOf } from '@/utils/validatorProps';
34+
3235
export default {
3336
name: 'PickerHeader',
37+
model: {
38+
prop: 'type',
39+
event: 'change'
40+
},
3441
props: {
3542
year: {
36-
type: String,
37-
default: ''
43+
type: Number,
44+
default: 0
3845
},
3946
month: {
47+
type: Number,
48+
default: 0
49+
},
50+
type: {
4051
type: String,
41-
default: ''
52+
required: true,
53+
validator (value) {
54+
return oneOf('type', ['year', 'month', 'date'], value);
55+
}
4256
}
4357
},
4458
methods: {
@@ -55,10 +69,10 @@ export default {
5569
this.$emit('nextYear');
5670
},
5771
emitSelectMonth () {
58-
this.$emit('selectMonth');
72+
this.$emit('change', 'month');
5973
},
6074
emitSelectYear () {
61-
this.$emit('selectYear');
75+
this.$emit('change', 'year');
6276
}
6377
}
6478
};

0 commit comments

Comments
 (0)