clearable与placeholder

packages/components/DateFiled/index.vue

@@ -9,10 +9,13 @@
       <section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
       <section :style="{'flex':proportion[1] }" class="date-content">
         <input
-          v-model="value" :disabled="disabled" type="text" readonly
+          v-model="value" :disabled="disabled" :placeholder="dataPlaceholder" type="text"
+          readonly
           @click="showDate">
         <!--<slot name="icon"/>-->
-        <img v-if="showIcon" :src="selectIcon" class="icon" >
+        <i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
+        <!--<slot name="icon"/>-->
+        <img v-if="!showClean" :src="selectIcon" class="icon" >
       </section>
     </section>
   </section>
@@ -26,6 +29,14 @@ export default {
       default: null,
       type: String | Date,
     },
+    placeholder: {
+      type: String,
+      default: null,
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
     format: {
       default: 'YYYY-MM-DD',
       type: String,
@@ -89,8 +100,24 @@ export default {
     selectIcon () {
       return this.rightIcon ? this.rightIcon : this.Icon
     },
+    dataPlaceholder () {
+      return this.placeholder ? this.placeholder : '请输入' + this.label
+    },
+    showClean () {
+      let vm = this
+      if (vm.clearable && vm.value) {
+        return true
+      } else {
+        return !vm.showIcon
+      }
+    },
+
   },
   methods: {
+    cleanValue () {
+      this.$emit('input', null)
+      this.$emit('clean', null)
+    },
     showDate () {
       let vm = this
       if (!vm.disabled) {

packages/components/Select/SelectFiled.vue

@@ -9,11 +9,13 @@
       <section :class="{'required':required}" :style="{'flex':proportion[0] }" class="name">{{ label }}</section>
       <section :style="{'flex':proportion[1] }" class="select-content">
         <input
-          v-model="codeName" :disabled="disabled" type="text" readonly
+          v-model="codeName" :disabled="disabled" :placeholder="selectPlaceholder" type="text"
+          readonly
           @click="showSelect">
         <input v-model="value" type="text" hidden>
+        <i v-if="showClean" class="icon ion-close-circled" @click="cleanValue"/>
         <!--<slot name="icon"/>-->
-        <img v-if="showIcon" :src="selectIcon" class="icon" >
+        <img v-if="!showClean" :src="selectIcon" class="icon" >
       </section>
     </section>
   </section>
@@ -28,6 +30,14 @@ export default {
       default: null,
       type: Number | String,
     },
+    placeholder: {
+      type: String,
+      default: null,
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
     dataArray: {
       type: Array,
       default: () => [],
@@ -118,6 +128,14 @@ export default {
       }
       return name
     },
+    showClean () {
+      let vm = this
+      if (vm.clearable && vm.value) {
+        return true
+      } else {
+        return !vm.showIcon
+      }
+    },
     minHeight () {
       if (this.$parent.itemHeight) {
         return this.$parent.itemHeight + 'px'
@@ -128,6 +146,9 @@ export default {
     selectIcon () {
       return this.rightIcon ? this.rightIcon : this.Icon
     },
+    selectPlaceholder () {
+      return this.placeholder ? this.placeholder : '请选择' + this.label
+    },
   },
   methods: {
     selectCall (v1, v2, v3) {
@@ -140,6 +161,10 @@ export default {
         this.$emit('onSelect', v1, v2)
       }
     },
+    cleanValue () {
+      this.$emit('input', null)
+      this.$emit('clean', null)
+    },
     showSelect () {
       let vm = this
       if (!vm.disabled) {

packages/components/Select/select.vue

@@ -59,7 +59,7 @@
     background-color: transparent;
 
     &.active {
-      background-color: rgba(0, 0, 0, 0.2);
+      background-color: rgba(0, 0, 0, 0.5);
     }
 
     .show-select-wrapper {
@@ -69,7 +69,7 @@
       transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
       bottom: 0 !important;
       position: absolute !important;
-      max-height: 50% !important;
+      max-height: 40% !important;
       width: 100%;
       left: 0;
       top: auto;

src/pages/home.vue

@@ -98,12 +98,13 @@
           <input slot="content" type="text">
         </item>
         <SelectFiled
-          v-model="sex" :dataArray="sexList" :required="true" label="性别"
+          v-model="sex"
+          :dataArray="sexList" required clearable label="性别"
           value-key="code_value"
           value-name="code_value_name" @onSelect="select"/>
       </list-item>
       <DateFiled
-        v-model="nowDate" :required="true" label="时间"
+        v-model="nowDate" required label="时间" clearable
         @onSelect="select"/>
 
         <!--      <h-range
@@ -151,10 +152,10 @@ export default {
       rangeBarHeight: 1,
       rangeHandleHeight: 20,
 
-      sex: 0,
-      sexList: [{'code_value': 0, 'code_value_name': '女'}, {'code_value': 0, 'code_value_name': '女'},{'code_value': 0, 'code_value_name': '女'}],
+      sex: null,
+      sexList: [{'code_value': 0, 'code_value_name': '女'}, {'code_value': 0, 'code_value_name': '女'}, {'code_value': 0, 'code_value_name': '女'}],
 
-      nowDate: '2020-12-25',
+      nowDate: null,
     }
   },
   watch: {},