fix(Category): add clear icon

heyui · Mar 31, 2019 · e9d98e7 · e9d98e7
1 parent 4c93874
commit e9d98e7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/src/components/category/category.vue b/src/components/category/category.vue
@@ -1,12 +1,17 @@
 <template>
   <div :class="categoryCls" :disabled="disabled">
     <div class="h-category-show" @click="openPicker">
-      <div v-if="multiple&&objects.length" class="h-category-multiple-tags"><span v-for="obj of objects" :key="obj.key"><span>{{obj.title}}</span><i
-            class="h-icon-close" @click.stop="remove(obj)" v-if="!disabled"></i></span>
+      <div v-if="multiple&&objects.length" class="h-category-multiple-tags">
+        <span v-for="obj of objects" :key="obj.key">
+          <span>{{obj.title}}</span><i class="h-icon-close" @click.stop="remove(obj)" v-if="!disabled"></i>
+        </span>
+      </div>
+      <div v-else-if="!multiple&&object" class="h-category-value-single">
+        <span>{{object.title}}</span>
+        <i class="h-icon-close" v-if="object.title!=null&&!disabled" @mousedown="clear"></i>
       </div>
-      <div v-else-if="!multiple&&object" class="h-category-value-single">{{object.title}}</div>
       <div v-else class="h-category-placeholder">{{showPlaceholder}}</div>
-      <i class="h-icon-down"></i>
+      <!-- <i class="h-icon-down"></i> -->
     </div>
   </div>
 </template>
@@ -117,6 +122,10 @@ export default {
       this.objects.splice(this.objects.indexOf(obj), 1);
       this.setvalue();
     },
+    clear() {
+      this.object = null;
+      this.setvalue();
+    },
     parse() {
       if (this.multiple) {
         let os = [];

diff --git a/themes/components/category.less b/themes/components/category.less
@@ -3,6 +3,17 @@
 .plugin-input(@category-prefix);
 
 .@{category-prefix}{
+
+  &-value-single {
+    >.@{prefix}icon-close{
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+      z-index: 3;
+      color: @gray-color;
+      .text-hover;
+    }
+  }
   &-item{
     font-size: 90%;
     padding: 3px 5px;