xt-element-ui 2.2.0 → 2.2.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.
- package/docs/components/base/xt-date-picker.md +7 -26
- package/docs/components/base/xt-grid-box.md +34 -34
- package/docs/components/base/xt-tabs.md +51 -6
- package/docs/components/base/xt-text.md +20 -3
- package/lib/css/1.87a493be.css +1 -0
- package/lib/index.common.1.js +294 -0
- package/lib/index.common.2.js +141 -0
- package/lib/index.common.js +342 -492
- package/lib/index.css +1 -1
- package/lib/index.umd.1.js +294 -0
- package/lib/index.umd.2.js +141 -0
- package/lib/index.umd.js +342 -492
- package/lib/index.umd.min.1.js +1 -0
- package/lib/index.umd.min.2.js +1 -0
- package/lib/index.umd.min.js +1 -1
- package/lib/xt-date-picker/css/1.87a493be.css +1 -0
- package/lib/xt-date-picker/xt-date-picker.common.1.js +294 -0
- package/lib/xt-date-picker/xt-date-picker.common.2.js +141 -0
- package/lib/xt-date-picker/xt-date-picker.common.js +201 -332
- package/lib/xt-date-picker/xt-date-picker.css +1 -1
- package/lib/xt-date-picker/xt-date-picker.umd.1.js +294 -0
- package/lib/xt-date-picker/xt-date-picker.umd.2.js +141 -0
- package/lib/xt-date-picker/xt-date-picker.umd.js +201 -332
- package/lib/xt-date-picker/xt-date-picker.umd.min.1.js +1 -0
- package/lib/xt-date-picker/xt-date-picker.umd.min.2.js +1 -0
- package/lib/xt-date-picker/xt-date-picker.umd.min.js +1 -1
- package/lib/xt-tabs/xt-tabs.common.js +5 -27
- package/lib/xt-tabs/xt-tabs.css +1 -1
- package/lib/xt-tabs/xt-tabs.umd.js +5 -27
- package/lib/xt-tabs/xt-tabs.umd.min.js +1 -1
- package/lib/xt-text/xt-text.common.js +7 -4
- package/lib/xt-text/xt-text.umd.js +7 -4
- package/lib/xt-text/xt-text.umd.min.js +1 -1
- package/package.json +1 -1
- package/src/components/index.scss +3 -0
- package/src/components/xt-date-picker/component/Picker.vue +2 -46
- package/src/components/xt-date-picker/component/RangeDate.vue +4 -4
- package/src/components/xt-date-picker/index.js +1 -0
- package/src/components/xt-date-picker/index.vue +3 -23
- package/src/components/xt-date-picker/style/index.scss +64 -0
- package/src/components/xt-input/style/index.scss +1 -1
- package/src/components/xt-tabs/index.vue +3 -174
- package/src/components/xt-tabs/style/index.scss +131 -121
- package/src/components/xt-text/index.vue +5 -2
- package/src/styles/theme/index.scss +0 -1
- package/src/styles/theme/dark-variables.scss +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.range-picker[data-v-32b85e82]{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%}.range-picker .el-date-editor[data-v-32b85e82]{flex:1;min-width:130px}.split[data-v-32b85e82]{flex-shrink:0;padding:0 4px}@media (max-width:360px){.range-picker[data-v-32b85e82]{flex-direction:column;align-items:stretch}.split[data-v-32b85e82]{text-align:center;margin:4px 0}}
|
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
((typeof self !== 'undefined' ? self : this)["webpackJsonpxt_date_picker"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpxt_date_picker"] || []).push([[1,2],{
|
|
2
|
+
|
|
3
|
+
/***/ "0e3e":
|
|
4
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
5
|
+
|
|
6
|
+
"use strict";
|
|
7
|
+
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("16dd");
|
|
8
|
+
/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_7_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_7_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_7_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_RangeDate_vue_vue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_0__);
|
|
9
|
+
/* unused harmony reexport * */
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
/***/ }),
|
|
13
|
+
|
|
14
|
+
/***/ "16dd":
|
|
15
|
+
/***/ (function(module, exports, __webpack_require__) {
|
|
16
|
+
|
|
17
|
+
// extracted by mini-css-extract-plugin
|
|
18
|
+
|
|
19
|
+
/***/ }),
|
|
20
|
+
|
|
21
|
+
/***/ "1db3":
|
|
22
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
23
|
+
|
|
24
|
+
"use strict";
|
|
25
|
+
// ESM COMPAT FLAG
|
|
26
|
+
__webpack_require__.r(__webpack_exports__);
|
|
27
|
+
|
|
28
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b8cd9b04-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/RangeDate.vue?vue&type=template&id=32b85e82&scoped=true
|
|
29
|
+
var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"range-picker"},[_c('Picker',{attrs:{"type":_vm.type,"size":"small","placeholder":_vm.startPlaceholder,"disabled":_vm.disabled,"disabled-date":_vm.disabledStart},on:{"change":_vm.handleChange},model:{value:(_vm.startVal),callback:function ($$v) {_vm.startVal=$$v},expression:"startVal"}}),_c('span',{staticClass:"split"},[_vm._v(_vm._s(_vm.separator))]),_c('Picker',{attrs:{"type":_vm.type,"size":"small","placeholder":_vm.endPlaceholder,"disabled":_vm.disabled,"disabled-date":_vm.disabledEnd},on:{"change":_vm.handleChange},model:{value:(_vm.endVal),callback:function ($$v) {_vm.endVal=$$v},expression:"endVal"}})],1)
|
|
30
|
+
}
|
|
31
|
+
var staticRenderFns = []
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=template&id=32b85e82&scoped=true
|
|
35
|
+
|
|
36
|
+
// EXTERNAL MODULE: ./src/components/xt-date-picker/component/Picker.vue + 4 modules
|
|
37
|
+
var Picker = __webpack_require__("b0ea");
|
|
38
|
+
|
|
39
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/RangeDate.vue?vue&type=script&lang=js
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
/* harmony default export */ var RangeDatevue_type_script_lang_js = ({
|
|
43
|
+
name: 'RangeDate',
|
|
44
|
+
components: { Picker: Picker["default"] },
|
|
45
|
+
props: {
|
|
46
|
+
// 父组件v-model绑定数组 [startStr, endStr]
|
|
47
|
+
value: {
|
|
48
|
+
type: Array,
|
|
49
|
+
default: () => [null, null]
|
|
50
|
+
},
|
|
51
|
+
type: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: 'date'
|
|
54
|
+
},
|
|
55
|
+
separator: {
|
|
56
|
+
type: String,
|
|
57
|
+
default: '至'
|
|
58
|
+
},
|
|
59
|
+
disabled: { type: Boolean, default: false }
|
|
60
|
+
},
|
|
61
|
+
data() {
|
|
62
|
+
return {
|
|
63
|
+
startVal: '',
|
|
64
|
+
endVal: ''
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
watch: {
|
|
68
|
+
// 外部回填回显
|
|
69
|
+
value: {
|
|
70
|
+
handler(val) {
|
|
71
|
+
const [s, e] = val || []
|
|
72
|
+
this.startVal = s || ''
|
|
73
|
+
this.endVal = e || ''
|
|
74
|
+
},
|
|
75
|
+
immediate: true
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
computed: {
|
|
79
|
+
startDate() {
|
|
80
|
+
return this.startVal ? new Date(this.startVal) : null
|
|
81
|
+
},
|
|
82
|
+
endDate() {
|
|
83
|
+
return this.endVal ? new Date(this.endVal) : null
|
|
84
|
+
},
|
|
85
|
+
startPlaceholder() {
|
|
86
|
+
const map = {
|
|
87
|
+
date: '开始日期',
|
|
88
|
+
month: '开始月份',
|
|
89
|
+
year: '开始年份',
|
|
90
|
+
quarter: '开始季度',
|
|
91
|
+
week: '开始周'
|
|
92
|
+
}
|
|
93
|
+
return map[this.type] || '开始日期'
|
|
94
|
+
},
|
|
95
|
+
endPlaceholder() {
|
|
96
|
+
const map = {
|
|
97
|
+
date: '结束日期',
|
|
98
|
+
month: '结束月份',
|
|
99
|
+
year: '结束年份',
|
|
100
|
+
quarter: '结束季度',
|
|
101
|
+
week: '结束周'
|
|
102
|
+
}
|
|
103
|
+
return map[this.type] || '结束日期'
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
methods: {
|
|
107
|
+
// 禁用开始:不能晚于已选结束
|
|
108
|
+
disabledStart(time) {
|
|
109
|
+
if (!this.endDate) return false
|
|
110
|
+
return time.getTime() > this.endDate.getTime()
|
|
111
|
+
},
|
|
112
|
+
// 禁用结束:不能早于已选开始
|
|
113
|
+
disabledEnd(time) {
|
|
114
|
+
if (!this.startDate) return false
|
|
115
|
+
return time.getTime() < this.startDate.getTime()
|
|
116
|
+
},
|
|
117
|
+
// 任意日期变更同步抛出数组给父组件
|
|
118
|
+
handleChange() {
|
|
119
|
+
this.$emit('input', [this.startVal, this.endVal])
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=script&lang=js
|
|
125
|
+
/* harmony default export */ var component_RangeDatevue_type_script_lang_js = (RangeDatevue_type_script_lang_js);
|
|
126
|
+
// EXTERNAL MODULE: ./src/components/xt-date-picker/component/RangeDate.vue?vue&type=style&index=0&id=32b85e82&prod&scoped=true&lang=css
|
|
127
|
+
var RangeDatevue_type_style_index_0_id_32b85e82_prod_scoped_true_lang_css = __webpack_require__("0e3e");
|
|
128
|
+
|
|
129
|
+
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
|
|
130
|
+
var componentNormalizer = __webpack_require__("2877");
|
|
131
|
+
|
|
132
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/RangeDate.vue
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
/* normalize component */
|
|
140
|
+
|
|
141
|
+
var component = Object(componentNormalizer["a" /* default */])(
|
|
142
|
+
component_RangeDatevue_type_script_lang_js,
|
|
143
|
+
render,
|
|
144
|
+
staticRenderFns,
|
|
145
|
+
false,
|
|
146
|
+
null,
|
|
147
|
+
"32b85e82",
|
|
148
|
+
null
|
|
149
|
+
|
|
150
|
+
)
|
|
151
|
+
|
|
152
|
+
/* harmony default export */ var RangeDate = __webpack_exports__["default"] = (component.exports);
|
|
153
|
+
|
|
154
|
+
/***/ }),
|
|
155
|
+
|
|
156
|
+
/***/ "b0ea":
|
|
157
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
158
|
+
|
|
159
|
+
"use strict";
|
|
160
|
+
// ESM COMPAT FLAG
|
|
161
|
+
__webpack_require__.r(__webpack_exports__);
|
|
162
|
+
|
|
163
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b8cd9b04-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
|
|
164
|
+
var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"date-picker"},[(_vm.type !== 'quarter')?_c('el-date-picker',_vm._g(_vm._b({attrs:{"type":_vm.pickerType,"value-format":_vm.valueFormat,"disabled":_vm.disabled,"placeholder":_vm.placeholder,"popper-append-to-body":"","popper-class":"base-date-popper"},model:{value:(_vm.innerValue),callback:function ($$v) {_vm.innerValue=$$v},expression:"innerValue"}},'el-date-picker',_vm.$attrs,false),_vm.$listeners)):_c('el-popover',{attrs:{"trigger":"manual","placement":"bottom-start","width":"240"},model:{value:(_vm.quarterPopVisible),callback:function ($$v) {_vm.quarterPopVisible=$$v},expression:"quarterPopVisible"}},[_c('div',{staticClass:"quarter-panel"},[_c('div',{staticClass:"quarter-header"},[_c('el-button',{attrs:{"icon":"el-icon-d-arrow-left"},on:{"click":function($event){_vm.year--}}}),_c('span',[_vm._v(_vm._s(_vm.year)+" 年")]),_c('el-button',{attrs:{"icon":"el-icon-d-arrow-right"},on:{"click":function($event){_vm.year++}}})],1),_c('div',{staticClass:"quarter-list"},_vm._l((4),function(q){return _c('div',{key:q,staticClass:"quarter-item",class:{ active: _vm.quarterNum === q },on:{"click":function($event){return _vm.selectQuarter(q)}}},[_vm._v(" Q"+_vm._s(q)+" ")])}),0)]),_c('el-input',{ref:"quarterInput",attrs:{"slot":"reference","size":"small","readonly":"","placeholder":_vm.placeholder,"disabled":_vm.disabled,"clearable":""},on:{"clear":_vm.handleClearQuarter},slot:"reference",model:{value:(_vm.quarterShowText),callback:function ($$v) {_vm.quarterShowText=$$v},expression:"quarterShowText"}},[_c('i',{staticClass:"el-icon-date",attrs:{"slot":"affix"},slot:"affix"})])],1)],1)
|
|
165
|
+
}
|
|
166
|
+
var staticRenderFns = []
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
|
|
170
|
+
|
|
171
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=script&lang=js
|
|
172
|
+
|
|
173
|
+
/* harmony default export */ var Pickervue_type_script_lang_js = ({
|
|
174
|
+
name: 'BaseDatePicker',
|
|
175
|
+
inheritAttrs: false,
|
|
176
|
+
props: {
|
|
177
|
+
value: {
|
|
178
|
+
type: [String, null],
|
|
179
|
+
default: null
|
|
180
|
+
},
|
|
181
|
+
type: {
|
|
182
|
+
type: String,
|
|
183
|
+
default: 'date',
|
|
184
|
+
validator: val => ['date', 'month', 'year', 'quarter', 'week'].includes(val)
|
|
185
|
+
},
|
|
186
|
+
disabled: {
|
|
187
|
+
type: Boolean,
|
|
188
|
+
default: false
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
data() {
|
|
192
|
+
return {
|
|
193
|
+
quarterPopVisible: false,
|
|
194
|
+
year: new Date().getFullYear(),
|
|
195
|
+
quarterNum: null
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
computed: {
|
|
199
|
+
pickerType() {
|
|
200
|
+
return this.type === 'quarter' ? null : this.type
|
|
201
|
+
},
|
|
202
|
+
placeholder() {
|
|
203
|
+
const map = {
|
|
204
|
+
date: '请选择日期',
|
|
205
|
+
month: '请选择月份',
|
|
206
|
+
year: '请选择年份',
|
|
207
|
+
quarter: '请选择季度',
|
|
208
|
+
week: '请选择周'
|
|
209
|
+
}
|
|
210
|
+
return map[this.type] || '请选择日期'
|
|
211
|
+
},
|
|
212
|
+
valueFormat() {
|
|
213
|
+
const map = {
|
|
214
|
+
date: 'yyyy-MM-dd',
|
|
215
|
+
month: 'yyyy-MM',
|
|
216
|
+
year: 'yyyy',
|
|
217
|
+
quarter: 'yyyy-Qq',
|
|
218
|
+
week: 'yyyy-WW'
|
|
219
|
+
}
|
|
220
|
+
return map[this.type] || 'yyyy-MM-dd'
|
|
221
|
+
},
|
|
222
|
+
innerValue: {
|
|
223
|
+
get() { return this.value },
|
|
224
|
+
set(val) { this.$emit('input', val) }
|
|
225
|
+
},
|
|
226
|
+
quarterShowText() {
|
|
227
|
+
if (!this.value) return ''
|
|
228
|
+
return `${this.year}-Q${this.quarterNum}`
|
|
229
|
+
}
|
|
230
|
+
},
|
|
231
|
+
watch: {
|
|
232
|
+
value: {
|
|
233
|
+
handler(val) {
|
|
234
|
+
if (this.type !== 'quarter' || !val) {
|
|
235
|
+
this.quarterNum = null
|
|
236
|
+
return
|
|
237
|
+
}
|
|
238
|
+
const [y, q] = val.split('-Q')
|
|
239
|
+
this.year = Number(y)
|
|
240
|
+
this.quarterNum = Number(q)
|
|
241
|
+
},
|
|
242
|
+
immediate: true
|
|
243
|
+
}
|
|
244
|
+
},
|
|
245
|
+
methods: {
|
|
246
|
+
selectQuarter(q) {
|
|
247
|
+
this.quarterNum = q
|
|
248
|
+
const val = `${this.year}-Q${q}`
|
|
249
|
+
this.$emit('input', val)
|
|
250
|
+
this.quarterPopVisible = false
|
|
251
|
+
},
|
|
252
|
+
handleClearQuarter() {
|
|
253
|
+
this.quarterNum = null
|
|
254
|
+
this.$emit('input', null)
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
mounted() {
|
|
258
|
+
if (this.type === 'quarter' && this.$refs.quarterInput) {
|
|
259
|
+
this.$refs.quarterInput.$el.addEventListener('click', () => {
|
|
260
|
+
if (!this.disabled) this.quarterPopVisible = true
|
|
261
|
+
})
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue?vue&type=script&lang=js
|
|
267
|
+
/* harmony default export */ var component_Pickervue_type_script_lang_js = (Pickervue_type_script_lang_js);
|
|
268
|
+
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
|
|
269
|
+
var componentNormalizer = __webpack_require__("2877");
|
|
270
|
+
|
|
271
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
|
|
276
|
+
|
|
277
|
+
/* normalize component */
|
|
278
|
+
|
|
279
|
+
var component = Object(componentNormalizer["a" /* default */])(
|
|
280
|
+
component_Pickervue_type_script_lang_js,
|
|
281
|
+
render,
|
|
282
|
+
staticRenderFns,
|
|
283
|
+
false,
|
|
284
|
+
null,
|
|
285
|
+
null,
|
|
286
|
+
null
|
|
287
|
+
|
|
288
|
+
)
|
|
289
|
+
|
|
290
|
+
/* harmony default export */ var Picker = __webpack_exports__["default"] = (component.exports);
|
|
291
|
+
|
|
292
|
+
/***/ })
|
|
293
|
+
|
|
294
|
+
}]);
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
((typeof self !== 'undefined' ? self : this)["webpackJsonpxt_date_picker"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpxt_date_picker"] || []).push([[2],{
|
|
2
|
+
|
|
3
|
+
/***/ "b0ea":
|
|
4
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
5
|
+
|
|
6
|
+
"use strict";
|
|
7
|
+
// ESM COMPAT FLAG
|
|
8
|
+
__webpack_require__.r(__webpack_exports__);
|
|
9
|
+
|
|
10
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"b8cd9b04-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
|
|
11
|
+
var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:"date-picker"},[(_vm.type !== 'quarter')?_c('el-date-picker',_vm._g(_vm._b({attrs:{"type":_vm.pickerType,"value-format":_vm.valueFormat,"disabled":_vm.disabled,"placeholder":_vm.placeholder,"popper-append-to-body":"","popper-class":"base-date-popper"},model:{value:(_vm.innerValue),callback:function ($$v) {_vm.innerValue=$$v},expression:"innerValue"}},'el-date-picker',_vm.$attrs,false),_vm.$listeners)):_c('el-popover',{attrs:{"trigger":"manual","placement":"bottom-start","width":"240"},model:{value:(_vm.quarterPopVisible),callback:function ($$v) {_vm.quarterPopVisible=$$v},expression:"quarterPopVisible"}},[_c('div',{staticClass:"quarter-panel"},[_c('div',{staticClass:"quarter-header"},[_c('el-button',{attrs:{"icon":"el-icon-d-arrow-left"},on:{"click":function($event){_vm.year--}}}),_c('span',[_vm._v(_vm._s(_vm.year)+" 年")]),_c('el-button',{attrs:{"icon":"el-icon-d-arrow-right"},on:{"click":function($event){_vm.year++}}})],1),_c('div',{staticClass:"quarter-list"},_vm._l((4),function(q){return _c('div',{key:q,staticClass:"quarter-item",class:{ active: _vm.quarterNum === q },on:{"click":function($event){return _vm.selectQuarter(q)}}},[_vm._v(" Q"+_vm._s(q)+" ")])}),0)]),_c('el-input',{ref:"quarterInput",attrs:{"slot":"reference","size":"small","readonly":"","placeholder":_vm.placeholder,"disabled":_vm.disabled,"clearable":""},on:{"clear":_vm.handleClearQuarter},slot:"reference",model:{value:(_vm.quarterShowText),callback:function ($$v) {_vm.quarterShowText=$$v},expression:"quarterShowText"}},[_c('i',{staticClass:"el-icon-date",attrs:{"slot":"affix"},slot:"affix"})])],1)],1)
|
|
12
|
+
}
|
|
13
|
+
var staticRenderFns = []
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue?vue&type=template&id=4a866a03
|
|
17
|
+
|
|
18
|
+
// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/xt-date-picker/component/Picker.vue?vue&type=script&lang=js
|
|
19
|
+
|
|
20
|
+
/* harmony default export */ var Pickervue_type_script_lang_js = ({
|
|
21
|
+
name: 'BaseDatePicker',
|
|
22
|
+
inheritAttrs: false,
|
|
23
|
+
props: {
|
|
24
|
+
value: {
|
|
25
|
+
type: [String, null],
|
|
26
|
+
default: null
|
|
27
|
+
},
|
|
28
|
+
type: {
|
|
29
|
+
type: String,
|
|
30
|
+
default: 'date',
|
|
31
|
+
validator: val => ['date', 'month', 'year', 'quarter', 'week'].includes(val)
|
|
32
|
+
},
|
|
33
|
+
disabled: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
default: false
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
data() {
|
|
39
|
+
return {
|
|
40
|
+
quarterPopVisible: false,
|
|
41
|
+
year: new Date().getFullYear(),
|
|
42
|
+
quarterNum: null
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
computed: {
|
|
46
|
+
pickerType() {
|
|
47
|
+
return this.type === 'quarter' ? null : this.type
|
|
48
|
+
},
|
|
49
|
+
placeholder() {
|
|
50
|
+
const map = {
|
|
51
|
+
date: '请选择日期',
|
|
52
|
+
month: '请选择月份',
|
|
53
|
+
year: '请选择年份',
|
|
54
|
+
quarter: '请选择季度',
|
|
55
|
+
week: '请选择周'
|
|
56
|
+
}
|
|
57
|
+
return map[this.type] || '请选择日期'
|
|
58
|
+
},
|
|
59
|
+
valueFormat() {
|
|
60
|
+
const map = {
|
|
61
|
+
date: 'yyyy-MM-dd',
|
|
62
|
+
month: 'yyyy-MM',
|
|
63
|
+
year: 'yyyy',
|
|
64
|
+
quarter: 'yyyy-Qq',
|
|
65
|
+
week: 'yyyy-WW'
|
|
66
|
+
}
|
|
67
|
+
return map[this.type] || 'yyyy-MM-dd'
|
|
68
|
+
},
|
|
69
|
+
innerValue: {
|
|
70
|
+
get() { return this.value },
|
|
71
|
+
set(val) { this.$emit('input', val) }
|
|
72
|
+
},
|
|
73
|
+
quarterShowText() {
|
|
74
|
+
if (!this.value) return ''
|
|
75
|
+
return `${this.year}-Q${this.quarterNum}`
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
watch: {
|
|
79
|
+
value: {
|
|
80
|
+
handler(val) {
|
|
81
|
+
if (this.type !== 'quarter' || !val) {
|
|
82
|
+
this.quarterNum = null
|
|
83
|
+
return
|
|
84
|
+
}
|
|
85
|
+
const [y, q] = val.split('-Q')
|
|
86
|
+
this.year = Number(y)
|
|
87
|
+
this.quarterNum = Number(q)
|
|
88
|
+
},
|
|
89
|
+
immediate: true
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
methods: {
|
|
93
|
+
selectQuarter(q) {
|
|
94
|
+
this.quarterNum = q
|
|
95
|
+
const val = `${this.year}-Q${q}`
|
|
96
|
+
this.$emit('input', val)
|
|
97
|
+
this.quarterPopVisible = false
|
|
98
|
+
},
|
|
99
|
+
handleClearQuarter() {
|
|
100
|
+
this.quarterNum = null
|
|
101
|
+
this.$emit('input', null)
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
mounted() {
|
|
105
|
+
if (this.type === 'quarter' && this.$refs.quarterInput) {
|
|
106
|
+
this.$refs.quarterInput.$el.addEventListener('click', () => {
|
|
107
|
+
if (!this.disabled) this.quarterPopVisible = true
|
|
108
|
+
})
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue?vue&type=script&lang=js
|
|
114
|
+
/* harmony default export */ var component_Pickervue_type_script_lang_js = (Pickervue_type_script_lang_js);
|
|
115
|
+
// EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
|
|
116
|
+
var componentNormalizer = __webpack_require__("2877");
|
|
117
|
+
|
|
118
|
+
// CONCATENATED MODULE: ./src/components/xt-date-picker/component/Picker.vue
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
/* normalize component */
|
|
125
|
+
|
|
126
|
+
var component = Object(componentNormalizer["a" /* default */])(
|
|
127
|
+
component_Pickervue_type_script_lang_js,
|
|
128
|
+
render,
|
|
129
|
+
staticRenderFns,
|
|
130
|
+
false,
|
|
131
|
+
null,
|
|
132
|
+
null,
|
|
133
|
+
null
|
|
134
|
+
|
|
135
|
+
)
|
|
136
|
+
|
|
137
|
+
/* harmony default export */ var Picker = __webpack_exports__["default"] = (component.exports);
|
|
138
|
+
|
|
139
|
+
/***/ })
|
|
140
|
+
|
|
141
|
+
}]);
|