Feat: 增加自定义指令测试页面

src/main.js

@@ -8,6 +8,7 @@ import SvgIcon from '@/components/SvgIcon.vue'
 import elTableSticky from '@cell-x/el-table-sticky'
 import vueMinderEditor from 'vue-minder-editor-extended'
 import ElCardCollapse from '@/components/ElCardCollapse.vue'
+import Clickoutside from 'element-ui/src/utils/clickoutside'
 
 // register svg component globally
 Vue.component('SvgIcon', SvgIcon)
@@ -23,6 +24,14 @@ Vue.prototype.$homeRoute = router.options.routes.find(route => route.name === 'h
 Vue.use(elTableSticky)
 Vue.use(vueMinderEditor)
 Vue.component('ElCardCollapse', ElCardCollapse)
+// v-clickoutside 指令，用于点击元素外部触发事件
+Vue.directive('clickoutside', Clickoutside)
+// v-focus 指令，用于元素聚焦
+Vue.directive('focus', {
+  inserted: function (el) {
+    el.focus()
+  }
+})
 
 new Vue({
   router,

src/router.js

@@ -29,6 +29,12 @@ const routes = [
     meta: { description: 'code diff 测试' },
     component: () => import(/* webpackChunkName: "codeDiff" */ '@/views/code-diff'),
   },
+  {
+    path: '/custom-directive',
+    name: 'customDirective',
+    meta: { description: '自定义指令测试' },
+    component: () => import(/* webpackChunkName: "customDirective" */ '@/views/custom-directive'),
+  },
   {
     path: '/fullscreen',
     name: 'fullscreen',

src/views/custom-directive.vue

@@ -0,0 +1,45 @@
+<!-- 自定义指令测试 -->
+<template>
+  <div>
+    <el-button
+      v-clickoutside="clickoutside"
+      v-focus
+      type="primary"
+      @focus.native="focus"
+      @click="click"
+    >
+      点我
+    </el-button>
+    <div>{{ message }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomDirectiveView',
+  data() {
+    return {
+      message: '',
+      firstFocus: true
+    }
+  },
+  methods: {
+    clickoutside() {
+      this.message = '你为什么不点我！😠'
+    },
+    click() {
+      this.message = '你点了我！😄'
+    },
+    focus() {
+      if (this.firstFocus) {
+        this.message = '刚进来就聚焦在我身上！😎'
+        this.firstFocus = false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>