日期选择可手动输入
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