自定义选人组件可以清除

fhKeeper/formulahousekeeper/timesheet/src/components/select.vue

@@ -1,11 +1,16 @@
 <template>
   <div tabindex="0" @blur="selectClihide()" style="display: inline-block;">  
-    <div :style="'width:' + selectWidth + 'px;height:' + selectHeight + 'px'" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'">
-        <div :class="selectName == $t('defaultText.pleaseChoose') ? 'selecttex selecttexXuan' : 'selecttex'">
-            <!-- <ww-open-data type='userName' :openid='selectName'></ww-open-data> -->
-            {{selectName}}
+    <!-- <div :style="'width:' + selectWidth + 'px;height:' + selectHeight + 'px'" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'"> -->
+    <div :class="disabled ? 'disabledTrue' : 'disabledFalse'" @mouseenter="moveIonDiv" @mouseleave="outIonDiv">
+        <div :style="`width:${selectWidth}px;height:${selectHeight}px`" :class="classDiv ? 'select selectDiv' : 'select'" @click="selectCli" :ref="disabled ? '' : 'selectDiv'">
+            <div :style="'line-height: '+selectHeight+'px'" :class="selectName == $t('defaultText.pleaseChoose') ? 'selecttex selecttexXuan' : 'selecttex'">
+                <!-- <ww-open-data type='userName' :openid='selectName'></ww-open-data> -->
+                {{selectName}}
+            </div>
+            <i :class=" move ? 'el-icon-arrow-down iostu iostuHover' : 'el-icon-arrow-down iostu'" v-if="!moveIon"></i>
+            <!-- <i v-if="clearable && moveIon" class="el-icon-circle-close"></i> -->
+            <i v-if="moveIon" class="el-icon-circle-close iostu" @click="clearDelete"></i>
         </div>
-        <i class="el-icon-arrow-down iostu"></i>
     </div>
     <transition name="el-zoom-in-top">
       <div v-show="show" style="position: relative;z-index: 99;">
@@ -34,7 +39,7 @@ export default {
             type: Array
         },
         size: {
-            type: String
+            type: String,
         },
         subjectId: {
             type: [String, Number]
@@ -93,6 +98,8 @@ export default {
             optionsOId: '', // 选中人的id
             dailyListObj: null, // 填写日报的数据
             dailyListIndex: null, // 日报点的索引
+            move: false,
+            moveIon: false
         };
     },
     computed: {},
@@ -151,6 +158,7 @@ export default {
         }
         console.log(this.subjectId)
         this.dailyListIndex = this.idx
+        // this.moveIon = JSON.parse(JSON.stringify(this.clearable))
     },
     methods: {
         selectCli() {
@@ -158,6 +166,7 @@ export default {
                 this.$refs.selectDiv.focus()
                 this.classDiv = !this.classDiv
                 this.show = !this.show
+                this.move = !this.move
             }
         },
         selectClihide() {
@@ -165,6 +174,7 @@ export default {
                 this.transitionBoxLiIdx = ''
                 this.show = !this.show
                 this.classDiv = false
+                this.move = false
             }
         },
         liMouseOver(index) {
@@ -191,7 +201,26 @@ export default {
             this.transitionBoxLiIdx = ''
             this.show = !this.show
             this.classDiv = false
+            this.move = false
+        },
+        moveIonDiv() {
+            if(this.clearable) {
+                this.moveIon = true
+            }
         },
+        outIonDiv() {
+            if(this.clearable) {
+                this.moveIon = false
+            }
+        },
+        clearDelete() {
+            this.selectName = this.$t('defaultText.pleaseChoose')
+            let obj = {
+                name: this.$t('defaultText.pleaseChoose'),
+                id: ''
+            }
+            this.liClick(obj)
+        }
     },
     triggerOption(){
 
@@ -207,9 +236,19 @@ export default {
     .selectDiv {
         border-color: #409EFF !important;
     }
+    .disabledTrue {
+        background: #F5F7FA !important;
+        border-radius: 4px;
+        cursor: not-allowed !important;
+        position: relative;
+    }
+    .disabledTrue {
+        background: #FFF;
+        border-radius: 4px;
+    }
     .select {
         -webkit-appearance: none;
-        background-color: #FFF;
+        // background-color: #FFF;
         background-image: none;
         border-radius: 4px;
         border: 1px solid #DCDFE6;
@@ -240,6 +279,10 @@ export default {
         margin-top: -4px;
         right: 8px;
         color: #C0C4CC;
+        transition: All 0.2s ease-in-out;
+    }
+    .iostuHover {
+        transform: rotate(-180deg);
     }
     .transitionBox {
         background: #FFF;