添加clickoutside

package-lock.json

@@ -8560,6 +8560,15 @@
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "http://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz",
+      "integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "http://registry.npm.taobao.org/string-width/download/string-width-1.0.2.tgz",
@@ -8571,15 +8580,6 @@
         "strip-ansi": "3.0.1"
       }
     },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "http://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz",
-      "integrity": "sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.2"
-      }
-    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "http://registry.npm.taobao.org/strip-ansi/download/strip-ansi-3.0.1.tgz",
@@ -9256,6 +9256,12 @@
         "indexof": "0.0.1"
       }
     },
+    "vue-clickoutside": {
+      "version": "0.2.0",
+      "resolved": "http://registry.npm.taobao.org/vue-clickoutside/download/vue-clickoutside-0.2.0.tgz",
+      "integrity": "sha1-oPFoQN1PKfAZvQnQckfJmlgeSOM=",
+      "dev": true
+    },
     "vue-hot-reload-api": {
       "version": "2.3.3",
       "resolved": "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.3.tgz",

package.json

@@ -63,6 +63,7 @@
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "url-loader": "^0.5.8",
+    "vue-clickoutside": "^0.2.0",
     "vue-loader": "^12.1.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.3.3",

src/components/schedule_list/scheduleHome.vue

@@ -19,11 +19,11 @@
           v-for="item in result.list"
           :item="item"
           :key="item.id">
-          <span slot="opearate" class="obear-opearate-button">
-            <el-button type="primary" size="mini" @click="leaveMessageSch(item)"><i class="fa fa-commenting"></i>留言</el-button>
+          <span slot="opearate" class="obear-opearate-button" >
+            <el-button type="primary" size="mini" @click.prevent.stop="leaveMessageSch(item)"><i class="fa fa-commenting"></i>留言</el-button>
             <el-button type="primary" size="mini"><i class="fa fa-calendar-check-o"></i>汇报</el-button>
-            <el-button type="primary" size="mini" @click="editSch(item)"><i class="fa fa-edit animated"></i>编辑</el-button>
-            <el-button type="primary" size="mini" @click="deleteSch(item.id)"><i class="fa fa-trash-o animated-hove"></i>删除</el-button>
+            <el-button type="primary" size="mini" @click.prevent.stop="editSch(item)"><i class="fa fa-edit animated"></i>编辑</el-button>
+            <el-button type="primary" size="mini" @click.prevent.stop="deleteSch(item.id)"><i class="fa fa-trash-o animated-hove"></i>删除</el-button>
           </span>
         </ScheduleItem>
         <Pagenation
@@ -31,6 +31,7 @@
           :total="result.pagenation.totalcount">
         </Pagenation>
         <leave-message
+          v-click-outside="lmClose"
           ref="leaveMessage"
           :lmTemplate="lmTemplate"
           :type="9">
@@ -48,6 +49,7 @@ import ScheduleItem from '../common/scheduleItem'
 import ScheduleModal from '../schedule/scheduleModal'
 import LeaveMessage from '../common/leaveMessage'
 import Pagenation from './schedulePagenation'
+import clickOutside from '@/lib/bind'
 import {
   requestAPI,
   api
@@ -64,6 +66,10 @@ export default {
     Pagenation
   },
 
+  directives: {
+    clickOutside
+  },
+
   data () {
     return {
       lmTemplate: [
@@ -151,6 +157,11 @@ export default {
       this.$refs.leaveMessage.isShow(item)
     },
 
+    lmClose () {
+      console.log(1)
+      this.$refs.leaveMessage.isClose()
+    },
+
     addSch () {
       this.$refs.scheduleModal.show()
     },

src/lib/bind.js

+export default {
+  bind: function (el, binding, vNode) {
+    el.__vueClickOutside__ = event => {
+      if (!el.contains(event.target)) {
+        // call method provided in v-click-outside value
+        vNode.context[binding.expression](event)
+        event.stopPropagation()
+      }
+    }
+    document.body.addEventListener('click', el.__vueClickOutside__)
+  },
+  unbind: function (el, binding, vNode) {
+    // Remove Event Listeners
+    document.removeEventListener('click', el.__vueClickOutside__)
+    el.__vueClickOutside__ = null
+  }
+}