fix: 增加在线文档

src/packages/__VUE/actionsheet/demo.vue

@@ -1,19 +1,11 @@
 <template>
   <div class="demo">
     <h2>基本用法</h2>
-    <nut-cell
-      :show-icon="true"
-      :isLink="true"
-      @click="switchActionSheet('isVisible1')"
-    >
+    <nut-cell :show-icon="true" :isLink="true" @click="switchActionSheet('isVisible1')">
       <span><label>基础用法</label></span>
       <div class="selected-option" v-html="state.val1"></div>
     </nut-cell>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="switchActionSheet('isVisible2')"
-    >
+    <nut-cell :showIcon="true" :isLink="true" @click="switchActionSheet('isVisible2')">
       <span><label>展示取消按钮</label></span>
       <div class="selected-option" v-html="state.val2"></div>
     </nut-cell>
@@ -25,14 +17,11 @@
 
     <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
       <span><label>选项状态</label></span>
+      <div class="selected-option" v-html="state.val4"></div>
     </nut-cell>
 
     <!-- demo 基础用法 -->
-    <nut-actionsheet
-      v-model:visible="state.isVisible1"
-      :menu-items="menuItemsOne"
-      @choose="chooseItem"
-    >
+    <nut-actionsheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem">
     </nut-actionsheet>
     <!-- demo(带取消按钮） -->
     <nut-actionsheet
@@ -56,6 +45,7 @@
       v-model:visible="state.isVisible4"
       cancel-txt="取消"
       :menu-items="menuItemsThree"
+      @choose="chooseItemFour"
       :choose-tag-value="state.chooseTagValue"
     ></nut-actionsheet>
   </div>
@@ -116,9 +106,7 @@ export default {
         disable: true
       }
     ];
-    const switchActionSheet = (
-      param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4'
-    ) => {
+    const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4') => {
       state[param] = !state[param];
     };
 
