@ajaxjs/util 1.1.1 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/README.md +55 -6
  2. package/dist/index.esm.js +525 -0
  3. package/dist/index.umd.js +536 -0
  4. package/dist/{util → src/core}/cookies.d.ts +18 -18
  5. package/dist/{util → src/core}/dom.d.ts +17 -17
  6. package/dist/{util → src/core}/utils.d.ts +51 -51
  7. package/dist/{util → src/core}/xhr-config.d.ts +22 -22
  8. package/dist/{util → src/core}/xhr.d.ts +71 -71
  9. package/dist/src/index.d.ts +5 -0
  10. package/package.json +39 -43
  11. package/{dist/util/cookies.js → src/core/cookies.ts} +15 -18
  12. package/{dist/util/dom.js → src/core/dom.ts} +17 -14
  13. package/{dist/util/utils.js → src/core/utils.ts} +82 -77
  14. package/src/core/xhr-config.ts +25 -0
  15. package/{dist/util/xhr.js → src/core/xhr.ts} +128 -94
  16. package/src/index.ts +6 -0
  17. package/LICENSE +0 -201
  18. package/dist/index.d.ts +0 -38
  19. package/dist/index.js +0 -71
  20. package/dist/index.js.map +0 -1
  21. package/dist/main.d.ts +0 -1
  22. package/dist/main.js +0 -16
  23. package/dist/main.js.map +0 -1
  24. package/dist/router/index.d.ts +0 -3
  25. package/dist/router/index.js +0 -44
  26. package/dist/router/index.js.map +0 -1
  27. package/dist/router.d.ts +0 -3
  28. package/dist/router.js +0 -44
  29. package/dist/router.js.map +0 -1
  30. package/dist/shims-vue.d.ts +0 -4
  31. package/dist/style/common-functions.less +0 -294
  32. package/dist/style/reset.less +0 -19
  33. package/dist/util/cookies.js.map +0 -1
  34. package/dist/util/dom.js.map +0 -1
  35. package/dist/util/utils.js.map +0 -1
  36. package/dist/util/xhr-config.js +0 -3
  37. package/dist/util/xhr-config.js.map +0 -1
  38. package/dist/util/xhr.js.map +0 -1
  39. package/dist/widget/AccordionMenu.vue +0 -140
  40. package/dist/widget/AdjustFontSize.vue +0 -65
  41. package/dist/widget/Article.vue +0 -59
  42. package/dist/widget/EmptyContent.d.ts +0 -5
  43. package/dist/widget/EmptyContent.js +0 -7
  44. package/dist/widget/EmptyContent.js.map +0 -1
  45. package/dist/widget/Expander.vue +0 -65
  46. package/dist/widget/FileUploader/FileUploader.d.ts +0 -70
  47. package/dist/widget/FileUploader/FileUploader.js +0 -139
  48. package/dist/widget/FileUploader/FileUploader.js.map +0 -1
  49. package/dist/widget/FileUploader/FileUploader.less +0 -68
  50. package/dist/widget/FileUploader/FileUploader.ts +0 -156
  51. package/dist/widget/FileUploader/FileUploader.vue +0 -43
  52. package/dist/widget/HtmlEditor/HtmlEditor.d.ts +0 -70
  53. package/dist/widget/HtmlEditor/HtmlEditor.js +0 -287
  54. package/dist/widget/HtmlEditor/HtmlEditor.js.map +0 -1
  55. package/dist/widget/HtmlEditor/HtmlEditor.less +0 -345
  56. package/dist/widget/HtmlEditor/HtmlEditor.ts +0 -339
  57. package/dist/widget/HtmlEditor/HtmlEditor.vue +0 -70
  58. package/dist/widget/HtmlEditor/html-editor-HtmlSanitizer.js +0 -103
  59. package/dist/widget/ImageEnlarger.vue +0 -105
  60. package/dist/widget/OpacityBanner.vue +0 -125
  61. package/dist/widget/ProcessLine.vue +0 -133
  62. package/dist/widget/Resize.d.ts +0 -51
  63. package/dist/widget/Resize.js +0 -133
  64. package/dist/widget/Resize.js.map +0 -1
  65. package/dist/widget/Resize.ts +0 -152
  66. package/dist/widget/Resize.vue +0 -104
  67. package/dist/widget/TreeSelector.vue +0 -4
  68. package/dist/widget/calendar/BetweenDate.vue +0 -63
  69. package/dist/widget/calendar/Calendar.d.ts +0 -55
  70. package/dist/widget/calendar/Calendar.js +0 -145
  71. package/dist/widget/calendar/Calendar.js.map +0 -1
  72. package/dist/widget/calendar/Calendar.less +0 -210
  73. package/dist/widget/calendar/Calendar.ts +0 -167
  74. package/dist/widget/calendar/Calendar.vue +0 -52
  75. package/dist/widget/calendar/CalendarInput.vue +0 -71
  76. package/dist/widget/form/validator.d.ts +0 -70
  77. package/dist/widget/form/validator.js +0 -220
  78. package/dist/widget/form/validator.js.map +0 -1
  79. package/dist/widget/form/validator.ts +0 -289
  80. package/dist/widget/play-ground/sku.vue +0 -93
