42756bf9 by simon

日期选择可手动输入

1 parent 605fa8d5
...@@ -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">
......