日期选择可手动输入
Showing
3 changed files
with
21 additions
and
11 deletions
... | @@ -26,14 +26,14 @@ export default { | ... | @@ -26,14 +26,14 @@ export default { |
26 | // today : 当日不可选择 | 26 | // today : 当日不可选择 |
27 | filtModel: { | 27 | filtModel: { |
28 | type: Array, | 28 | type: Array, |
29 | default() { | 29 | default () { |
30 | return ["history", "weekend", "today"] | 30 | return ["history", "weekend", "today"] |
31 | } | 31 | } |
32 | }, | 32 | }, |
33 | // 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"] | 33 | // 需要过滤的日期列表 格式 ["yyyy-MM-dd","yyyy-MM-dd"] |
34 | filterDates: { | 34 | filterDates: { |
35 | type: Array, | 35 | type: Array, |
36 | default() { | 36 | default () { |
37 | return [] // ["2019-11-26", "2019-11-28"] | 37 | return [] // ["2019-11-26", "2019-11-28"] |
38 | } | 38 | } |
39 | }, | 39 | }, |
... | @@ -46,6 +46,14 @@ export default { | ... | @@ -46,6 +46,14 @@ export default { |
46 | placeholder: { | 46 | placeholder: { |
47 | type: String, | 47 | type: String, |
48 | default: " " | 48 | default: " " |
49 | }, | ||
50 | /** | ||
51 | * input框 是否只读 | ||
52 | * ture为输入框不可编辑 | ||
53 | */ | ||
54 | readonly: { | ||
55 | type: Boolean, | ||
56 | default: false | ||
49 | } | 57 | } |
50 | 58 | ||
51 | }, | 59 | }, |
... | @@ -356,8 +364,7 @@ export default { | ... | @@ -356,8 +364,7 @@ export default { |
356 | this.month = Number(ymd[1]); | 364 | this.month = Number(ymd[1]); |
357 | this.date = Number(ymd[2]); | 365 | this.date = Number(ymd[2]); |
358 | isInit = true; | 366 | isInit = true; |
359 | } catch (e) { | 367 | } catch (e) {} |
360 | } | ||
361 | } | 368 | } |
362 | } | 369 | } |
363 | if (!isInit) { | 370 | if (!isInit) { |
... | @@ -390,8 +397,7 @@ export default { | ... | @@ -390,8 +397,7 @@ export default { |
390 | this.formatDate(); | 397 | this.formatDate(); |
391 | } | 398 | } |
392 | }, | 399 | }, |
393 | mounted() { | 400 | mounted() {}, |
394 | }, | ||
395 | created() { | 401 | created() { |
396 | this.initData(); | 402 | this.initData(); |
397 | }, | 403 | }, | ... | ... |
... | @@ -15,7 +15,7 @@ | ... | @@ -15,7 +15,7 @@ |
15 | 15 | ||
16 | position: absolute; | 16 | position: absolute; |
17 | // position: relative; | 17 | // position: relative; |
18 | z-index: 1101; | 18 | z-index: 800; |
19 | margin-top: 12px; | 19 | margin-top: 12px; |
20 | margin-left: 0px; | 20 | margin-left: 0px; |
21 | 21 | ||
... | @@ -128,7 +128,7 @@ | ... | @@ -128,7 +128,7 @@ |
128 | position: relative; | 128 | position: relative; |
129 | display: flex; | 129 | display: flex; |
130 | justify-content: space-between; | 130 | justify-content: space-between; |
131 | z-index: 1; | 131 | z-index: 900; |
132 | 132 | ||
133 | // input和下拉 | 133 | // input和下拉 |
134 | .ipt { | 134 | .ipt { |
... | @@ -184,12 +184,16 @@ | ... | @@ -184,12 +184,16 @@ |
184 | } | 184 | } |
185 | } | 185 | } |
186 | 186 | ||
187 | .readonly{ | ||
188 | z-index: 1; | ||
189 | } | ||
190 | |||
187 | // 遮罩 | 191 | // 遮罩 |
188 | .date-mask { | 192 | .date-mask { |
189 | width: 100%; | 193 | width: 100%; |
190 | height: 100%; | 194 | height: 100%; |
191 | position: fixed; | 195 | position: fixed; |
192 | z-index: 1001; | 196 | z-index: 800; |
193 | left: 0; | 197 | left: 0; |
194 | top: 0; | 198 | top: 0; |
195 | } | 199 | } | ... | ... |
... | @@ -2,8 +2,8 @@ | ... | @@ -2,8 +2,8 @@ |
2 | <template> | 2 | <template> |
3 | <div class="comp"> | 3 | <div class="comp"> |
4 | <div class="date-mask" v-if="visible" @click="showCalendar()"></div> | 4 | <div class="date-mask" v-if="visible" @click="showCalendar()"></div> |
5 | <div class="ipt-wrap"> | 5 | <div class="ipt-wrap" :class="{'readonly':readonly}"> |
6 | <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" class="ipt" type="type" readonly="readonly" :placeholder="placeholder || $t('form.datePicker.datePlaceholder')"> | 6 | <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" @click="showCalendar(true)" class="ipt" type="type" :readonly="readonly" :placeholder="placeholder || $t('form.datePicker.datePlaceholder')"> |
7 | </div> | 7 | </div> |
8 | <div v-if="visible" class="date-wrap"> | 8 | <div v-if="visible" class="date-wrap"> |
9 | <div class="calendar-wrap"> | 9 | <div class="calendar-wrap"> | ... | ... |
-
Please register or sign in to post a comment