fix: add drag 翻译

src/packages/__VUE/actionsheet/demo.vue

@@ -81,7 +81,7 @@
 <script lang="ts">
 import { computed, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { createDemo, translate } = createComponent('tabbar');
+const { createDemo, translate } = createComponent('actionsheet');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 useTranslate({
   'zh-CN': {

src/packages/__VUE/drag/demo.vue

@@ -1,34 +1,57 @@
 <template>
   <div class="demo full">
-    <h2>基础用法</h2>
+    <h2>{{ translate('basic') }}</h2>
     <nut-drag :style="{ top: '120px', left: '8px' }">
-      <nut-button type="primary">触摸移动</nut-button>
+      <nut-button type="primary">{{ translate('dragBasic') }}</nut-button>
     </nut-drag>
-    <h2 style="top: 30px; position: relative">限制拖拽方向</h2>
+    <h2 style="top: 30px; position: relative">{{ translate('direction') }}</h2>
     <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
-      <nut-button type="primary">只能X轴拖拽</nut-button>
+      <nut-button type="primary">{{ translate('directionX') }}</nut-button>
     </nut-drag>
     <nut-drag direction="y" :style="{ top: '200px', right: '50px' }">
-      <nut-button type="primary">只能Y轴拖拽</nut-button>
+      <nut-button type="primary">{{ translate('directionY') }}</nut-button>
     </nut-drag>
-    <h2 style="top: 60px; position: relative">自动吸边</h2>
+    <h2 style="top: 60px; position: relative">{{ translate('attract') }}</h2>
     <nut-drag direction="x" :attract="true" :style="{ top: '275px', left: '8px' }">
-      <nut-button type="primary">拖动我</nut-button>
+      <nut-button type="primary">{{ translate('attractText') }}</nut-button>
     </nut-drag>
-    <h2 style="top: 90px; position: relative">限制拖动边界</h2>
+    <h2 style="top: 90px; position: relative">{{ translate('limitBoundaries') }}</h2>
     <div class="drag-boundary"></div>
     <nut-drag
       :boundary="{ top: 361, left: 9, bottom: bottom(), right: right() }"
       :style="{ top: '400px', left: '50px' }"
     >
-      <nut-button type="primary">限制拖拽边界</nut-button>
+      <nut-button type="primary">{{ translate('limitBoundaries') }}</nut-button>
     </nut-drag>
   </div>
 </template>
 
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
-const { createDemo } = createComponent('drag');
+const { createDemo, translate } = createComponent('drag');
+import { useTranslate } from '@/sites/assets/util/useTranslate';
+useTranslate({
+  'zh-CN': {
+    basic: '基本用法',
+    dragBasic: '触摸移动',
+    direction: '限制拖拽方向',
+    directionX: '只能X轴拖动',
+    directionY: '只能Y轴拖动',
+    attract: '自动吸边',
+    attractText: '按钮',
+    limitBoundaries: '限制拖拽边界'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    dragBasic: 'Button',
+    direction: 'Limit Direction',
+    directionX: 'X axis',
+    directionY: 'Y axis',
+    attract: 'Attract',
+    attractText: 'Button',
+    limitBoundaries: 'Limit Boundaries'
+  }
+});
 export default createDemo({
   setup() {
     function right() {
@@ -39,7 +62,8 @@ export default createDemo({
     }
     return {
       right,
-      bottom
+      bottom,
+      translate
     };
   }
 });

src/packages/__VUE/drag/doc.en-US.md

@@ -0,0 +1,97 @@
+# Drag 
+### Intro
+
+Implement draggable arbitrary elements
+
+### Install
+
+``` javascript
+import { createApp } from 'vue';
+import { Drag } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Drag);
+```
+
+## Basic Usage
+:::demo
+```html
+<template>
+ <nut-drag>
+      <nut-button type="primary">Button</nut-button>
+  </nut-drag>
+</template>
+```
+:::
+## Limit Direction
+:::demo
+```html
+<template>
+  <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
+      <nut-button type="primary">Button</nut-button>
+  </nut-drag>
+  </template>
+```
+:::
+## Attract
+:::demo
+```html
+<template>
+  <nut-drag
+      direction="x"
+      :attract="true"
+    >
+      <nut-button type="primary">Button</nut-button>
+    </nut-drag>
+    </template>
+```
+:::
+## Limit Boundaries
+:::demo
+```html
+<template>
+ <div class="drag-boundary"></div>
+    <nut-drag
+      :boundary="{ top: 100, left: 9, bottom: bottom(), right: right() }"
+      :style="{ top: '100px', left: '50px' }"
+    >
+      <nut-button type="primary">Button</nut-button>
+    </nut-drag>
+</template>
+<script>
+  export default {
+ setup() {
+    function right() {
+      return document.documentElement.clientWidth - 300 - 9;
+    }
+    function bottom() {
+      return document.documentElement.clientHeight - 300;
+    }
+    return {
+      right,
+      bottom
+    };
+  }
+  }
+</script>
+
+<style>
+.drag-boundary {
+  position: absolute;
+  top: 100px;
+  left: 8px;
+  width: 300px;
+  height: 200px;
+  border: 1px solid red;
+}
+</style>
+
+```
+:::
+## Prop
+
+| Attribute            | Description               | Type   | Default  |
+| :-------- | :------------------------------------------------ | :------------- | :---------------------------------- |
+| attract   | Whether to enable automatic edge suction  | Boolean        | false                                |
+| direction | The drag direction limit of the dragged element **x**/**y**/**all**| String   | 'all'         |
+| boundary  | The drag boundary of the dragged element   | Object         | {top: 0,left: 0,right: 0,bottom: 0} |