feat: publicize doc implemetation

one/docs/demo/badge/dot.vue

@@ -0,0 +1,45 @@
+<template>
+<article>
+  <section>
+    <veui-badge
+      value="Running"
+      type="success"
+    />
+    <veui-badge
+      value="New"
+      type="info"
+    />
+    <veui-badge value="Rejected"/>
+    <veui-badge
+      value="Auditing"
+      type="warning"
+    />
+    <veui-badge
+      value="Expired"
+      type="aux"
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { Badge } from 'veui'
+
+export default {
+  components: {
+    'veui-badge': Badge
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+section {
+  margin-bottom: 1em;
+}
+
+.veui-badge {
+  & + & {
+    margin-left: 30px;
+  }
+}
+</style>

one/docs/demo/badge/number.vue

@@ -0,0 +1,61 @@
+<template>
+<article>
+  <veui-badge
+    :value="count"
+    :max="100"
+  >
+    <veui-button
+      ui="primary"
+      @click="inc"
+    >
+      Add
+    </veui-button>
+  </veui-badge>
+  <veui-button
+    ui="s"
+    @click="reset"
+  >
+    Reset
+  </veui-button>
+</article>
+</template>
+
+<script>
+import { Badge, Button } from 'veui'
+
+const initial = 96
+
+export default {
+  components: {
+    'veui-badge': Badge,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      count: initial
+    }
+  },
+  methods: {
+    inc () {
+      this.count++
+    },
+    reset () {
+      this.count = initial
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-badge {
+  margin-right: 2em;
+}
+</style>
+
+<docs>
+可以使用 `max` 属性，指定可现实数字的最大值，超过则显示为“<var>max</var>+”。
+</docs>
+
+<docs locale="en-US">
+Use the `max` prop to specify the max value can be displayed. Displays “<var>max</var>+” when value is larger than `max`.
+</docs>

one/docs/demo/badge/text.vue

@@ -0,0 +1,58 @@
+<template>
+<article>
+  <veui-badge
+    value="New"
+    type="success"
+  >
+    <veui-button>View</veui-button>
+  </veui-badge>
+  <veui-badge
+    value="New"
+    type="info"
+  >
+    <veui-button>View</veui-button>
+  </veui-badge>
+  <veui-badge value="New">
+    <veui-button>View</veui-button>
+  </veui-badge>
+  <veui-badge
+    value="New"
+    type="warning"
+  >
+    <veui-button>View</veui-button>
+  </veui-badge>
+  <veui-badge
+    value="New"
+    type="aux"
+  >
+    <veui-button>View</veui-button>
+  </veui-badge>
+</article>
+</template>
+
+<script>
+import { Badge, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-badge': Badge,
+    'veui-button': Button
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-badge {
+  & + & {
+    margin-left: 2em;
+  }
+}
+</style>
+
+<docs>
+可以使用 `type` 属性，指定徽标在不同功能状态下的样式。
+</docs>
+
+<docs locale="en-US">
+Use the `type` prop to apply different contextual styles.
+</docs>