feat: publicize doc implemetation

one/docs/demo/directives/drag/axis.vue

@@ -0,0 +1,51 @@
+<template>
+<article>
+  <div
+    ref="target1"
+    v-drag:target1.translate.x
+    class="target"
+  >
+    水平方向
+  </div>
+  <div
+    ref="target2"
+    v-drag:target2.translate.y
+    class="target"
+  >
+    垂直方向
+  </div>
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+export default {
+  directives: {
+    drag
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+article {
+  height: 200px;
+}
+
+.target {
+  .size(80px);
+  background: @veui-gray-color-6;
+  display: inline-flex;
+  margin-right: 40px;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+}
+
+.container {
+  .size(100%, 300px);
+  background: @veui-gray-color-8;
+}
+</style>

one/docs/demo/directives/drag/base.vue

@@ -0,0 +1,28 @@
+<template>
+<article>
+  <div
+    ref="target"
+    v-drag:target.translate
+    class="target"
+  />
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+export default {
+  directives: {
+    drag
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.target {
+  .size(80px);
+  background: @veui-gray-color-6;
+}
+</style>

one/docs/demo/directives/drag/containment.vue

@@ -0,0 +1,38 @@
+<template>
+<article>
+  <div
+    ref="container"
+    class="container"
+  >
+    <div
+      ref="target"
+      v-drag:target.translate="{containment: 'container'}"
+      class="target"
+    />
+  </div>
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+export default {
+  directives: {
+    drag
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.target {
+  .size(80px);
+  background: @veui-gray-color-6;
+}
+
+.container {
+  .size(100%, 300px);
+  background: @veui-gray-color-8;
+}
+</style>

one/docs/demo/directives/drag/targets.vue

@@ -0,0 +1,48 @@
+<template>
+<article>
+  <div
+    ref="target1"
+    v-drag:target1,target2,target3.translate
+    class="target"
+  >
+    主元素
+  </div>
+  <div
+    ref="target2"
+    class="target"
+  />
+  <div
+    ref="target3"
+    class="target"
+  />
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+export default {
+  directives: {
+    drag
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.target {
+  .size(80px);
+  background: @veui-gray-color-6;
+  display: inline-flex;
+  margin-right: 40px;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+}
+
+.container {
+  .size(100%, 300px);
+  background: @veui-gray-color-8;
+}
+</style>