add vue-click-outside

package-lock.json

@@ -10256,6 +10256,11 @@
       "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.5.16.tgz",
       "integrity": "sha512-/ffmsiVuPC8PsWcFkZngdpas19ABm5mh2wA7iDqcltyCTwlgZjHGeJYOXkBMo422iPwIcviOtrTCUpSfXmToLQ=="
     },
+    "vue-click-outside": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.0.7.tgz",
+      "integrity": "sha1-zdKxYF48SUR4TheU6uShKg9wC9Y="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz",
@@ -10285,7 +10290,7 @@
       "dependencies": {
         "postcss": {
           "version": "6.0.23",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "resolved": "http://registry.npm.taobao.org/postcss/download/postcss-6.0.23.tgz",
           "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
           "dev": true,
           "requires": {

package.json

@@ -14,6 +14,7 @@
     "element-ui": "^2.4.1",
     "md5": "^2.2.1",
     "vue": "^2.5.2",
+    "vue-click-outside": "^1.0.7",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {

src/views/overview.vue

@@ -27,7 +27,7 @@
     </ul>
     <div class="filter-box clearfix">
       <span class="subtitle">{{subtitle}}</span>
-      <div class="select-bar clearfix" v-show="!robotStatus">
+      <div ref="selectBar" class="select-bar clearfix" v-show="!robotStatus" v-click-outside="clickFoldExchange">
         <div v-show="showWebFilter" class="select-bar-content exchange" :class="{'unfold' : !foldExchange}">
           <span class="title">交易所</span>
           <div class="fr">
@@ -80,7 +80,7 @@
         </el-input>
       </div>
     </div>
-    <ul class="robots-box">
+    <ul class="robots-box clearfix">
       <li v-for="(item,index) in robotList" :key="item.tag"
           :class="[(item.base_status==='abnormal' ||item.coin_status==='abnormal' || item.profit_status === 'abnormal') ? 'abnormal' : item.status || 'normal']">
         <div class="operations">
@@ -136,6 +136,7 @@
   import Bus from '../assets/js/bus'
   import axios from 'axios';
   import ApiConfig from "../config/api-config";
+  import ClickOutside from 'vue-click-outside';
   export default {
     data() {
       return {
@@ -178,6 +179,15 @@
       };
     },
     props: ['platInfo'],
+    mounted () {
+      // prevent click outside event with popupItem.
+      this.popupItem = this.$refs.selectBar
+    },
+
+    // do not forget this section
+    directives: {
+      ClickOutside
+    },
     created() {
       this.checkedWebs = this.webs = this.webs.length === 0 && sessionStorage.getItem('webs') ? JSON.parse(sessionStorage.getItem('webs')) : this.webs;
       this.checkedCurrencies = this.currencies = this.currencies.length === 0 && sessionStorage.getItem('currencies') ? JSON.parse(sessionStorage.getItem('currencies')) : this.currencies;
@@ -436,6 +446,7 @@
             this.foldExchange1 = !this.foldExchange1;
             break;
           default:
+            this.foldExchange = this.foldExchange0 = this.foldExchange1 = true;
             break
         }
       },
@@ -562,6 +573,7 @@
   }
   .select-bar {
     float: right;
+    height: 60px;
     .select-bar-content {
       float: left;
       width: 260px;