@@ -1,63 +0,0 @@
1
- <template>
2
- <form action="." method="GET" class="dateRange" @submit="valid">
3
- <aj-form-calendar-input
4
- :date-only="true"
5
- :position-fixed="true"
6
- placeholder="起始时间"
7
- field-name="startDate"
8
- ></aj-form-calendar-input>
9
- -
10
- <aj-form-calendar-input
11
- :date-only="true"
12
- :position-fixed="true"
13
- placeholder="截至时间"
14
- field-name="endDate"
15
- ></aj-form-calendar-input>
16
- <button class="aj-btn">按时间筛选</button>
17
- </form>
18
- </template>
19
-
20
- <script lang="ts">
21
- /**
22
- * 起始时间、截止时间的范围选择
23
- */
24
- export default {
25
- props: {
26
- isAjax: { type: Boolean, default: true }, // 是否 AJAX 模式
27
- },
28
- methods: {
29
- valid(this: Vue, ev: Event): void {
30
- let start = (<HTMLInputElement>(
31
- this.$el.querySelector("input[name=startDate]")
32
- )).value,
33
- end = (<HTMLInputElement>this.$el.querySelector("input[name=endDate]"))
34
- .value;
35
-
36
- if (!start || !end) {
37
- alert("输入数据不能为空");
38
- ev.preventDefault();
39
- return;
40
- }
41
-
42
- if (new Date(start) > new Date(end)) {
43
- alert("起始日期不能晚于结束日期");
44
- ev.preventDefault();
45
- return;
46
- }
47
-
48
- //@ts-ignore
49
- if (this.isAjax) {
50
- ev.preventDefault();
51
- let grid: any = this.$parent.$parent;
52
-
53
- Object.assign(grid.$refs.pager.extraParam, {
54
- startDate: start,
55
- endDate: end,
56
- });
57
-
58
- grid.reload();
59
- }
60
- },
61
- },
62
- };
63
- </script>
@@ -1,55 +0,0 @@
1
- /**
2
- * 日期选择器
3
- */
4
- declare const _default: {
5
- props: {
6
- showTime: BooleanConstructor;
7
- };
8
- data(): {
9
- date: Date;
10
- year: number;
11
- month: number;
12
- day: number;
13
- };
14
- mounted(): void;
15
- watch: {
16
- date(): void;
17
- };
18
- methods: {
19
- /**
20
- * 画日历
21
- */
22
- render(): void;
23
- /**
24
- * 获取指定的日期
25
- *
26
- * @param dateType
27
- * @param month
28
- */
29
- getDate(dateType: 'preMonth' | 'nextMonth' | 'setMonth' | 'preYear' | 'nextYear', month: number): void;
30
- /**
31
- *
32
- *
33
- * @param querySelectoreven
34
- */
35
- setMonth(ev: Event): void;
36
- /**
37
- * 获取空白的非上月天数 + 当月天数
38
- *
39
- * @param this
40
- */
41
- getDateArr(): number[];
42
- /**
43
- * 获取日期
44
- *
45
- * @param event
46
- */
47
- pickDay(ev: Event): string;
48
- /**
49
- *
50
- * @param event
51
- */
52
- pickupTime(event: Event): void;
53
- };
54
- };
55
- export default _default;
@@ -1,145 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- /**
4
- * 日期选择器
5
- */
6
- exports.default = {
7
- props: {
8
- showTime: Boolean // 是否显示时间,即“时分秒”
9
- },
10
- data() {
11
- let date = new Date;
12
- return {
13
- date: date,
14
- year: date.getFullYear(),
15
- month: date.getMonth() + 1,
16
- day: 1
17
- };
18
- },
19
- mounted() {
20
- this.$options.watch.date.call(this);
21
- },
22
- watch: {
23
- date() {
24
- this.year = this.date.getFullYear();
25
- this.month = this.date.getMonth() + 1;
26
- this.render();
27
- }
28
- },
29
- methods: {
30
- /**
31
- * 画日历
32
- */
33
- render() {
34
- let arr = this.getDateArr(), // 用来保存日期列表
35
- frag = document.createDocumentFragment(); // 插入日期
36
- while (arr.length) {
37
- let row = document.createElement("tr"); // 每个星期插入一个 tr
38
- for (let i = 1; i <= 7; i++) { // 每个星期有7天
39
- let cell = document.createElement("td");
40
- if (arr.length) {
41
- let d = arr.shift();
42
- if (d) {
43
- let text = this.year + '-' + this.month + '-' + d;
44
- cell.title = text; // 保存日期在 title 属性
45
- cell.className = 'day day_' + text;
46
- cell.innerHTML = d + "";
47
- let on = new Date(this.year, this.month - 1, d);
48
- // 判断是否今日
49
- if (isSameDay(on, this.date)) {
50
- cell.classList.add('onToday');
51
- // this.onToday && this.onToday(cell);// 点击 今天 时候触发的事件
52
- }
53
- // 判断是否选择日期
54
- // this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
55
- }
56
- }
57
- row.appendChild(cell);
58
- }
59
- frag.appendChild(row);
60
- }
61
- // 先清空内容再插入
62
- let tbody = this.$el.querySelector("table tbody");
63
- tbody.innerHTML = '';
64
- tbody.appendChild(frag);
65
- },
66
- /**
67
- * 获取指定的日期
68
- *
69
- * @param dateType
70
- * @param month
71
- */
72
- getDate(dateType, month) {
73
- let nowYear = this.date.getFullYear(), nowMonth = this.date.getMonth() + 1; // 当前日期
74
- switch (dateType) {
75
- case 'preMonth': // 上一月
76
- this.date = new Date(nowYear, nowMonth - 2, 1);
77
- break;
78
- case 'nextMonth': // 下一月
79
- this.date = new Date(nowYear, nowMonth, 1);
80
- break;
81
- case 'setMonth': // 指定月份
82
- this.date = new Date(nowYear, month - 1, 1);
83
- break;
84
- case 'preYear': // 上一年
85
- this.date = new Date(nowYear - 1, nowMonth - 1, 1);
86
- break;
87
- case 'nextYear': // 下一年
88
- this.date = new Date(nowYear + 1, nowMonth - 1, 1);
89
- break;
90
- }
91
- },
92
- /**
93
- *
94
- *
95
- * @param querySelectoreven
96
- */
97
- setMonth(ev) {
98
- let el = ev.target;
99
- this.getDate('setMonth', Number(el.selectedOptions[0].value));
100
- },
101
- /**
102
- * 获取空白的非上月天数 + 当月天数
103
- *
104
- * @param this
105
- */
106
- getDateArr() {
107
- let arr = [];
108
- // 算出这个月1号距离前面的星期天有多少天
109
- for (let i = 1, firstDay = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
110
- arr.push(0);
111
- // 这个月有多少天。用上个月然后设置日子参数为 0,就可以得到本月有多天
112
- for (let i = 1, monthDay = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
113
- arr.push(i);
114
- return arr;
115
- },
116
- /**
117
- * 获取日期
118
- *
119
- * @param event
120
- */
121
- pickDay(ev) {
122
- let el = ev.target, date = el.title;
123
- this.$emit('pickdate', date);
124
- return date;
125
- },
126
- /**
127
- *
128
- * @param event
129
- */
130
- pickupTime(event) {
131
- let hour = this.$el.querySelector('.hour'), minute = this.$el.querySelector('.minute'), time = hour.selectedOptions[0].value + ':' + minute.selectedOptions[0].value;
132
- this.$emit('pick-time', time);
133
- }
134
- }
135
- };
136
- /**
137
- * 判断两个日期是否同一日
138
- *
139
- * @param d1
140
- * @param d2
141
- */
142
- function isSameDay(d1, d2) {
143
- return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
144
- }
145
- //# sourceMappingURL=Calendar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/widget/calendar/Calendar.ts"],"names":[],"mappings":"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"}
@@ -1,210 +0,0 @@
1
- // 日历选择器
2
- .aj-form-calendar {
3
- font-family : Verdana;
4
- font-size : .8rem;
5
- background-color : white;
6
- border : 1px solid lightgray;
7
- border-radius : 5px;
8
- box-shadow : 0 5px 10px rgba(0, 0, 0, 0.2);
9
- text-align : center;
10
- width : 320px;
11
- -webkit-user-select: none;
12
- -moz-user-select : none;
13
- user-select : none;
14
- padding : 10px;
15
- line-height : 1.5em;
16
-
17
- a {
18
- color: #1e5494;
19
- text-decoration: none;
20
- }
21
-
22
- .selectYearMonth {
23
- float: right;
24
- width: 100px;
25
-
26
- div {
27
- display: inline-block;
28
- }
29
- }
30
-
31
- .showCurrentYearMonth {
32
- text-align: left;
33
- color : lightgray;
34
- font-size : 1.6rem;
35
- padding : 5% 0;
36
- }
37
-
38
- table {
39
- width : 100%;
40
- border : 0;
41
- border-spacing : 0;
42
- border-collapse: collapse;
43
-
44
- thead {
45
- tr {
46
- color : #acacac;
47
- border-bottom: 1px solid lightgray;
48
- margin-bottom: 15px;
49
- }
50
- }
51
-
52
- td {
53
- font-size : .8rem;
54
- padding : .4rem;
55
- letter-spacing : 1px;
56
- border : 0;
57
- background-color: white;
58
- text-align : center;
59
-
60
- &.day {
61
- cursor : pointer;
62
- transition: background-color 190ms ease-in-out;
63
- }
64
-
65
- &.onToday {
66
- font-weight: bold;
67
- color : #C60;
68
- }
69
-
70
- &.onSelect {
71
- font-weight: bold;
72
- }
73
-
74
- &.day:hover {
75
- color : darken(#e0ecf9, 50%);
76
- background-color: #e9e9e9;
77
- }
78
- }
79
- }
80
-
81
- .idCalendarPre,
82
- .idCalendarNext {
83
- cursor : pointer;
84
- font-size : 1.2rem;
85
- text-align : center;
86
- border-radius: 3px;
87
- padding : 2px 5px;
88
-
89
- &:hover {
90
- background-color: #e9e9e9;
91
- }
92
- }
93
-
94
- .idCalendarPre {
95
- float: left;
96
- }
97
-
98
- .idCalendarNext {
99
- float: right;
100
- }
101
-
102
- .btns {
103
- position: absolute;
104
- left : 15px;
105
- bottom : 5px;
106
-
107
- input[type=button] {
108
- font-size: .8rem;
109
- padding : 2px 4px;
110
- margin : 1px;
111
- }
112
- }
113
- .showTime{
114
- margin-top: 5%;
115
- select {
116
- min-width:50px;
117
- text-align: center;
118
- }
119
- }
120
- }
121
-
122
- // 日历 悬浮出现
123
- .aj-form-calendar-input {
124
- position: relative;
125
- width : 125px;
126
- line-height: 19px;
127
-
128
- &.show-time {
129
- width: 170px;
130
- }
131
-
132
- display: inline-block;
133
-
134
- input[type=text] {
135
- // .aj-input-base();
136
- max-width: 100% ! important;
137
- width : 100% ! important;
138
-
139
- }
140
-
141
- .icon {
142
- position : absolute;
143
- width : 17px;
144
- height : 16px;
145
- right : 5px;
146
- top : 6px;
147
- opacity : .6;
148
- cursor : pointer;
149
- // .menu {
150
- // color: #000;
151
- // position: absolute;
152
- // margin-left: 2px;
153
- // margin-top: 8px;
154
- // width: 17px;
155
- // height: 1px;
156
- // background-color: currentColor;
157
- // &:before {
158
- // content: '';
159
- // position: absolute;
160
- // top: -5px;
161
- // left: 0;
162
- // width: 17px;
163
- // height: 1px;
164
- // background-color: currentColor;
165
- // }
166
- //
167
- // &:after {
168
- // content: '';
169
- // position: absolute;
170
- // top: 5px;
171
- // left: 0;
172
- // width: 17px;
173
- // height: 1px;
174
- // background-color: currentColor;
175
- // }
176
- // }
177
- }
178
-
179
- .aj-form-calendar {
180
- z-index : 999999999;
181
- display : none;
182
- position: absolute;
183
-
184
- &.positionFixed {
185
- // 若父元素 overflow:hidden,则 position: absolute 不能完整显示,故 fixed
186
- position: fixed;
187
- }
188
-
189
- right: -3px;
190
- top : 25px;
191
- }
192
-
193
- &:hover .aj-form-calendar,
194
- .aj-form-calendar:hover {
195
- display: block;
196
-
197
- .icon {
198
- opacity: .5;
199
- }
200
- }
201
-
202
- &:hover .icon {
203
- opacity: 1;
204
- }
205
-
206
- .selectYearMonth select {
207
- min-width: 65px;
208
- outline: none;
209
- }
210
- }
@@ -1,167 +0,0 @@
1
- /**
2
- * 日期选择器
3
- */
4
- export default {
5
- props: {
6
- showTime: Boolean // 是否显示时间,即“时分秒”
7
- },
8
- data() {
9
- let date: Date = new Date;
10
- return {
11
- date: date,
12
- year: date.getFullYear(),
13
- month: date.getMonth() + 1,
14
- day: 1
15
- };
16
- },
17
- mounted(): void {
18
- this.$options.watch.date.call(this);
19
- },
20
- watch: {
21
- date(): void {
22
- this.year = this.date.getFullYear();
23
- this.month = this.date.getMonth() + 1;
24
- this.render();
25
- }
26
- },
27
- methods: {
28
- /**
29
- * 画日历
30
- */
31
- render(): void {
32
- let arr: number[] = this.getDateArr(),// 用来保存日期列表
33
- frag: DocumentFragment = document.createDocumentFragment();// 插入日期
34
-
35
- while (arr.length) {
36
- let row: HTMLTableRowElement = document.createElement("tr"); // 每个星期插入一个 tr
37
-
38
- for (let i = 1; i <= 7; i++) { // 每个星期有7天
39
- let cell: HTMLTableCellElement = document.createElement("td");
40
-
41
- if (arr.length) {
42
- let d: number = arr.shift();
43
-
44
- if (d) {
45
- let text: string = this.year + '-' + this.month + '-' + d;
46
- cell.title = text; // 保存日期在 title 属性
47
- cell.className = 'day day_' + text;
48
- cell.innerHTML = d + "";
49
-
50
- let on: Date = new Date(this.year, this.month - 1, d);
51
-
52
- // 判断是否今日
53
- if (isSameDay(on, this.date)) {
54
- cell.classList.add('onToday');
55
- // this.onToday && this.onToday(cell);// 点击 今天 时候触发的事件
56
- }
57
- // 判断是否选择日期
58
- // this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
59
- }
60
- }
61
-
62
- row.appendChild(cell);
63
- }
64
-
65
- frag.appendChild(row);
66
- }
67
-
68
- // 先清空内容再插入
69
- let tbody = <HTMLElement>this.$el.querySelector("table tbody");
70
- tbody.innerHTML = '';
71
- tbody.appendChild(frag);
72
- },
73
-
74
- /**
75
- * 获取指定的日期
76
- *
77
- * @param dateType
78
- * @param month
79
- */
80
- getDate(dateType: 'preMonth' | 'nextMonth' | 'setMonth' | 'preYear' | 'nextYear', month: number): void {
81
- let nowYear: number = this.date.getFullYear(),
82
- nowMonth: number = this.date.getMonth() + 1; // 当前日期
83
-
84
- switch (dateType) {
85
- case 'preMonth':// 上一月
86
- this.date = new Date(nowYear, nowMonth - 2, 1);
87
- break;
88
- case 'nextMonth':// 下一月
89
- this.date = new Date(nowYear, nowMonth, 1);
90
- break;
91
- case 'setMonth':// 指定月份
92
- this.date = new Date(nowYear, month - 1, 1);
93
- break;
94
- case 'preYear':// 上一年
95
- this.date = new Date(nowYear - 1, nowMonth - 1, 1);
96
- break;
97
- case 'nextYear':// 下一年
98
- this.date = new Date(nowYear + 1, nowMonth - 1, 1);
99
- break;
100
- }
101
- },
102
-
103
- /**
104
- *
105
- *
106
- * @param querySelectoreven
107
- */
108
- setMonth(ev: Event): void {
109
- let el: HTMLSelectElement = <HTMLSelectElement>ev.target;
110
- this.getDate('setMonth', Number(el.selectedOptions[0].value));
111
- },
112
-
113
- /**
114
- * 获取空白的非上月天数 + 当月天数
115
- *
116
- * @param this
117
- */
118
- getDateArr(): number[] {
119
- let arr: number[] = [];
120
-
121
- // 算出这个月1号距离前面的星期天有多少天
122
- for (let i = 1, firstDay: number = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
123
- arr.push(0);
124
-
125
- // 这个月有多少天。用上个月然后设置日子参数为 0,就可以得到本月有多天
126
- for (let i = 1, monthDay: number = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
127
- arr.push(i);
128
-
129
- return arr;
130
- },
131
-
132
- /**
133
- * 获取日期
134
- *
135
- * @param event
136
- */
137
- pickDay(ev: Event): string {
138
- let el: HTMLElement = <HTMLElement>ev.target,
139
- date: string = el.title;
140
- this.$emit('pickdate', date);
141
-
142
- return date;
143
- },
144
-
145
- /**
146
- *
147
- * @param event
148
- */
149
- pickupTime(event: Event): void {
150
- let hour: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.hour'),
151
- minute: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.minute'),
152
- time = hour.selectedOptions[0].value + ':' + minute.selectedOptions[0].value;
153
-
154
- this.$emit('pick-time', time);
155
- }
156
- }
157
- };
158
-
159
- /**
160
- * 判断两个日期是否同一日
161
- *
162
- * @param d1
163
- * @param d2
164
- */
165
- function isSameDay(d1: Date, d2: Date): boolean {
166
- return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
167
- }
@@ -1,52 +0,0 @@
1
- <template>
2
- <div class="aj-form-calendar">
3
- <div class="selectYearMonth">
4
- <a href="###" @click="getDate('preYear')" class="preYear" title="上一年"> &#171; <!-- &lt; --></a>
5
- <select @change="setMonth" v-model="month">
6
- <option value="1">一月</option>
7
- <option value="2">二月</option>
8
- <option value="3">三月</option>
9
- <option value="4">四月</option>
10
- <option value="5">五月</option>
11
- <option value="6">六月</option>
12
- <option value="7">七月</option>
13
- <option value="8">八月</option>
14
- <option value="9">九月</option>
15
- <option value="10">十月</option>
16
- <option value="11">十一月</option>
17
- <option value="12">十二月</option>
18
- </select>
19
- <a href="###" @click="getDate('nextYear')" class="nextYear" title="下一年"> &#187;<!-- &gt; --> </a>
20
- </div>
21
- <div class="showCurrentYearMonth">
22
- <span class="showYear">{{year}}</span>/<span class="showMonth">{{month}}</span>
23
- </div>
24
- <table>
25
- <thead>
26
- <tr>
27
- <td>日</td>
28
- <td>一</td>
29
- <td>二</td>
30
- <td>三</td>
31
- <td>四</td>
32
- <td>五</td>
33
- <td>六</td>
34
- </tr>
35
- </thead>
36
- <tbody @click="pickDay"></tbody>
37
- </table>
38
- <div v-if="showTime" class="showTime">
39
- 时 <select class="hour aj-select">
40
- <option v-for="n in 24" :key="n">{{n}}</option>
41
- </select>
42
- 分 <select class="minute aj-select">
43
- <option v-for="n in 61" :key="n">{{n - 1}}</option>
44
- </select>
45
- <a href="#" @click="pickupTime">选择时间</a>
46
- </div>
47
- </div>
48
- </template>
49
-
50
- <script lang="ts" src="./Calendar.ts"></script>
51
-
52
- <style lang="less" scoped src="./Calendar.less"></style>