@@ -133,6 +121,9 @@ export default {
     function chooseItemThree(itemParams: Item) {
       state.val3 = itemParams.name;
     }
+    function chooseItemFour(itemParams: Item) {
+      state.val4 = itemParams.name;
+    }
 
     return {
       state,
@@ -142,6 +133,7 @@ export default {
       chooseItem,
       chooseItemTwo,
       chooseItemThree,
+      chooseItemFour,
       switchActionSheet
     };
   }

src/packages/__VUE/actionsheet/doc.md

@@ -20,89 +20,246 @@ app.use(ActionSheet).use(Popup);
 ## 基本用法
 
 默认
+:::demo
 ``` html
-<div @click="switchActionSheet">
-   <span><label>基础用法</label></span>
-   <div class="selected-option" v-html="state.val"></div>
-</div>
-<nut-actionsheet
-  v-model:visible="state.isVisible"
-  :menu-items="menuItems"
-  @choose="chooseItem"
-></nut-actionsheet>
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+     
+    >
+      <span><label>基础用法</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+      {
+        name: '选项一'
+      },
+      {
+        name: '选项二'
+      },
+      {
+        name: '选项三'
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
 ```
+:::
 
 ## 展示取消按钮
-```html
-<div @click="switchActionSheet">
-  <span><label>展示取消按钮</label></span>
-  <div class="selected-option" v-html="state.val"></div>
-</div>
-<nut-actionsheet v-model:visible="isVisible" 
-  @close="switchActionSheet"
-  :menu-items="menuItems"
-  @choose="chooseItem"
-  cancel-txt="取消"
-></nut-actionsheet>
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+    >
+      <span><label>基础用法</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      cancel-txt="取消"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+      {
+        name: '选项一'
+      },
+      {
+        name: '选项二'
+      },
+      {
+        name: '选项三'
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
 ```
+:::
 ## 展示描述信息
-```html
-<div @click="switchActionSheet">
-   <span><label>展示取消按钮</label></span>
-    <div class="selected-option" v-html="state.val"></div>
-</div>
- <nut-actionsheet v-model:visible="isVisible" 
-    @close="switchActionSheet"
-    description="state.desc"
-    :menu-items="menuItems"
-    @choose="chooseItem"
-    cancel-txt="取消"
-></nut-actionsheet>
-```
-
-## 选项状态
-```html
-<div @click="switchActionSheet">
-    <span class="title"><label>性别</label></span>
-    <span class="selected-option" v-html="sex"></span>
-</div>
-<nut-actionsheet
-@close="switchActionSheet"
-  v-model:visible="state.isVisible4"
-  cancel-txt="取消"
-  :menu-items="menuItemsThree"
-></nut-actionsheet>
-```
-
-```javascript
-setup() {
-    const state = reactive({
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+    >
+      <span><label>基础用法</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      cancel-txt="取消"
+      description="这是一段展示信息"
+      :menu-items="menuItems"
+      @choose="chooseItem"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
       isVisible: false,
-      value: '',
-      desc: '这是一段描述信息'
+      val: '',
     });
-    const menuItems = [
+     const menuItems = [
       {
-        name: '选项一',
-        value: 0
+        name: '选项一'
       },
       {
-        name: '选项二',
-        value: 1
+        name: '选项二'
       },
       {
         name: '选项三',
-        value: 2
+        subname: '描述信息'
       }
     ];
-     const switchActionSheet = () => {
-       state.isVisible = !state.isVisible
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
     };
-    const chooseItem = (item,index) => {
-      console.log(item,index);
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
     };
+  }
+}
+ </script>
+```
+:::
+
+## 选项状态
 
+:::demo
+``` html
+<template>
+  <div>
+  <nut-cell
+      :show-icon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible')"
+     
+    >
+      <span><label>基础用法</label></span>
+      <div v-html="state.val"></div>
+    </nut-cell>
+     <!-- demo 基础用法 -->
+    <nut-actionsheet
+      v-model:visible="state.isVisible"
+      :menu-items="menuItems"
+      choose-tag-value="着色选项"
+      @choose="chooseItem"
+       cancel-txt="取消"
+    >
+    </nut-actionsheet>
+    </div>
+</template>
+<script>
+import { reactive } from 'vue';
+export default {
+  setup() {
+  const state = reactive({
+      isVisible: false,
+      val: '',
+    });
+     const menuItems = [
+      {
+        name: '着色选项'
+      },
+      {
+        name: '禁用选项',
+        disable: true
+      }
+    ];
+    const switchActionSheet = ( param ) => {
+      state.isVisible = !state.isVisible;
+    };
+      const chooseItem = (itemParams) => {
+      state.val = itemParams.name;
+    };
+    return {
+      state,
+      switchActionSheet,
+      menuItems,
+      chooseItem,
+    };
+  }
+}
+ </script>
 ```
+:::
 
 ## Prop
 

src/packages/__VUE/drag/doc.md

@@ -14,45 +14,79 @@ app.use(Drag);
 ```
 
 ## 基本用法
+:::demo
 ```html
-<nut-drag>
-  <div class="touch-dom">可点击，可拖拽</div>
-</nut-drag>
+<template>
+ <nut-drag>
+      <nut-button type="primary">触摸移动</nut-button>
+  </nut-drag>
+</template>
 ```
+:::
 ## 限制拖拽方向
+:::demo
 ```html
-<nut-drag direction="x">
-  <div class="touch-dom">只能在X轴拖动</div>
-</nut-drag>
+<template>
+  <nut-drag direction="x" :style="{ top: '200px', left: '8px' }">
+      <nut-button type="primary">只能X轴拖拽</nut-button>
+  </nut-drag>
+  </template>
 ```
+:::
 ## 自动吸边
+:::demo
 ```html
-<nut-drag direction="x" :attract="true">
-  <div class="touch-dom">拖动我</div>
-</nut-drag>
+<template>
+  <nut-drag
+      direction="x"
+      :attract="true"
+    >
+      <nut-button type="primary">拖动我</nut-button>
+    </nut-drag>
+    </template>
 ```
+:::
 ## 限制拖拽边界
+:::demo
 ```html
-<nut-drag
-  :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
-  :attract="true"
->
-  <div class="touch-dom">拖动我</div>
-</nut-drag>
+<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">限制拖拽边界</nut-button>
+    </nut-drag>
+</template>
 <script>
+  export default {
  setup() {
     function right() {
       return document.documentElement.clientWidth - 300 - 9;
     }
     function bottom() {
-      return document.documentElement.clientHeight - 559;
+      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