下拉栏事件

components/mobile/brand/BrandDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="brand-detail">
+  <div class="brand-detail" @click="checkShowFilter()">
     <div class="brand-logo">
       <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
     </div>
@@ -34,11 +34,13 @@
     <div class="brand-product-list" v-if="activeType=='product'">
       <div class="search-box">
         <div class="kind-selecter">
-          <span @click="showKindList = !showKindList" v-text="selectedKind"></span>
-          <ul v-show="showKindList">
-            <li @click="selectKind({nameCn: '全部分类', id: ''})">全部分类</li>
-            <li v-for="kind in kindList" v-text="kind.nameCn" @click="selectKind(kind)"></li>
-          </ul>
+          <div @mouseenter="isInList = true" @mouseleave="isInList = false">
+            <span @click="showKindList = !showKindList" v-text="selectedKind"></span>
+            <ul v-show="showKindList">
+              <li @click="selectKind({nameCn: '全部分类', id: ''})">全部分类</li>
+              <li v-for="kind in kindList" v-text="kind.nameCn" @click="selectKind(kind)"></li>
+            </ul>
+          </div>
         </div>
         <div class="kind-search">
           <input type="text" v-model="keyword" placeholder="请输入型号">
@@ -70,7 +72,8 @@
           count: 10,
           filter: {}
         },
-        selectedKind: '全部分类'
+        selectedKind: '全部分类',
+        isInList: false
       }
     },
     computed: {
@@ -192,6 +195,11 @@
         } catch (err) {
           this.$store.commit('brandComponent/GET_COMPONENT_FAILURE', err)
         }
+      },
+      checkShowFilter: function () {
+        if (!this.isInList) {
+          this.showKindList = false
+        }
       }
     }
   }
@@ -360,19 +368,22 @@
           position: relative;
           float: left;
           margin-left: .72rem;
-          span {
-            width: 1.64rem;
-            height: .6rem;
-            line-height: .6rem;
-            border: .01rem solid rgb(195,195,195);
-            border-radius: .05rem;
-            font-size: .28rem;
+          div {
             display: inline-block;
-            background: url('/images/mobile/@2x/productDetail/kind-narrow-down@2x.png')no-repeat;
-            padding-right: .15rem;
-            background-position: 1.35rem .25rem;
-            background-size: .14rem .1rem;
-            overflow: hidden;
+            span {
+              width: 1.64rem;
+              height: .6rem;
+              line-height: .6rem;
+              border: .01rem solid rgb(195,195,195);
+              border-radius: .05rem;
+              font-size: .28rem;
+              display: inline-block;
+              background: url('/images/mobile/@2x/productDetail/kind-narrow-down@2x.png')no-repeat;
+              padding-right: .15rem;
+              background-position: 1.35rem .25rem;
+              background-size: .14rem .1rem;
+              overflow: hidden;
+            }
           }
         }
         .kind-search {