使用el内置clickoutside替代vue-clickaway，修复点击菜单按钮时被捕捉失效

package.json

@@ -40,7 +40,6 @@
     "sortablejs": "^1.12.0",
     "v-fit-columns": "^0.2.0",
     "vue": "^2.6.12",
-    "vue-clickaway": "^2.2.2",
     "vue-infinite-loading": "^2.4.5",
     "vue-waterfall-plugin": "^1.1.0",
     "vuedraggable": "^2.24.3",

src/components/Play.vue

@@ -175,24 +175,24 @@
           </span>
         </div>
         <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
-          <ul v-if="right.type === 'list'" class="list-item"  v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'list'" class="list-item"  v-clickoutside="closeListEvent">
             <li v-if="right.list.length > 0" @click="exportM3u8">导出</li>
             <li v-if="right.list.length === 0">无数据</li>
             <li @click="listItemEvent(j)" :class="video.info.index === j ? 'active' : ''" v-for="(i, j) in right.list" :key="j">{{i | ftName(j)}}</li>
           </ul>
-          <ul v-if="right.type === 'history'" class="list-history"  v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'history'" class="list-history"  v-clickoutside="closeListEvent">
             <li v-if="right.history.length > 0" @click="clearAllHistory">清空</li>
             <li v-if="right.history.length === 0">无数据</li>
             <li @click="historyItemEvent(m)" :class="video.info.id === m.ids ? 'active' : ''" v-for="(m, n) in right.history" :key="n"><span class="title" :title="'【' + m.site + '】' + m.name + ' 第' + (m.index+1) + '集'">【{{m.site}}】{{m.name}} 第{{m.index+1}}集</span><span @click.stop="removeHistoryItem(m)" class="detail-delete">删除</span></li>
           </ul>
-          <ul v-if="right.type === 'shortcut'" class="list-shortcut"  v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'shortcut'" class="list-shortcut"  v-clickoutside="closeListEvent">
             <li v-for="(m, n) in right.shortcut" :key="n"><span class="title">{{m.desc}} -- [ {{m.key}} ]</span></li>
           </ul>
-          <ul v-if="right.type === 'other'" class="list-other" v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'other'" class="list-other" v-clickoutside="closeListEvent">
             <li v-if="right.other.length === 0">无数据</li>
             <li @click="otherItemEvent(m)" v-for="(m, n) in right.other" :key="n"><span class="title">{{m.name}} - [{{m.site.name}}]</span></li>
           </ul>
-          <ul v-if="right.type === 'sources'" class="list-channels" v-on-clickaway="closeListEvent">
+          <ul v-if="right.type === 'sources'" class="list-channels" v-clickoutside="closeListEvent">
             <li v-if="right.sources.length === 0">当前频道已关闭</li>
             <li v-for="(channel, index) in right.sources" :key="index">
               <span @click="playChannel(channel)" class="title">{{ channel.id === video.iptv.id ? channel.name + '[当前]' : channel.name }}</span>
@@ -203,7 +203,7 @@
       </div>
     </transition>
     <transition name="slideX">
-      <div v-if="state.showChannelList" class="list" v-on-clickaway="closeListEvent">
+      <div v-if="state.showChannelList" class="list" v-clickoutside="closeListEvent">
          <div class="list-top">
           <span class="list-top-title">频道列表</span>
           <span class="list-top-close zy-svg" @click="state.showChannelList = false">
@@ -240,7 +240,7 @@ import zy from '../lib/site/tools'
 import Player from 'xgplayer'
 import HlsJsPlayer from 'xgplayer-hls.js'
 import mt from 'mousetrap'
-import { directive as onClickaway } from 'vue-clickaway'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
 import { exec, execFile } from 'child_process'
 
 const { remote, clipboard } = require('electron')
@@ -369,7 +369,7 @@ export default {
     }
   },
   directives: {
-    onClickaway: onClickaway
+    Clickoutside
   },
   computed: {
     view: {
@@ -1040,7 +1040,6 @@ export default {
         this.getOtherSites()
         this.right.currentTime = this.xg.currentTime
       } else {
-        this.state.showChannelList = false
         this.right.type = 'sources'
       }
       this.right.show = true

src/components/Share.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="share" id="share" @click="shareClickEvent" v-on-clickaway="shareClickEvent">
+  <div class="share" id="share" @click="shareClickEvent" v-clickoutside="shareClickEvent">
     <div class="left">
       <img :src="pic" alt="" @load="picLoadEvent">
     </div>
@@ -22,7 +22,7 @@ import { mapMutations } from 'vuex'
 import QrcodeVue from 'qrcode.vue'
 import html2canvas from 'html2canvas'
 import zy from '../lib/site/tools'
-import { directive as onClickaway } from 'vue-clickaway'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
 const { clipboard, nativeImage } = require('electron')
 export default {
   name: 'share',
@@ -58,7 +58,7 @@ export default {
     }
   },
   directives: {
-    onClickaway: onClickaway
+    Clickoutside
   },
   methods: {
     ...mapMutations(['SET_SHARE']),