feat: publicize doc implemetation

one/docs/demo/directives/outside/click.vue

@@ -0,0 +1,54 @@
+<template>
+<article
+  @mouseenter="inDemo = true"
+  @mouseleave="inDemo = false"
+>
+  <div
+    v-outside="handleOutside"
+    class="box"
+  >
+    目标元素 A
+  </div>
+</article>
+</template>
+
+<script>
+import outside from 'veui/directives/outside'
+import toast from 'veui/managers/toast'
+
+export default {
+  directives: {
+    outside
+  },
+  data () {
+    return {
+      timer: null,
+      inDemo: false
+    }
+  },
+  methods: {
+    handleOutside () {
+      if (this.inDemo) {
+        toast.info('点击了目标元素 A 外部。')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.box {
+  .size(500px, 100px);
+  background: @veui-gray-color-8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+article {
+  margin: -30px;
+  padding: 30px;
+}
+</style>

one/docs/demo/directives/outside/hover-with-delay.vue

@@ -0,0 +1,64 @@
+<template>
+<article>
+  <div
+    v-outside:box2,box3.hover.1000="handleOutside"
+    class="box1"
+  >
+    目标元素 C
+  </div>
+  <div
+    ref="box2"
+    class="box2"
+  >
+    目标元素 D
+  </div>
+  <div
+    ref="box3"
+    class="box3"
+  >
+    目标元素 E
+  </div>
+</article>
+</template>
+
+<script>
+import outside from 'veui/directives/outside'
+import toast from 'veui/managers/toast'
+
+export default {
+  directives: {
+    outside
+  },
+  data () {
+    return {
+      consoleVisible: false,
+      timer: null
+    }
+  },
+  methods: {
+    handleOutside () {
+      toast.info('在 1000ms 内未移回目标元素 C、D、E，触发外部事件。')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.box1,
+.box2,
+.box3 {
+  .size(200px, 100px);
+  background: @veui-gray-color-8;
+  margin-right: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+article {
+  margin: -30px;
+  padding: 30px;
+}
+</style>

one/docs/demo/directives/outside/hover.vue

@@ -0,0 +1,49 @@
+<template>
+<article>
+  <div
+    v-outside.hover="handleOutside"
+    class="box"
+  >
+    目标元素 B
+  </div>
+</article>
+</template>
+
+<script>
+import outside from 'veui/directives/outside'
+import toast from 'veui/managers/toast'
+
+export default {
+  directives: {
+    outside
+  },
+  data () {
+    return {
+      consoleVisible: false,
+      timer: null
+    }
+  },
+  methods: {
+    handleOutside () {
+      toast.info('鼠标移到了目标元素B外部。')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.box {
+  .size(500px, 100px);
+  background: @veui-gray-color-8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+article {
+  margin: -30px;
+  padding: 30px;
+}
+</style>