报修任务下拉框

src/components/DropdownMenu.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="dropdown-menu" :class="{'toggle_disabled': disabled === true}" ref="elemId">
-    <div v-if="inputed === false" class="fxrow dropdown-menu__item" @click="toggleItem">
-      <span class="dropdown-menu__title" :class="{'dropdown-menu__title_up': up === true,'dropdown-menu__title--active': open === true,'dropdown-menu__title--active_up': up === true && open === true}"><div class="ellipsis chose_T">{{active === '' ? '请选择' : option[active].label}}</div></span>
+    <div v-if="inputed === false" class="dropdown-menu__item dropdown-menu__item_1">
+      <div class="dropdown-menu__title" :class="{'dropdown-menu__title_up': up === true,'dropdown-menu__title--active': open === true,'dropdown-menu__title--active_up': up === true && open === true}" @click="toggleItem">
+        <div class="ellipsis chose_T">{{active === '' ? '请选择' : option[active].label}}</div>
+        <div class="iconfont dropdown_icon"></div>
+      </div>
+      <div v-show="active !== '' && cancleShow === true" class="iconfont error_icon" @click="cancleDropdown"></div>
     </div>
     <div v-if="inputed === true" class="fxrow dropdown-menu__item dropdown-menu__item_2">
       <input
@@ -57,6 +61,10 @@ export default {
     autoHeight: {
       type: Boolean,
       default: false
+    },
+    cancleShow: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -79,6 +87,9 @@ export default {
     },
     handleBlur () {
       this.$emit('handleBlur')
+    },
+    cancleDropdown () {
+      this.$emit('cancleDropdown')
     }
   }
 }
@@ -133,6 +144,8 @@ export default {
   justify-content center
   height inherit
   width 100%
+.dropdown-menu__item_1
+  _fj()
 .dropdown-menu__item_2
   align-items flex-start
 .drop_input
@@ -144,23 +157,24 @@ export default {
   line-height .86rem
 .dropdown-menu__title
   position relative
-  width 100%
-  padding 0 .15rem
+  width calc(100% - .5rem)
+  padding-left .15rem
   color #606266
   font-size .3rem
   line-height .44rem
   width 100%
-  display block
-  &::after
-    position absolute
-    top 50%
-    right .16rem
-    margin-top -.1rem
-    border .06rem solid
-    border-color transparent transparent #606266 #606266
-    transform rotate(-45deg)
-    opacity 0.8
-    content ''
+  _fj()
+  // display block
+  // &::after
+  //   position absolute
+  //   top 50%
+  //   right .16rem
+  //   margin-top -.1rem
+  //   border .06rem solid
+  //   border-color transparent transparent #606266 #606266
+  //   transform rotate(-45deg)
+  //   opacity 0.8
+  //   content ''
 .dropdown-menu__title_2
   line-height .9rem
   max-width 1.4rem
@@ -224,4 +238,15 @@ export default {
   top .9rem
 .bottom
   top .9rem
+.dropdown_icon
+  font-size .25rem
+  color #dcdfe6
+.error_icon
+  width .3rem
+  height .3rem
+  font-size .25rem
+  line-height .3rem
+  color #dcdfe6
+  border .01rem solid #dcdfe6
+  margin-right .15rem
 </style>

src/pages/xinrui/common/SearchRepairTask.vue

@@ -10,8 +10,10 @@
               :option="option"
               :active="active"
               :open="open"
+              :cancleShow="true"
               @toggleItem="toggleItem"
-              @dropdownMenu="dropdownMenu">
+              @dropdownMenu="dropdownMenu"
+              @cancleDropdown="cancleDropdown">
             </dropdown-menu>
           </div>
         </div>
@@ -93,6 +95,9 @@ export default {
       this.active = i + ''
       this.open = false
     },
+    cancleDropdown () {
+      this.active = ''
+    },
     async _deptList () {
       let res = await deptList()
       if (res.code === '1') {