upd: doc && demo

src/config.json

@@ -96,6 +96,7 @@
         {
           "name": "Collapse",
           "taro": true,
+          "tarodoc": true,
           "sort": 2,
           "cName": "折叠面板",
           "type": "component",
@@ -148,6 +149,8 @@
       "packages": [
         {
           "name": "BackTop",
+          "taro": true,
+          "tarodoc": true,
           "sort": "1",
           "cName": "返回顶部",
           "type": "component",
@@ -158,6 +161,7 @@
         {
           "name": "ActionSheet",
           "taro": true,
+          "tarodoc": true,
           "sort": "1",
           "cName": "动作面板",
           "type": "component",
@@ -167,6 +171,8 @@
         },
         {
           "name": "Toast",
+          "taro": true,
+          "tarodoc": true,
           "sort": "1",
           "cName": "吐司",
           "type": "methods",
@@ -178,6 +184,7 @@
           "version": "3.0.0",
           "name": "Notify",
           "taro": false,
+          "tarodoc": true,
           "type": "methods",
           "cName": "消息通知",
           "desc": "在页面顶部展示消息提示，支持函数调用和组件调用两种方式",
@@ -189,6 +196,7 @@
           "version": "3.0.0",
           "name": "Picker",
           "taro": true,
+          "tarodoc": true,
           "type": "component",
           "cName": "选择器",
           "desc": "提供多个选型集合供用户选择,支持单列选择和多列级联,通常与弹出层配合使用",
@@ -223,6 +231,7 @@
         {
           "name": "Cell",
           "taro": true,
+          "tarodoc": true,
           "sort": 1,
           "cName": "单元格组件",
           "type": "component",
@@ -242,6 +251,7 @@
         {
           "name": "Uploader",
           "taro": true,
+          "tarodoc": true,
           "sort": 2,
           "cName": "上传组件",
           "type": "component",
@@ -252,6 +262,7 @@
         {
           "name": "Icon",
           "taro": true,
+          "tarodoc": true,
           "sort": 3,
           "cName": "图标组件",
           "type": "component",
@@ -262,6 +273,7 @@
         {
           "name": "Price",
           "taro": true,
+          "tarodoc": true,
           "sort": 4,
           "cName": "价格组件",
           "type": "component",
@@ -282,6 +294,7 @@
         {
           "name": "Swiper",
           "taro": true,
+          "tarodoc": true,
           "sort": 6,
           "cName": "轮播",
           "type": "component",
@@ -301,6 +314,7 @@
         {
           "name": "Avatar",
           "taro": true,
+          "tarodoc": true,
           "sort": 7,
           "cName": "头像",
           "type": "component",
@@ -311,6 +325,7 @@
         {
           "name": "Popup",
           "taro": true,
+          "tarodoc": true,
           "sort": 8,
           "cName": "弹出层",
           "type": "component",
@@ -322,6 +337,7 @@
         {
           "name": "Dialog",
           "taro": true,
+          "tarodoc": true,
           "type": "methods",
           "cName": "对话框",
           "desc": "模态对话框，在浮层中显示，引导用户进行相关操作，支持图片对话框。",
@@ -375,6 +391,7 @@
           "version": "3.0.0",
           "name": "InfiniteLoading",
           "taro": true,
+          "tarodoc": true,
           "type": "component",
           "cName": "滚动加载",
           "desc": "列表滚动到底部自动加载更多数据",
@@ -386,6 +403,7 @@
           "version": "3.0.0",
           "name": "Range",
           "taro": true,
+          "tarodoc": true,
           "type": "component",
           "cName": "区间选择器",
           "desc": "滑动输入条，用于在给定的范围内选择一个值。",
@@ -404,6 +422,8 @@
         },
         {
           "name": "Drag",
+          "taro": true,
+          "tarodoc": true,
           "type": "component",
           "cName": "拖拽",
           "desc": "拖拽组件",
@@ -418,7 +438,7 @@
           "cName": "视频播放器",
           "desc": "视频播放组件",
           "sort": 20,
-          "show": true,
+          "show": false,
           "author": "zy19940510"
         },
         {
@@ -519,6 +539,7 @@
         {
           "name": "InputNumber",
           "taro": true,
+          "tarodoc": true,
           "sort": 1,
           "cName": "数字输入框",
           "type": "component",
@@ -529,6 +550,7 @@
         {
           "name": "Input",
           "taro": true,
+          "tarodoc": true,
           "sort": 2,
           "cName": "输入框",
           "type": "component",
@@ -551,6 +573,7 @@
           "version": "3.0.0",
           "name": "Rate",
           "taro": true,
+          "tarodoc": true,
           "sort": 4,
           "cName": "评分",
           "type": "component",
@@ -561,6 +584,7 @@
         {
           "version": "3.0.0",
           "taro": true,
+          "tarodoc": true,
           "name": "Calendar",
           "type": "component",
           "cName": "日历",
@@ -583,6 +607,7 @@
           "version": "3.0.0",
           "name": "ShortPassword",
           "taro": true,
+          "tarodoc": true,
           "type": "component",
           "cName": "短密码",
           "desc": "短密码组件",
@@ -593,6 +618,7 @@
         {
           "version": "3.0.0",
           "taro": true,
+          "tarodoc": true,
           "name": "TextArea",
           "type": "component",
           "cName": "文本域",
@@ -609,6 +635,7 @@
         {
           "version": "3.0.0",
           "taro": true,
+          "tarodoc": true,
           "name": "Address",
           "type": "component",
           "cName": "地址组件",

src/packages/__VUE/actionsheet/doc.taro.md

@@ -0,0 +1,113 @@
+# ActionSheet 动作面板
+
+从底部弹出的动作菜单面板。
+
+## 基本用法
+
+默认
+``` 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>
+```
+
+## 展示取消按钮
+```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>
+```
+## 展示描述信息
+```html
+<div @click.native="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.native="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({
+      isVisible: false,
+      value: '',
+      desc: '这是一段描述信息'
+    });
+    const menuItems = [
+      {
+        name: '选项一',
+        value: 0
+      },
+      {
+        name: '选项二',
+        value: 1
+      },
+      {
+        name: '选项三',
+        value: 2
+      }
+    ];
+     const switchActionSheet = () => {
+       state.isVisible = !state.isVisible
+    };
+    const chooseItem = (item,index) => {
+      console.log(item,index);
+    };
+
+```
+
+## Prop
+
+| 字段             | 说明                                   | 类型    | 默认值    |
+|------------------|----------------------------------------|---------|-----------|
+| cancel-txt       | 取消文案                               | String  | '取消'    |
+| menu-items       | 列表项                                 | Array   | [ ]       |
+| option-tag       | 设置列表项展示使用参数                 | String  | 'name'    |
+| v-model:visible       | 遮罩层可见                             | Boolean | false     |
+| option-sub-tag   | 设置列表项描述展示使用参数             | String  | 'subname' |
+| choose-tag-value | 设置选中项的值，和'option-tag'的值对应 | String  | ''        |
+| title            | 设置列表项标题                         | String  | ''        |
+| description      | 设置列表项副标题/描述                  | String  | ''        |
+| color            | 高亮颜色                               | String  | '#ee0a24' |
+| close-abled      | 遮罩层是否可关闭                       | Boolean | true      |
+
+
+## Event
+
+| 字段   | 说明               | 回调参数                          |
+|--------|--------------------|-----------------------------------|
+| choose | 选择之后触发       | 选中列表项item, 选中的索引值index |
+| cancel | 点击取消文案时触发 | 无                                |

src/packages/__VUE/address/doc.taro.md

@@ -0,0 +1,416 @@
+#  Address组件
+
+### 介绍
+
+按需加载请加载对应依赖组件 Icon Popup
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Address, Icon, Popup } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Address);
+app.use(Icon);
+app.use(Popup);
+
+```
+
+## 代码演示
+
+### 选择自定义地址
+
+```html
+<nut-cell title="选择地址" :desc="text" is-link @click="showAddress"></nut-cell>
+<nut-address
+    v-model:visible="showPopup"
+    :province="province"
+    :city="city"
+    :country="country"
+    :town="town"
+    @change="onChange"
+    @close="close"
+    custom-address-title="请选择所在地区"
+></nut-address>
+```
+```javascript
+setup() {
+    const showPopup = ref(false);
+    const address = reactive({
+      province:[
+        { id: 1, name: '北京' },
+        { id: 2, name: '广西' },
+        { id: 3, name: '江西' },
+        { id: 4, name: '四川' }
+      ],
+      city:[
+        { id: 7, name: '朝阳区' },
+        { id: 8, name: '崇文区' },
+        { id: 9, name: '昌平区' },
+        { id: 6, name: '石景山区' }
+      ],
+      country:[
+        { id: 3, name: '八里庄街道' },
+        { id: 9, name: '北苑' },
+        { id: 4, name: '常营乡' }
+      ],
+      town:[]
+    })
+
+    const text = ref('请选择地址')
+
+    const showAddress = () => {
+      showPopup.value = !showPopup.value;
+    };
+
+    const onChange = (cal) => {
+      const name = address[cal.next]
+      if (name.value.length < 1) {
+        showPopup.value = false;
+      }
+    };
+    const close = val => {
+      console.log(val);
+      text.value = val.data.addressStr;
+    };
+
+    return { showPopup, text, showAddress, onChange, close, ...toRefs(address) };
+}
+```
+
+### 选择已有地址
+
+```html
+<nut-cell title="选择地址" :desc="text" is-link @click="showAddressExist"></nut-cell>
+<nut-address
+    v-model:visible="showPopupExist"
+    type="exist"
+    :exist-address="existAddress"
+    @close="close"
+    :is-show-custom-address="false"
+    @selected="selected"
+    exist-address-title="配送至"
+></nut-address>
+```
+```javascript
+setup() {
+    const showPopupExist = ref(false);
+    const existAddress = ref([
+      {
+        id: 1,
+        addressDetail: 'th ',
+        cityName: '石景山区',
+        countyName: '城区',
+        provinceName: '北京',
+        selectedAddress: true,
+        townName: ''
+      },{
+        id: 2,
+        addressDetail: '12_ ',
+        cityName: '电饭锅',
+        countyName: '扶绥县',
+        provinceName: '北京',
+        selectedAddress: false,
+        townName: ''
+      },{
+        id: 3,
+        addressDetail: '发大水比 ',
+        cityName: '放到',
+        countyName: '广宁街道',
+        provinceName: '钓鱼岛全区',
+        selectedAddress: false,
+        townName: ''
+      },{
+        id: 4,
+        addressDetail: '还是想吧百度吧 ',
+        cityName: '研发',
+        countyName: '八里庄街道',
+        provinceName: '北京',
+        selectedAddress: false,
+        townName: ''
+      }
+    ]);
+
+    const text = ref('请选择地址')
+
+    const showAddressExist = () => {
+      showPopupExist.value = true;
+    };
+
+    const close = val => {
+      if (val.type == 'exist') {
+        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
+        text.value = provinceName + cityName + countyName + townName + addressDetail;
+      } else {
+        text.value = val.data.addressStr;
+      }
+    };
+
+    const selected = (prevExistAdd, nowExistAdd, arr) => {
+      console.log(prevExistAdd);
+      console.log(nowExistAdd);
+    };
+
+    return { showPopupExist, existAddress, showAddressExist, text, close, selected };
+}
+```
+### 自定义图标
+
+```html
+<nut-cell title="选择地址" :desc="text" is-link @click="showCustomImg"></nut-cell>
+<nut-address
+    v-model:visible="showPopupCustomImg"
+    type="exist"
+    :existAddress="existAddress"
+    @close="close"
+    :is-show-custom-address="false"
+    @selected="selected3"
+    :default-icon="defaultIcon"
+    :selected-icon="selectedIcon"
+    :close-btn-icon="closeBtnIcon"
+></nut-address>
+```
+```javascript
+setup() {
+    const showPopupCustomImg = ref(false);
+    const icon = reactive({
+      selectedIcon: 'heart-fill',
+      defaultIcon: 'heart1',
+      closeBtnIcon: 'close',
+      backBtnIcon: 'left'
+    });
+    const existAddress = ref([
+      {
+        id: 1,
+        addressDetail: 'th ',
+        cityName: '石景山区',
+        countyName: '城区',
+        provinceName: '北京',
+        selectedAddress: true,
+        townName: ''
+      },{
+        id: 2,
+        addressDetail: '12_ ',
+        cityName: '电饭锅',
+        countyName: '扶绥县',
+        provinceName: '北京',
+        selectedAddress: false,
+        townName: ''
+      },{
+        id: 3,
+        addressDetail: '发大水比 ',
+        cityName: '放到',
+        countyName: '广宁街道',
+        provinceName: '钓鱼岛全区',
+        selectedAddress: false,
+        townName: ''
+      },{
+        id: 4,
+        addressDetail: '还是想吧百度吧 ',
+        cityName: '研发',
+        countyName: '八里庄街道',
+        provinceName: '北京',
+        selectedAddress: false,
+        townName: ''
+      }
+    ]);
+
+    const text = ref('请选择地址')
+
+    const showCustomImg = () => {
+      showPopupCustomImg.value = true;
+    };
+
+    const close = val => {
+      if (val.type == 'exist') {
+        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
+        text.value = provinceName + cityName + countyName + townName + addressDetail;
+      } else {
+        text.value = val.data.addressStr;
+      }
+    };
+
+    const selected = (prevExistAdd, nowExistAdd, arr) => {
+      console.log(prevExistAdd);
+      console.log(nowExistAdd);
+    };
+
+    return { showPopupCustomImg, existAddress, text, showCustomImg, close, selected, ...toRefs(icon) };
+}
+```
+### 自定义地址与已有地址切换
+
+```html
+<nut-cell title="选择地址" :desc="text" is-link @click="showAddressOther"></nut-cell>
+<nut-address
+    v-model:visible="showPopupOther"
+    type="exist"
+    :exist-address="existAddress"
+    :province="province"
+    :city="city"
+    :country="country"
+    :town="town"
+    :back-btn-icon="backBtnIcon"
+    @close="close"
+    @selected="selected"
+    custom-and-exist-title="选择其他地址"
+    @switch-module="switchModule"
+    @close-mask="closeMask"
+></nut-address>
+```
+```javascript
+setup() {
+    const showPopupOther = ref(false);
+    const address = reactive({
+      province:[
+        { id: 1, name: '北京' },
+        { id: 2, name: '广西' },
+        { id: 3, name: '江西' },
+        { id: 4, name: '四川' }
+      ],
+      city:[
+        { id: 7, name: '朝阳区' },
+        { id: 8, name: '崇文区' },
+        { id: 9, name: '昌平区' },
+        { id: 6, name: '石景山区' }
+      ],
+      country:[
+        { id: 3, name: '八里庄街道' },
+        { id: 9, name: '北苑' },
+        { id: 4, name: '常营乡' }
+      ],
+      town:[]
+    })
+    const existAddress = ref([
+      {
+        id: 1,
+        addressDetail: 'th ',
+        cityName: '石景山区',
+        countyName: '城区',
+        provinceName: '北京',
+        selectedAddress: true,
+        townName: ''
+      },
+      {
+        id: 2,
+        addressDetail: '12_ ',
+        cityName: '电饭锅',
+        countyName: '扶绥县',
+        provinceName: '北京',
+        selectedAddress: false,
+        townName: ''
+      },
+      {
+        id: 3,
+        addressDetail: '发大水比 ',
+        cityName: '放到',
+        countyName: '广宁街道',
+        provinceName: '钓鱼岛全区',
+        selectedAddress: false,
+        townName: ''
+      },
+      {
+        id: 4,
+        addressDetail: '还是想吧百度吧 ',
+        cityName: '研发',
+        countyName: '八里庄街道',
+        provinceName: '北京',
+        selectedAddress: false,
+        townName: ''
+      }
+    ]);
+    const backBtnIcon = ref('left')
+    const text = ref('请选择地址')
+
+    const showAddressOther = () => {
+      showPopupOther.value = true;
+    };
+
+    const close = val => {
+      if (val.type == 'exist') {
+        const {provinceName,cityName,countyName,townName,addressDetail} = val.data
+        text.value = provinceName + cityName + countyName + townName + addressDetail;
+      } else {
+        text.value = val.data.addressStr;
+      }
+    };
+
+    const selected = (prevExistAdd, nowExistAdd, arr) => {
+      console.log(prevExistAdd);
+      console.log(nowExistAdd);
+    };
+
+    const switchModule = cal => {
+      if (cal.type == 'custom') {
+        console.log('点击了“选择其他地址”按钮');
+      } else {
+        console.log('点击了自定义地址左上角的返回按钮');
+      }
+    };
+
+    const closeMask = val => {
+      console.log('关闭弹层', val);
+    };
+
+    return { showPopupOther, text, showAddressOther, switchModule, closeMask, close, selected, backBtnIcon, ...toRefs(address) };
+}
+```
+# API
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| v-model:visible | 是否打开地址选择 | String | ''
+| type | 地址选择类型 exist/custom | String | 'custom'
+| province | 省，每个省的对象中，必须有 name 字段 | Array | []
+| city | 市，每个市的对象中，必须有 name 字段 | Array | []
+| country | 县，每个县的对象中，必须有 name 字段 | Array | []
+| town | 乡/镇，每个乡/镇的对象中，必须有 name 字段 | Array | []
+| exist-address | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | Array | []
+| default-icon | 已有地址列表默认图标，type=‘exist’ 时生效 | string | ''
+| selected-icon | 已有地址列表选中图标，type=‘exist’ 时生效 | string | ''
+| close-btn-icon | 自定义关闭弹框按钮图标 | string | -
+| back-btn-icon | 自定义地址与已有地址切换时，自定义返回的按钮图标 | string | -
+| is-show-custom-address | 是否可以切换自定义地址选择，type=‘exist’ 时生效 | Boolean | true
+| custom-address-title  | 自定义地址选择文案，type='custom' 时生效 | string | '请选择所在地区'
+| exist-address-title| 已有地址文案 ，type=‘exist’ 时生效| string | '配送至'
+| custom-and-exist-title| 自定义地址与已有地址切换按钮文案 ，type=‘exist’ 时生效| string | '选择其他地址'
+
+
+  * provinceName 省的名字
+  * cityName 市的名字
+  * countyName 县的名字
+  * townName 乡/镇的名字
+  * addressDetail 具体地址
+  * selectedAddress 字段用于判断当前地址列表的选中项。
+
+## Event
+| 字段 | 说明 | 回调参数 
+|----- | ----- | ----- 
+| change | 自定义选择地址时，选择地区时触发 |  参考 onChange
+| selected | 选择已有地址列表时触发 | 参考 selected
+| close | 地址选择弹框关闭时触发 | 参考 close
+| close-mask |点击遮罩层或点击右上角叉号关闭时触发 | {closeWay:'mask'/'cross'}
+| switch-module | 点击‘选择其他地址’或自定义地址选择左上角返回按钮触发 | {type:'exist'/'custom'}
+
+
+## change 回调参数
+| 参数 | 说明 | 可能值 
+|----- | ----- | ----- 
+| custom | 当前点击的行政区域  |  province(省) / city(市) / country(县) / town(乡)
+| next | 当前点击的行政区域的下一级 | province(省) / city(市) / country(县) / town(乡)
+| value | 当前点击的行政区域的值（返回传入的值） | {}
+
+## selected 回调参数
+| 参数 | 说明 | 可能值 
+|----- | ----- | ----- 
+| 第一个参数（prevExistAdd） |  选择前选中的地址 |  {}
+| 第二个参数（nowExistAdd） |  当前选中的地址 |  {}
+| 第三个参数（arr） |  选择完之后的已有地址列表（selectedAddress 值发生改变） |  {}
+
+## close 回调参数
+| 参数 | 说明 | 可能值 
+|----- | ----- | ----- 
+| type | 地址选择类型 exist/custom  |  exist/custom
+| data | 选择地址的值,custom 时，addressStr 为选择的地址组合 | {} 
+    

src/packages/__VUE/avatar/doc.taro.md

@@ -0,0 +1,71 @@
+# Avatar 头像
+
+### 介绍
+
+用来代表用户或事物，支持图片、图标或字符展示。
+
+### 安装
+``` javascript
+import { createApp } from 'vue';
+import { Avatar } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Avatar);
+```
+
+## 代码示例
+
+### 基本用法
+
+内置 smal / normal / large 三种尺寸规格
+
+``` html
+<nut-avatar size="large" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+></nut-avatar>
+<nut-avatar size="normal" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+></nut-avatar>
+<nut-avatar size="small" src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+></nut-avatar>  
+```
+
+### 修改形状类型
+
+``` html
+<nut-avatar shape="square"></nut-avatar>
+<nut-avatar shape="round"></nut-avatar>
+```
+
+### 修改背景色
+
+``` html
+<nut-avatar bg-color="#f0250f"></nut-avatar>
+```
+
+### 修改背景icon
+
+``` html
+<nut-avatar icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
+```
+
+### 设置头像的文本内容
+
+``` html
+<nut-avatar icon>N</nut-avatar>
+```
+
+
+### Prop
+
+| 字段     | 说明                                                                     | 类型   | 默认值 |
+|----------|--------------------------------------------------------------------------|--------|--------|
+| bg-color | 设置头像背景色                                                           | String | #eee   |
+| size     | 设置头像的大小，提供三种：large/normal/small，支持直接输入数字           | String | normal |
+| shape    | 设置头像的形状，默认是圆形，可以设置为square方形                         | String | round  |
+| src      | 设置头像的背景图片                                                       | String | ''     |
+| icon     | 设置头像的icon图标, 优先级低于src,类似Icon组件的name属性，支持名称和链接 | String | ''     |
+
+### Events
+
+| 字段     | 说明                 | 类型     | 回调参数 |
+|----------|----------------------|----------|----------|
+| on-error | 加载图片失败触发事件 | Function | event    |

src/packages/__VUE/backtop/doc.taro.md

@@ -0,0 +1,79 @@
+# BackTop 返回顶部
+
+### 介绍
+
+提供较长的页面快捷返回顶部功能。
+
+### 安装
+
+```javascript
+
+import { createApp } from 'vue';
+import { BackTop } from '@nutui/nutui';
+
+const app = createApp();
+app.use(BackTop);
+
+```
+
+### 代码实例
+
+### 基本用法
+
+```html
+<nut-backtop  el-id="elId" ></nut-backtop>
+```
+
+### 设置出现位置
+
+```html
+<nut-backtop :distance="200" ></nut-backtop>
+```
+
+### 自定义样式
+
+```html
+<nut-backtop @click="handleClick" el-id="elId" :distance="100" :bottom="90" ><div>无</div></nut-backtop>
+```
+
+### click事件
+
+```html
+<nut-backtop @click="handleClick" ></nut-backtop>
+```
+
+```html
+<script>
+export default createDemo({
+  setup(props, { emit }) {
+    const handleClick = () => {
+      console.log('触发返回顶部');
+    };
+
+    return {
+      handleClick
+    };
+  }
+});
+</script>
+```
+
+
+### API
+
+### Prop  
+
+| 字段            | 说明                 | 类型    | 默认值  |
+|-----------------|------------------------------------------|---------|---------|
+| el-id           | 获取监听元素的父级元素         | String | -       |
+| bottom         | 距离页面底部距离    | Number  | `20`       |
+| right        | 距离页面右侧距离      | Number |  `10`  |
+| distance     | 页面垂直滚动多高后出现   | Number  | `200`      |
+| z-index         | 设置组件页面层级   | Number  | `10`       |  
+| is-animation         | 是否有动画,和duration参数互斥   | Boolean  | `true`       |  
+| duration         | 设置动画持续时间   | Number  | `1000`       |                                          
+
+### Event
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| click | 按钮点击时触发事件 | event: MouseEvent |

src/packages/__VUE/calendar/doc.taro.md

@@ -0,0 +1,213 @@
+# Calendar 组件
+
+### 介绍
+
+日历，可平铺/弹窗展示
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { Calendar } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Calendar);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<nut-cell
+  :showIcon="true"
+  title="选择单个日期"
+  :desc="date ? `${date} ${dateWeek}` : '请选择'"
+  @click="openSwitch('isVisible')"
+>
+</nut-cell>
+<nut-calendar
+  v-model:visible="isVisible"
+  :default-value="date"
+  @close="closeSwitch('isVisible')"
+  @choose="setChooseValue"
+  :start-date="`2019-10-11`"
+  :end-date="`2022-11-11`"
+>
+</nut-calendar>
+```
+
+```javascript
+setup() {
+    const state: TestCalendarState = reactive({
+      isVisible: false,
+      date: '',
+      dateWeek: ''
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+    const setChooseValue = param => {
+      state.date = param[3];
+      state.dateWeek = param[4];
+    };
+    return {
+      ...toRefs(state),
+      openSwitch,
+      closeSwitch,
+      setChooseValue
+    };
+  }
+```
+
+### 区间选择
+
+```html
+<nut-cell
+  :showIcon="true"
+  title="选择日期区间"
+  :desc="date ? `${date[0]}至${date[1]}` : '请选择'"
+  @click="openSwitch('isVisible')"
+>
+</nut-cell>
+<nut-calendar
+  v-model:visible="isVisible"
+  :default-value="date"
+  type="range"
+  :start-date="`2019-12-22`"
+  :end-date="`2021-01-08`"
+  @close="closeSwitch('isVisible')"
+  @choose="setChooseValue"
+>
+</nut-calendar>
+```
+
+```javascript
+setup() {
+    const state: TestCalendarState = reactive({
+      date: ['2019-12-23', '2019-12-26'],
+      isVisible2: true
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+    const setChooseValue= param => {
+      state.date = [...[param[0][3], param[1][3]]];
+    };
+    return {
+      ...toRefs(state),
+      openSwitch,
+      closeSwitch,
+      setChooseValue,
+    };
+  }
+```
+
+### 自定义日历-自动回填
+
+```html
+<nut-cell
+  :showIcon="true"
+  title="选择日期"
+  :desc="date ? date : '请选择'"
+  @click="openSwitch('isVisible')"
+>
+</nut-cell>
+<nut-calendar
+  v-model:visible="isVisible"
+  @close="closeSwitch('isVisible')"
+  @choose="setChooseValue"
+  :start-date="null"
+  :end-date="null"
+  :is-auto-back-fill="true"
+>
+</nut-calendar>
+```
+
+```javascript
+setup() {
+    const state: TestCalendarState = reactive({
+      date: '',
+      isVisible: false
+    });
+    const openSwitch = param => {
+      state[`${param}`] = true;
+    };
+    const closeSwitch = param => {
+      state[`${param}`] = false;
+    };
+     const setChooseValue = param => {
+      state.date= param[3];
+    };
+    return {
+      ...toRefs(state),
+      setChooseValue
+    };
+  }
+```
+
+### 平铺展示
+
+```html
+<div class="test-calendar-wrapper">
+  <nut-calendar
+    :poppable="false"
+    :is-auto-back-fill="true"
+    :default-value="date"
+    @choose="setChooseValue"
+  >
+  </nut-calendar
+></div>
+```
+
+```javascript
+setup() {
+    const state: TestCalendarState = reactive({
+      date: '2020-07-08'
+    });
+    const setChooseValue = param => {
+      state.date = param[3];
+    };
+    return {
+      ...toRefs(state),
+      setChooseValue
+    };
+  }
+```
+
+### 基础用法
+
+```html
+
+```
+
+```javascript
+```
+
+## API
+
+### Props
+
+| 字段              | 说明                                              | 类型            | 默认值          |
+|-------------------|---------------------------------------------------|-----------------|-----------------|
+| v-model:visible   | 是否可见                                          | Boolean         | false           |
+| type              | 类型，日期选择'one'，区间选择'range'              | String          | 'one'           |
+| poppable          | 是否弹窗状态展示                                  | Boolean         | true            |
+| is-auto-back-fill | 自动回填                                          | Boolean         | false           |
+| title             | 显示标题                                          | String          | ‘日期选择’      |
+| default-value     | 默认值，日期选择 String 格式，区间选择 Array 格式 | String 、 Array | null            |
+| start-date        | 开始日期， 如果不限制开始日期传 null              | String          | 今天            |
+| end-date          | 结束日期，如果不限制结束日期传 null               | String          | 距离今天 365 天 |
+
+### Events
+
+| 事件名 | 说明                         | 回调参数                     |
+|--------|------------------------------|------------------------------|
+| choose | 选择之后或是点击确认按钮触发 | 日期数组（包含年月日和星期） |
+| close  | 关闭时触发                   | -                            |

src/packages/__VUE/cell/doc.taro.md

@@ -0,0 +1,109 @@
+# Cell 列表组件
+
+### 介绍
+
+列表项，可组成列表。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Cell,CellGroup } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Cell);
+app.use(CellGroup);
+
+```
+
+## 代码示例
+
+### 基本用法
+
+``` html
+<nut-cell title="我是标题" desc="描述文字"></nut-cell>
+<nut-cell title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+<nut-cell title="点击测试" @click="testClick"></nut-cell>
+```
+
+``` javascript
+// ...
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+      const switchChecked = ref(true);
+      const testClick = (event) => {
+        Toast.text('点击事件')
+      };
+      return { testClick,switchChecked };
+  }
+}
+// ...
+```
+
+### 直接使用插槽
+
+``` html
+ <nut-cell title="我是标题" desc="描述文字">
+  <div>自定义内容</div>
+ </nut-cell>  
+```
+
+### 链接 | 分组用法
+
+``` html
+<nut-cell-group title="链接 | 分组用法">
+  <nut-cell title="链接" is-link></nut-cell>
+  <nut-cell title="URL 跳转" desc="https://jd.com" is-link url="https://jd.com"></nut-cell>
+  <nut-cell title="路由跳转 ’/‘ " to="/"></nut-cell>
+</nut-cell-group>
+```
+
+### 自定义右侧箭头区域
+
+``` html
+<nut-cell-group title="自定义右侧箭头区域">
+  <nut-cell title="Switch">
+    <template v-slot:link>
+      <nut-switch v-model="switchChecked" />
+    </template>
+  </nut-cell>
+</nut-cell-group>
+```
+
+
+### 单元格展示图标
+
+``` html
+<nut-cell title="姓名" icon="my" desc="张三"></nut-cell>
+```
+### 只展示 desc ，可通过 desc-text-align 调整内容位置
+
+``` html
+<nut-cell desc-text-align="left" desc="张三"></nut-cell>
+```
+
+## API
+
+### Prop
+
+| 字段            | 说明                                                                                           | 类型    | 默认值 |
+|-----------------|------------------------------------------------------------------------------------------------|---------|--------|
+| title           | 标题名称                                                                                       | String  | -      |
+| sub-title       | 左侧副标题                                                                                     | String  | -      |
+| desc            | 右侧描述                                                                                       | String  | -      |
+| desc-text-align | 右侧描述文本对齐方式 [text-align](https://www.w3school.com.cn/cssref/pr_text_text-align.asp)   | String  | right  |
+| is-link         | 是否展示右侧箭头并开启点击反馈                                                                 | Boolean | false  |
+| icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -      |
+| url             | 点击后跳转的链接地址                                                                           | String  | -      |
+| to              | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String  | -      |
+| replace         | 是否在跳转时替换当前页面历史                                                                   | Boolean | false  |
+
+### Event
+
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| click | 点击事件 | event:Event |
+
+

src/packages/__VUE/collapse/doc.taro.md

@@ -0,0 +1,194 @@
+# Collapse 折叠面板
+
+## 基本用法
+
+通过`v-model`控制展开的面板列表，`activeNames`为数组格式
+
+```html
+<nut-collapse v-model:active="active1" icon="down-arrow">
+  <nut-collapse-item :title="title1" :name="1">
+    NutUI是一套拥有京东风格的轻量级的 Vue 组件库
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2">
+    在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
+  </nut-collapse-item>
+  <nut-collapse-item :title="title3" :name="3" disabled>
+  </nut-collapse-item>
+</nut-collapse>
+```
+
+``` javascript
+setup() {
+  const activeNames = reactive([1, 2]);
+  const title = reactive({
+    title1: '标题1',
+    title2: '标题2',
+    title3: '标题3',
+  })
+  return {
+    activeNames,
+    ...toRefs(title)
+  };
+}
+```
+### 无icon样式
+
+```html
+<nut-collapse v-model:active="activeName" :accordion="true">
+  <nut-collapse-item :title="title1" :name="1">
+   引入Vue3新特性 Composition API、Teleport、Emits 等
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2">
+    全面使用 TypeScipt
+  </nut-collapse-item>
+</nut-collapse>
+```
+
+``` javascript
+setup() {
+  const activeName = ref(1);
+  const title = reactive({
+    title1: '标题1',
+    title2: '标题2',
+    title3: '标题3',
+  })
+  return {
+    activeName,
+    ...toRefs(title)
+  };
+}
+```
+
+### 手风琴
+
+通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`subTitle`可以设置副标题的内容
+
+```html
+ <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
+  <nut-collapse-item :title="title1" :name="1">
+    基于京东设计语言体系，构建场景
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
+   提高界⾯的模块化通用程度
+  </nut-collapse-item>
+  <nut-collapse-item :title="title3" :name="3">
+  采用组合式 API Composition 语法重构，结构清晰，功能模块化
+  </nut-collapse-item>
+</nut-collapse>
+```
+
+``` javascript
+setup() {
+  const activeName = ref(1);
+  const subTitle = '副标题';
+  const title = reactive({
+    title1: '标题1',
+    title2: '标题2',
+    title3: '标题3',
+  })
+  return {
+    activeName,
+    subTitle,
+    ...toRefs(title)
+  };
+}
+```
+
+
+### 自定义折叠图标
+
+通过icon设置自定义图标，rotate设置图标旋转的角度
+
+```html
+<nut-collapse
+  v-model:active="activeName"
+  :accordion="true"
+  icon="arrow-right2"
+  rotate="90"
+>
+  <nut-collapse-item :title="title1" :name="1">
+      NUTUI3.0重新思考其内在的一致性和可组合性
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+    提⾼产研输出对接的效率，降低输出工作量
+  </nut-collapse-item>
+</nut-collapse>
+```
+
+``` javascript
+const activeName = ref(1);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2',
+})
+return {
+  activeName,
+  ...toRefs(title)
+};
+```
+
+
+### 自定义标题图标
+
+通过icon设置自定义图标，rotate设置图标旋转的角度
+
+```html
+<nut-collapse
+  v-model:active="activeName"
+  title-icon="issue"
+  title-icon-color="red"
+  title-icon-size="20px"
+  title-icon-position="left"
+  icon="down-arrow"
+  :accordion="true"
+>
+  <nut-collapse-item :title="title1" :name="1">
+  组件 emits 事件单独提取，增强代码可读性
+  </nut-collapse-item>
+  <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+  使用 Teleport 新特性重构挂载类组件
+  </nut-collapse-item>
+</nut-collapse>
+```
+
+``` javascript
+const activeName = ref(1);
+const title = reactive({
+  title1: '标题1',
+  title2: '标题2',
+})
+return {
+  activeName,
+  ...toRefs(title)
+};
+```
+
+## Collapse Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| v-model | 当前展开面板的 name | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | - |
+| accordion | 是否开启手风琴模式 | boolean | false |
+| icon | 图标链接/或使用 NutUI 的 icon | string | ‘’ |
+| icon-size | 图标大小 | string | 16px |
+| icon-color | 图标颜色 | string | '' |
+| sub-title | 标题栏副标题 | string | - |
+| title-icon | 标题图标链接/或使用 NutUI 的 icon | string | ‘’ |
+| title-icon-size | 标题图标大小 | string | 16px |
+| title-icon-color | 标题图标颜色 | string | ’‘ |
+| title-icon-position | 标题图标位置 | string | ‘left' |
+| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
+
+### CollapseItem Prop
+| 参数 | 说明 | 类型 | 默认值 | 
+|------|------|------|------|
+| name | 唯一标识符，必填 | string \ number | -1 |
+| title | 标题栏左侧内容 | string | - |
+| sub-title | 标题栏副标题 | string | - |
+| disabled | 标题栏是否禁用 | boolean | false |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |

src/packages/__VUE/datepicker/doc.taro.md

@@ -0,0 +1,166 @@
+#  Datepicker组件
+
+### 介绍
+    
+时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。
+    
+### 安装
+    
+```javascript
+import { createApp } from 'vue';
+import { DatePicker } from '@nutui/nutui';
+
+const app = createApp();
+app.use(DatePicker);
+```
+    
+## 代码演示
+    
+### 日期选择-每列不显示中文
+```html
+<nut-datepicker
+    v-model="currentDate"
+    @confirm="confirm"
+    v-model:visible="show"
+    :is-show-chinese="false"
+></nut-datepicker> 
+```
+```javascript
+<script>
+export default createDemo({
+  setup(props, { emit }) {
+    const show = ref(false);
+    const desc = ref('2020-1-1');
+
+    return {
+      show,
+      desc
+      open: (index) => {
+        show.value = true;
+      },
+      confirm: (res) => {
+        desc.value = val.join('-');
+      }
+    };
+  }
+});
+</script>
+```
+### 日期选择-限制开始结束时间
+```html
+<nut-datepicker
+    v-model="currentDate"
+    :min-date="minDate"
+    :max-date="maxDate"
+    @confirm="confirm"
+    v-model:visible="show"
+    :is-show-chinese="false"
+></nut-datepicker> 
+```
+```javascript
+<script>
+export default createDemo({
+  setup(props, { emit }) {
+    const show = ref(false);
+    const desc = ref('2020-1-1');
+
+    return {
+      show,
+      desc,
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      open: (index) => {
+        show.value = true;
+      },
+      confirm: (res) => {
+        desc.value = val.join('-');
+      }
+    };
+  }
+});
+</script>
+```
+### 日期时间-限制开始结束时间（有默认值）
+```html
+<nut-datepicker
+    v-model="currentDate"
+    :min-date="minDate"
+    :max-date="maxDate"
+    type="datetime"
+    @confirm="confirm"
+    v-model:visible="show" 
+></nut-datepicker> 
+```
+```javascript
+<script>
+export default createDemo({
+  setup(props, { emit }) {
+    const show = ref(false);
+    const desc = ref('2020年-1月-1日-0时-0分');
+
+    return {
+      show,
+      desc,
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      open: (index) => {
+        show.value = true;
+      },
+      confirm: (res) => {
+        desc.value = val.join('-');
+      }
+    };
+  }
+});
+</script>
+```
+### 时间选择-12小时制
+```html
+<nut-datepicker
+    v-model="currentDate"
+    type="time"
+    :min-date="minDate"
+    :max-date="maxDate"
+    :is-use12-hours="true"
+    @confirm="confirm"
+    v-model:visible="show"
+></nut-datepicker>
+``` 
+### 时间选择-分钟数递增步长设置
+```html
+<nut-datepicker
+    v-model="currentDate"
+    type="time"
+    :minute-step="5"
+    :min-date="minDate"
+    :max-date="maxDate"
+    :is-use12-hours="true"
+    @confirm="confirm"
+    v-model:visible="show"
+></nut-datepicker>
+```  
+
+## API
+    
+### Props
+    
+| 参数            | 说明                                              | 类型    | 默认值   |
+|-----------------|---------------------------------------------------|---------|----------|
+| v-model         | 初始值                                            | Date    | `null`   |
+| v-model:visible | 是否可见                                          | Boolean | `false`  |
+| type            | 类型，日期'date'， 日期时间'datetime'，时间'time' | String  | `'date'` |
+| is-use12-hours  | 是否十二小时制度，只限类型为'time'时使用          | Boolean | `false`  |
+| minute-step     | 分钟步进值                                        | Number  | `1`      |
+| is-show-chinese | 每列是否展示中文                                  | Boolean | `false`  |
+| title           | 设置标题                                          | String  | `null`   |
+| min-date        | 开始日期                                          | Date    | `十年前` |
+| max-date        | 结束日期                                          | Date    | `十年后` |
+
+
+
+### Events
+    
+| 事件名  | 说明               | 回调参数     |
+|---------|--------------------|--------------|
+| confirm | 点击确定按钮时触发 | event: Event |
+| close   | 关闭时触发         | event: Event |

src/packages/__VUE/drag/doc.taro.md

@@ -0,0 +1,51 @@
+# Drag 拖拽
+实现可拖拽的任意元素
+
+## 基本用法
+```html
+<nut-drag>
+  <div class="touch-dom">可点击，可拖拽</div>
+</nut-drag>
+```
+## 限制拖拽方向
+```html
+<nut-drag direction="x">
+  <div class="touch-dom">只能在X轴拖动</div>
+</nut-drag>
+```
+## 自动吸边
+```html
+<nut-drag direction="x" :attract="true">
+  <div class="touch-dom">拖动我</div>
+</nut-drag>
+```
+## 限制拖拽边界
+```html
+<nut-drag
+  :boundary="{ top: 401, left: 9, bottom: bottom(), right: right() }"
+  :attract="true"
+>
+  <div class="touch-dom">拖动我</div>
+</nut-drag>
+<script>
+ setup() {
+    function right() {
+      return document.documentElement.clientWidth - 300 - 9;
+    }
+    function bottom() {
+      return document.documentElement.clientHeight - 559;
+    }
+    return {
+      right,
+      bottom
+    };
+  }
+</script>
+```
+## Prop
+
+| 字段      | 说明                                              | 类型           | 默认值                              |
+| :-------- | :------------------------------------------------ | :------------- | :---------------------------------- |
+| attract   | 是否开启自动吸边                                  | Boolean        | false                                |
+| direction | 拖拽元素的拖拽方向限制，**x**/**y**/**all**三选一 | String         | 'all'                               |
+| boundary  | 拖拽元素的拖拽边界                                | Object         | {top: 0,left: 0,right: 0,bottom: 0} |

src/packages/__VUE/icon/doc.taro.md

@@ -0,0 +1,92 @@
+# Icon 图标组件
+
+### 介绍
+
+基于 IconFont 字体的图标集，可以通过 Icon 组件使用。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Icon } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Icon);
+
+```
+
+## 代码演示
+
+### 基础用法
+
+`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+
+```html
+<nut-icon name="dongdong"></nut-icon>
+<nut-icon name="JD"></nut-icon>
+<nut-icon size="40"  name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"></nut-icon>
+```
+
+### 图标颜色
+
+`Icon` 的 `color` 属性用来设置图标的颜色。
+
+```html
+<nut-icon name="dongdong" color="#fa2c19"></nut-icon>
+<nut-icon name="dongdong" color="#64b578"></nut-icon>
+<nut-icon name="JD" color="#fa2c19"></nut-icon>
+```
+
+### 图标大小
+
+`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。
+
+```html
+<nut-icon name="dongdong"></nut-icon>
+<nut-icon name="dongdong" size="24"></nut-icon>
+<nut-icon name="dongdong" size="16"></nut-icon>
+```
+
+### 自定义图标
+
+如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
+
+```css
+/* 引入第三方或自定义的字体图标样式 */
+@font-face {
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
+}
+
+.my-icon {
+  font-family: 'my-icon';
+}
+
+.my-icon-extra::before {
+  content: '\e626';
+}
+```
+
+```html
+<!-- 通过 class-prefix 指定类名为 my-icon -->
+<nut-icon class-prefix="my-icon" name="extra" />
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型             | 默认值           |
+|--------------|----------------------------------|------------------|------------------|
+| name         | 图标名称或图片链接               | String           | -                |
+| color        | 图标颜色                         | String           | -                |
+| size         | 图标大小，如 `20px` `2em` `2rem` | String or Number | -                |
+| class-prefix | 类名前缀，用于使用自定义图标     | String           | `nutui-iconfont` |
+| tag          | HTML 标签                        | String           | `i`              |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| click  | 点击图标时触发 | event: Event |
+

src/packages/__VUE/infiniteloading/doc.taro.md

@@ -0,0 +1,193 @@
+#  Infiniteloading组件
+
+### 介绍
+
+列表滚动到底部自动加载更多数据。
+
+### 安装
+
+```javascript
+  import { createApp } from 'vue';
+  import { InfiniteLoading } from '@nutui/nutui';
+
+  const app = createApp();
+  app.use(InfiniteLoading);
+```
+
+## 代码演示
+    
+### 基础用法
+
+```html
+<ul class="infiniteUl" id="scroll">
+    <nut-infiniteloading
+        containerId = 'scroll'
+        :use-window='false'
+        :has-more="hasMore"
+        @load-more="loadMore"
+    >
+        <li class="infiniteLi" v-for="(item, index) in defultList" :key="index">{{item}}</li>
+    </nut-infiniteloading>
+</ul>
+```
+```javascript
+setup() {
+    const hasMore = ref(true);
+    const data = reactive({
+      defultList: []
+    });
+    const loadMore = done => {  
+      setTimeout(() => {
+        const curLen = data.defultList.length;
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.defultList.push(`${i}`);
+        }
+        if (data.defultList.length > 30) hasMore.value = false;
+        done()
+      }, 500);
+    };
+    const init = () => {
+      for (let i = 0; i < 10; i++) {
+        data.defultList.push(`${i}`);
+      }
+    }
+    onMounted(() => {
+      init()
+    });
+    return { loadMore, hasMore, ...toRefs(data) };
+}
+```
+### 下拉刷新
+
+```html
+<ul class="infiniteUl" id="refreshScroll">
+  <nut-infiniteloading
+    pull-icon="JD"
+    container-id="refreshScroll"
+    :use-window="false"
+    :is-open-refresh="true"
+    :has-more="refreshHasMore"
+    @load-more="refreshLoadMore"
+    @refresh="refresh"
+  >
+    <li
+      class="infiniteLi"
+      v-for="(item, index) in refreshList"
+      :key="index"
+      >{{ item }}</li
+    >
+  </nut-infiniteloading>
+</ul>
+```
+```javascript
+setup() {
+    const refreshHasMore = ref(true);
+    const data = reactive({
+      refreshList: []
+    });
+    const refreshLoadMore = done => {
+      setTimeout(() => {
+        const curLen = data.refreshList.length;
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.refreshList.push(
+            `${i}`
+          );
+        }
+        if (data.refreshList.length > 30) refreshHasMore.value = false;
+        done()
+      }, 500);
+    };
+
+    const refresh = (done) => {
+      setTimeout(()=>{
+        Toast.success('刷新成功');
+        done()
+      },1000)
+    }
+    const init = () => {
+      for (let i = 0; i < 10; i++) {
+        data.refreshList.push(`${i}`);
+      }
+    }
+    onMounted(() => {
+      init()
+    });
+    return { refreshLoadMore, refreshHasMore, refresh, ...toRefs(data) };
+}
+```
+### 自定义加载文案
+
+```html
+<ul class="infiniteUl" id="customScroll">
+    <nut-infiniteloading
+        container-id = 'customScroll'
+        :use-window='false'
+        :has-more="customHasMore"
+        @load-more="customLoadMore"
+    >
+        <li class="infiniteLi" v-for="(item, index) in customList" :key="index">{{item}}</li>
+        <template v-slot:loading>
+            <div class="loading">
+                <span>加载中...</span>
+            </div>
+        </template>
+        <template v-slot:unloadMore>
+            <div class="unload-more">没有数据啦 ~~</div>
+        </template>
+    </nut-infiniteloading>
+</ul>
+```
+```javascript
+setup() {
+    const customHasMore = ref(true);
+    const data = reactive({
+      customList: ['']
+    });
+    const customLoadMore = done => {
+      setTimeout(() => {
+        const curLen = data.customList.length;
+        for (let i = curLen; i < curLen + 10; i++) {
+          data.customList.push(`${i}`);
+        }
+        if (data.customList.length > 30) customHasMore.value = false;
+        done()
+      }, 500);
+    };
+    const init = () => {
+      for (let i = 0; i < 10; i++) {
+        data.customList.push(`${i}`);
+      }
+    }
+    onMounted(() => {
+      init()
+    });
+    return { customHasMore, customLoadMore,...toRefs(data) };
+}
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| has-more         | 是否还有更多数据               | Boolean | `true`                |
+| threshold         | 距离底部多远加载 | Number | `200`               |
+| use-window | 将滚动侦听器添加到 window 否则侦听组件的父节点     | Boolean | `true` |
+| use-capture          | 是否使用捕获模式 true 捕获 false 冒泡                        | Boolean | `false`            |
+| container-id          | 在 useWindow 属性为 false 的时候，自定义设置节点ID                        | String | `''`            |
+| load-more-txt          | “没有更多数”据展示文案                        | String | `'哎呀，这里是底部了啦'`            |
+| is-open-refresh        | 是否开启下拉刷新                         | Boolean | `false`                |
+| pull-icon        | 下拉刷新[图标名称](#/icon)                        | String | <img src="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" width=40/>                |
+| pull-txt        | 下拉刷新提示文案                         | String | `松手刷新`                |
+| load-icon        | 上拉加载[图标名称](#/icon)                       | Boolean | <img src="https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" width=40 />                |
+| load-txt        | 上拉加载提示文案                         | String | `加载中...`                |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| load-more  | 继续加载的回调函数 | done 函数，用于关闭加载中状态 |
+| scroll-change  | 实时监听滚动高度 | 滚动高度 |
+| refresh  | 下拉刷新事件回调 | done 函数，用于关闭加载中状态 |
+    

src/packages/__VUE/input/doc.taro.md

@@ -0,0 +1,133 @@
+# Input 输入框组件
+
+### 介绍
+
+单行输入框
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Input } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Input);
+
+```
+## 代码演示
+
+### 基础用法
+
+双向绑定
+
+```html
+<nut-input
+      v-model="state.val1"
+      @change="change"
+      @focus="focus"
+      @blur="blur"
+      label="文本"
+    />
+<nut-input placeholder="请输入文本"
+      @change="change"
+      v-model="state.val0"
+      :require-show="true"
+      label="文本"
+      @clear="clear"
+    />
+```
+
+### 禁用和只读
+
+
+```html
+<nut-input v-model="state.val2" @change="change"  disabled="true" label="标题："/>
+<nut-input v-model="state.val3" @change="change" readonly="true"  label="标题："/>
+```
+
+### 限制输入长度
+
+```html
+ <nut-input v-model="state.val4" @change="change" max-length="7" label="限制7" />
+```
+### 其他类型
+
+```html
+<nut-input v-model="state.val0" @change="change" type="password" label="密码"/>
+<nut-input v-model="state.val5" @change="change" type="number" label="整数" />
+<nut-input v-model="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字"/>
+```
+
+### 代码
+```html
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      val0: '',
+      val1: '初始数据',
+      val2: '禁止修改',
+      val3: 'readonly 只读',
+      val4: '',
+      val5: '',
+      val6: '',
+      val7: '',
+      val8: '文案'
+    });
+    setTimeout(function() {
+      state.val1 = '异步数据';
+    }, 2000);
+    const change = (value: string | number,event:Event) => {
+      console.log('change: ', value,event);
+    };
+    const focus = (value: string | number,event:Event) => {
+      console.log('focus:', value,event);
+    };
+    const blur = (value: string | number,event:Event) => {
+      console.log('blur:', value,event);
+    };
+    const clear = (value: string | number) => {
+      console.log('clear:', value);
+    };
+
+    return {
+      state,
+      change,
+      blur,
+      clear,
+      focus
+    };
+  }
+}
+```
+### Prop
+
+| 参数         | 说明                                   | 类型           | 默认值  |
+|--------------|----------------------------------------|----------------|---------|
+| v-model      | 输入值，双向绑定                       | String         | -       |
+| type         | 类型，可选值为 `text` `number`  等     | String         | `text`  |
+| placeholder  | 为空时占位符                           | String         | -       |
+| label        | 左侧文案                               | String         | -       |
+| require-show | 左侧*号是否展示                        | Boolean        | `false` |
+| disabled     | 是否禁用                               | Boolean        | `false` |
+| readonly     | 是否只读                               | Boolean        | `false` |
+| max-length   | 限制最长输入字符                       | String、Number | -       |
+| clearable    | 展示清除icon                           | Boolean        | `true`  |
+| text-align   | 文本位置,可选值`left`,`center`,`right` | String         | `left`  |
+
+### Event
+
+| 名称   | 说明           | 回调参数    |
+|--------|----------------|-------------|
+| change | 输入内容时触发 | val ,event  |
+| focus  | 聚焦时触发     | val  ,event |
+| blur   | 失焦时触发     | val ,event  |
+| clear  | 点击清空时触发 | val         |
+
+
+
+
+
+
+
+

src/packages/__VUE/inputnumber/doc.taro.md

@@ -0,0 +1,133 @@
+# InputNumber 数字输入框
+
+### 介绍
+
+通过点击按钮控制数字增减。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { InputNumber,Icon } from '@nutui/nutui';
+
+const app = createApp();
+app.use(InputNumber).use(Icon);
+
+```
+
+## 代码演示
+
+### 基础用法
+
+初始化一个默认值
+
+``` html
+<nut-inputnumber v-model="value" />
+```
+``` javascript
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref(1);
+    return { value };
+  },
+};
+```
+
+### 步长设置
+
+设置步长 `step` 5 
+
+```html
+<nut-inputnumber v-model="value" step="5" />
+```
+
+### 限制输入范围
+
+`min` 和 `max` 属性分别表示最小值和最大值
+
+```html
+<nut-inputnumber v-model="value" min="10" max="20" />
+```
+
+### 禁用状态
+
+`disabled` 禁用状态下无法点击按钮或修改输入框。
+
+```html
+<nut-inputnumber v-model="value" disabled />
+```
+
+### 只读禁用输入框
+
+`readonly` 设置只读禁用输入框输入行为
+
+```html
+<nut-inputnumber v-model="value" readonly />
+```
+
+### 支持小数点
+
+设置步长 `step` 0.1  `decimal-places` 小数保留1位
+
+```html
+<nut-inputnumber v-model="value" step="0.1" decimal-places="1" />
+```
+### 支持异步修改
+
+通过 `change` 事件和 `model-value` 进行异步修改
+
+```html
+<nut-inputnumber :model-value="value" @change="onChange" />
+```
+
+``` javascript
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref(1);
+    const onChange = (value: number) => {
+      setTimeout(() => {
+        value.value = value;
+      }, 2000);
+    };
+    return { value,onChange };
+  },
+};
+```
+### 自定义按钮大小
+
+设置步长 `step` 0.1  `decimal-places` 小数保留1位
+
+```html
+<nut-inputnumber v-model="value"  button-size="30" input-width="50" />
+```
+
+## API
+
+### Props
+
+| 参数           | 说明                       | 类型           | 默认值     |
+|----------------|----------------------------|----------------|------------|
+| v-model        | 初始值                     | String、Number | -          |
+| input-width    | 输入框宽度                 | String         | `40px`     |
+| button-size    | 操作符+、-尺寸             | String         | `20px`     |
+| min            | 最小值限制                 | String、Number | `1`        |
+| max            | 最大值限制                 | String、Number | `9999` |
+| step           | 步长                       | String、Number | `1`        |
+| decimal-places | 设置保留的小数位           | String、Number | `0`        |
+| disabled       | 禁用所有功能               | Boolean        | false      |
+| readonly       | 只读状态禁用输入框操作行为 | Boolean        | false      |
+
+### Events
+
+| 事件名    | 说明                   | 回调参数                       |
+|-----------|------------------------|--------------------------------|
+| add       | 点击增加按钮时触发     | event: Event                   |
+| reduce    | 点击减少按钮时触发     | event: Event                   |
+| overlimit | 点击不可用的按钮时触发 | event: Event                   |
+| change    | 值改变时触发           | value:  number , event : Event |
+| blur      | 输入框失去焦点时触发   | event: Event                   |
+| focus     | 输入框获得焦点时触发   | event: Event                   |

src/packages/__VUE/notify/doc.taro.md

@@ -0,0 +1,94 @@
+#  Notify 消息通知
+
+### 介绍
+    
+在页面顶部展示消息提示
+    
+### 安装
+``` javascript
+import { createApp } from 'vue';
+import { Notify } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Notify);
+```    
+## 基本用法
+
+```javascript
+export default {
+  mounted() {
+      Notify.text('通知内容', {
+        onClosed() {
+          console.log('close');
+        },
+        onClick: () => {
+          console.log('click');
+        }
+      });
+  }
+}
+```
+## 通知类型
+### 主要通知
+```javascript
+    mounted(){
+      Notify.primary('通知内容');
+    }
+```
+### 成功通知
+```javascript
+    mounted(){
+      Notify.success('通知内容');
+    }
+```
+### 危险通知
+```javascript
+    mounted(){
+      Notify.danger('通知内容');
+    }
+```
+### 警告通知
+```javascript
+    mounted(){
+      Notify.warn('通知内容');
+    }
+```
+## 自定义
+### 自定义样式
+```javascript
+    mounted(){
+      Notify.text(val, {
+        color: '#ad0000',
+        background: '#ffe1e1'
+      });
+    }
+```
+### 自定义时长
+```javascript
+    mounted(){
+      Notify.text(val, {
+        duration: 10000
+      });
+    }
+```
+    
+## API
+    
+### Props
+    
+| 字段       | 说明                                     | 类型          | 默认值 |
+| ---------- | ---------------------------------------- | ------------- | ------ |
+| type       | 提示的信息                               | String        | 空     |
+| message    | 展示文案，支持通过\n换行                 | Boolean       | false  |
+| duration   | 展示时长(ms)，值为 0 时，notify 不会消失 | String        | 空     |
+| color      | 字体颜色                                 | String        | 空     |
+| background | 背景颜色                                 | String        | 空     |
+| class-name  | 自定义类名                               | String/Number | 1      |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| on-click  | 点击事件回调       | 无       |
+| on-close  | 关闭事件回调       | 无       |
+    

src/packages/__VUE/picker/doc.taro.md

@@ -0,0 +1,182 @@
+#  Picker组件
+
+### 介绍
+    
+提供多个选项集合供用户选择其中一项。
+    
+## 安装
+```javascript
+import { createApp } from 'vue';
+import { Picker } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Picker);
+```
+    
+## 代码演示
+
+    
+### 基础用法
+```html
+<nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>
+<nut-picker
+    v-model:visible="show"
+    :list-data="listData"
+    title="城市选择"
+    @confirm="confirm" 
+></nut-picker>
+```
+```javascript
+<script>
+export default createDemo({
+  setup(props, { emit }) {
+    const show = ref(false);
+    const listData = [
+      '南京市',
+      '无锡市',
+      '海北藏族自治区',
+      '北京市',
+      '连云港市',
+      '浙江市',
+      '江苏市'
+    ];
+
+    return {
+      listData,
+      open: (index) => {
+        show.value = true;
+      },
+      confirm: (res) => {
+        desc.value = res;
+      }
+    };
+  }
+});
+</script>
+```
+### 多列样式
+
+```html
+<nut-cell title="请选择时间" :desc="desc" @click="open"></nut-cell>
+<nut-picker
+    v-model:visible="show"
+    :list-data="listData"
+    title="多列选择"
+    @confirm="confirm"
+    @close="close"
+></nut-picker>
+```
+```javascript
+<script>
+export default createDemo({
+  setup(props, { emit }) {
+    const show = ref(false);
+    const listData = [
+      {
+        values: ['周一', '周二', '周三', '周四', '周五'],
+        defaultIndex: 2
+      },
+      // 第二列
+      {
+        values: ['上午', '下午', '晚上'],
+        defaultIndex: 1
+      }
+    ];
+
+    return {
+      listData,
+      open: (index) => {
+        show.value = true;
+      },
+      confirm: (res) => {
+        desc.value = res.join(' ');
+      }
+    };
+  }
+});
+</script>
+```
+### 多级联动
+```html
+<nut-cell title="地址" :desc="desc" @click="open"></nut-cell>
+<nut-picker
+    v-model:visible="show"
+    :list-data="listData"
+    title="地址选择"
+    @confirm="confirm" 
+></nut-picker>
+```
+```javascript
+<script>
+export default createDemo({
+  setup(props, { emit }) {
+    const show = ref(false);
+    const listData = [
+      {
+        text: '浙江',
+        children: [
+          {
+            text: '杭州',
+            children: [{ text: '西湖区' }, { text: '余杭区' }]
+          },
+          {
+            text: '温州',
+            children: [{ text: '鹿城区' }, { text: '瓯海区' }]
+          }
+        ]
+      },
+      {
+        text: '福建',
+        children: [
+          {
+            text: '福州',
+            children: [{ text: '鼓楼区' }, { text: '台江区' }]
+          },
+          {
+            text: '厦门',
+            children: [{ text: '思明区' }, { text: '海沧区' }]
+          }
+        ]
+      }
+    ];
+
+    return {
+      listData,
+      open: (index) => {
+        show.value = true;
+      },
+      confirm: (res) => {
+        desc.value = res.join(' ');
+      }
+    };
+  }
+});
+</script>
+``` 
+
+
+
+## API
+    
+### Props
+    
+| 参数                   | 说明                       | 类型    | 默认值 |
+|------------------------|----------------------------|---------|--------|
+| v-model:visible        | 是否可见                   | Boolean | false  |
+| title                  | 设置标题                   | String  | -      |
+| cancel-text            | 取消按钮文案               | String  | 取消   |
+| ok-text                | 确定按钮文案               | String  | 确定   |
+| list-data              | 列表数据                   | Array   | -      |
+| default-value-index    | 初始选中项的索引，默认为 0 | number  | 0      |
+| teleport               | 指定挂载节点               | String  | "body" |
+| close-on-click-overlay | 点击蒙层是否关闭对话框     | Boolean | false  |
+| lock-scroll            | 背景是否锁定               | Boolean | false  |
+   
+### Events
+    
+| 事件名  | 说明             | 回调参数     |
+|---------|------------------|--------------|
+| close   | 关闭弹窗时触发   | event: Event |
+| confirm | 点击确认时候触发 | event: Event |
+| change  | 改变时触发       | val          |
+    

src/packages/__VUE/popup/doc.taro.md

@@ -0,0 +1,124 @@
+# Popup 弹出层 组件
+
+### 介绍
+
+弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { Popup } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Popup);
+```
+
+## 代码演示
+
+### 基础用法
+
+`visible` 控制显示/隐藏
+
+```html
+<nut-popup :style="{ padding: '30px' }" v-model:visible="show">正文</nut-popup>
+```
+
+### 弹出位置
+
+```html
+<nut-popup
+  position="top"
+  v-model:visible="show"
+  :style="{ height: '20% }"
+></nut-popup>
+
+<nut-popup
+  position="left"
+  v-model:visible="show"
+  :style="{ height: '100%', width: '20%' }"
+></nut-popup>
+```
+
+### 图标
+
+```html
+<nut-popup
+  position="bottom"
+  closeable
+  :style="{ height: '20%' }"
+  v-model:visible="show"
+></nut-popup>
+
+<nut-popup
+  position="bottom"
+  closeable
+  close-icon-position="top-left"
+  :style="{ height: '20%' }"
+  v-model:visible="show"
+></nut-popup>
+
+<nut-popup
+  position="bottom"
+  closeable
+  close-icon-position="top-left"
+  close-icon="heart"
+  :style="{ height: '20%' }"
+  v-model:visible="show"
+></nut-popup>
+```
+
+### 圆角弹框
+
+```html
+<nut-popup
+  position="bottom"
+  closeable
+  round
+  :style="{ height: '30%' }"
+  v-model:visible="show"
+></nut-popup>
+```
+
+### 指定挂载节点
+
+```html
+<nut-popup :style="{ padding: '30px' }" teleport="#app" v-model:visible="show">app</nut-popup>
+```
+
+## API
+
+### Props
+
+| 参数                   | 说明                                                        | 类型           | 默认值        |
+|------------------------|-------------------------------------------------------------|----------------|---------------|
+| v-model:visible        | 当前组件是否显示                                            | Boolean        | `false`       |
+| z-index                | 遮罩层级                                                    | String、Number | `2000`        |
+| duration               | 动画时长，单位秒                                            | String、Number | `0.3`         |
+| overlay-class          | 自定义遮罩类名                                              | String         | -             |
+| overlay-style          | 自定义遮罩样式                                              | CSSProperties  | -             |
+| lock-scroll            | 背景是否锁定                                                | Boolean        | `true`       |
+| overlay                | 是否显示遮罩                                                | Boolean        | `true`        |
+| close-on-click-overlay | 是否点击遮罩关闭                                            | Boolean        | `true`        |
+| position               | 弹出位置（top,bottom,left,right,center）                    | String         | `"center"`    |
+| transition             | 动画名                                                      | String         | -             |
+| style                  | 自定义弹框样式                                              | CSSProperties  | -             |
+| pop-class              | 自定义弹框类名                                              | String         | -             |
+| closeable              | 是否显示关闭按钮                                            | Boolean        | `false`        |
+| close-icon-position    | 关闭按钮位置（top-left,top-right,bottom-left,bottom-right） | String         | `"top-right"` |
+| close-icon             | 自定义 Icon                                                 | String         | `"close"`     |
+| destroy-on-close       | 组件销毁后是否关闭                                          | Boolean        | `true`        |
+| round                  | 是否显示圆角                                                | Boolean        | `false`       |
+| teleport               | 指定挂载节点                                                | String         | `"body"`      |
+
+### Events
+
+| 事件名           | 说明                   | 回调参数       |
+|------------------|------------------------|----------------|
+| click            | 点击弹框时触发         | `event: Event` |
+| click-close-icon | 点击关闭图标时触发     | `event: Event` |
+| open             | 打开弹框时触发         | -              |
+| close            | 关闭弹框时触发         | -              |
+| opend            | 遮罩打开动画结束时触发 | `event: Event` |
+| closed           | 遮罩关闭动画结束时触发 | `event: Event` |
+| click-overlay    | 点击遮罩触发           | `event: Event` |

src/packages/__VUE/price/doc.taro.md

@@ -0,0 +1,62 @@
+# Price 商品价格
+
+### 介绍
+
+用来对商品价格数值的小数点前后部分应用不同样式，还支持人民币符号、千位分隔符、设置小数点位数等功能。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Price } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Price);
+
+```
+
+## 代码示例
+
+### 基本用法
+
+``` html
+<nut-price :price="1010" :need-symbol="false" :thousands="true" />
+```
+
+### 有人民币符号，无千位分隔
+
+``` html
+<nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
+```
+
+### 带人民币符号，有千位分隔，保留小数点后三位
+
+``` html
+<nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+```
+### 异步随机变更
+
+``` html
+<nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+```
+``` javascript
+setup() {
+    const price = ref(0);
+    setInterval(() => {
+        price.value = Math.random()*10000000;
+    }, 1000);
+    return {
+        price
+    };
+}
+```
+
+### Prop
+
+| 字段           | 说明                     | 类型    | 默认值 |
+|----------------|--------------------------|---------|--------|
+| price          | 价格数量                 | Number  | 0      |
+| need-symbol    | 是否需要加上 symbol 符号 | Boolean | true   |
+| symbol         | 符号类型                 | String  | &yen;  |
+| decimal-digits | 小数位位数               | Number  | 2      |
+| thousands      | 是否按照千分号形式显示   | Boolean | false  |

src/packages/__VUE/range/doc.taro.md

@@ -0,0 +1,146 @@
+# Range组件
+
+### 介绍
+  
+滑动输入条，用于在给定的范围内选择一个值。
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+import { Range } from '@nutui/nutui';
+const app = createApp();
+app.use(Range);
+```
+
+## 代码演示
+
+### 基础用法
+```html
+<nut-range v-model="value" @change="onChange"></nut-range>
+```
+```javascript
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+
+export default {
+  setup() {
+    const value = ref(40);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+```
+
+### 双滑块
+```html
+<nut-range range v-model="value" @change="onChange"></nut-range>
+```
+```javascript
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+
+export default {
+  setup() {
+    const value = ref([20, 80]);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+```
+
+### 指定范围
+```html
+<nut-range v-model="value" :max="10" :min="-10" @change="onChange"></nut-range>
+```
+
+### 设置步长
+```html
+<nut-range v-model="value" :step="5" @change="onChange"></nut-range>
+```
+### 隐藏范围
+```html
+<nut-range v-model="value" hidden-range @change="onChange"></nut-range>
+```
+
+### 隐藏标签
+```html
+<nut-range v-model="value" hidden-tag @change="onChange"></nut-range>
+```
+
+### 禁用
+```html
+<nut-range v-model="value" disabled @change="onChange"></nut-range>
+```
+
+### 自定义样式
+```html
+<nut-range
+  v-model="value"
+  inactive-color="rgba(163,184,255,1)"
+  button-color="rgba(52,96,250,1)"
+  active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%"
+  @change="onChange">
+</nut-range>
+```
+
+### 自定义按钮
+```html
+<nut-range v-model="value" @change="onChange">
+  <template #button>
+    <div class="custom-button">{{ value }}</div>
+  </template>
+</nut-range>
+
+<style>
+  .custom-button {
+    width: 26px;
+    color: #fff;
+    font-size: 10px;
+    line-height: 18px;
+    text-align: center;
+    background-color: #ee0a24;
+    border-radius: 100px;
+  }
+</style>
+```
+
+  ## API
+  
+  ### Props
+  
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前进度百分比 | Number、Number[] | `0` |
+| range | 是否开启双滑块模式 | Boolean | `false` |
+| max | 最大值 | Number、String | `100` |
+| min | 最小值 | Number、String | `0` |
+| step | 步长 | Number、String | `1` |
+| disabled | 是否禁用滑块 | Boolean | `false` |
+| hidden-range | 是否隐藏范围值 | Boolean | `false` |
+| hidden-tag | 是否隐藏标签 | Boolean | `false` |
+| active-color | 进度条激活态颜色 | String | `rgba(250, 44, 25, 1)` |
+| inactive-color | 进度条非激活态颜色 | String | `rgba(255, 163, 154, 1)` |
+| button-color | 按钮颜色 | String | `rgba(250, 44, 25, 1)` |
+
+  
+### Events
+
+| 事件名             | 说明                     | 回调参数        |
+| ------------------ | ------------------------ | --------------- |
+| change             | 进度变化且结束拖动后触发 | value: 当前进度 |
+| drag-start         | 开始拖动时触发           | -               |
+| drag-end           | 结束拖动时触发           | -               |
+
+### Slots
+
+| 名称   | 说明           |
+| ------ | -------------- |
+| button | 自定义滑动按钮 |
+

src/packages/__VUE/rate/doc.taro.md

@@ -0,0 +1,104 @@
+# Rate 评分
+
+### 介绍
+
+用于快速的评级操作，或对评价进行展示。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Rate } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Rate);
+```
+
+## 代码演示
+
+### 基础用法
+
+``` html
+<nut-rate v-model="value" />
+```
+
+``` javascript
+import { ref } from 'vue';
+setup() {
+    const value = ref(3);
+    return { value }
+}
+```
+
+### 自定义icon
+
+``` html
+<nut-rate checked-icon="heart-fill1" unchecked-icon="heart" v-model="value" />
+```
+
+### 自定义数量
+
+``` html
+<nut-rate :total="6" v-model="value" />
+```
+
+### 自定义颜色
+
+``` html
+<nut-rate active-color="#FFC800" v-model="value" />
+```
+
+### 禁用状态
+
+``` html
+<nut-rate disabled v-model="value" />
+```
+
+### 只读
+
+``` html
+<nut-rate v-model="value" readOnly />
+```
+### 绑定事件
+
+``` html
+<nut-rate v-model="value" @change="onChange" />
+```
+``` javascript
+import { ref } from 'vue';
+setup() {
+    const value = ref(3);
+    const onChange = (val)=>{
+        Toast.text(val);
+    }
+    return { value }
+}
+```
+### 自定义尺寸
+
+``` html
+<nut-rate v-model="value" icon-size="35" />
+```
+
+
+
+## Prop
+
+| 字段           | 说明                                      | 类型    | 默认值      |
+|----------------|-------------------------------------------|---------|-------------|
+| v-model        | 当前 star 数，可使用 v-model 双向绑定数据 | Number  | -           |
+| count          | star 总数                                 | Number  | 5           |
+| icon-size      | star 大小                                 | Number  | 18          |
+| active-color   | 图标选中颜色                              | String  | #fa200c     |
+| void-color     | 图标未选中颜色                            | String  | #ccc        |
+| unchecked-icon | 使用图标(未选中)                          | String  | star-n      |
+| checked-icon   | 使用图标(选中)                            | String  | star-fill-n |
+| allow-half     | 是否半星                                  | Boolean | false       |
+| readonly       | 是否只读                                  | Boolean | false       |
+| disabled       | 是否禁用                                  | Boolean | false       |
+| spacing        | 间距                                      | Number  | 20          |
+
+## Event
+| 字段   | 说明                       | 回调参数 |
+|--------|----------------------------|----------|
+| change | 当前分值修改时时触发的事件 | 当前值   |

src/packages/__VUE/shortpassword/doc.taro.md

@@ -0,0 +1,121 @@
+# ShortPassword 短密码组件
+
+### 介绍
+
+短密码输入框，可用于输入密码、短信验证码等
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { ShortPassword } from '@nutui/nutui';
+
+const app = createApp();
+app.use(ShortPassword);
+
+```
+
+## 代码示例
+
+### 公用片段
+
+``` html
+<nut-shortpassword
+  v-model="state.value"
+  v-model:visible="state.visible"
+  :no-button="state.noButton"
+  :length="state.length"
+  :error-msg="state.errorMsg"
+  @change="methods.onChange"
+  @complete="methods.onComplete"
+  @ok="methods.onOk"
+  @tips="methods.onTips">
+</nut-shortpassword>
+```
+
+``` javascript
+import { reactive, getCurrentInstance } from 'vue';
+setup() {
+  let { proxy } = getCurrentInstance();
+  const state = reactive({
+    visible: false,
+    noButton: true,
+    value: '',
+    errorMsg: '',
+    length: 6
+  });
+  const methods = {
+    onChange(val: string) {
+      val && proxy.$toast.text(val);
+    },
+    onOk(val: string) {
+      val && proxy.$toast.text(val);
+      state.visible = false;
+    },
+    onComplete() {
+      
+    },
+    onTips() {
+      proxy.$toast.text('执行忘记密码逻辑');
+    }
+  };
+  return {
+    state,
+    methods
+  };
+}
+
+```
+### 基础用法
+
+``` html
+<nut-cell title="基础用法" is-link @click="state.visible = true;"></nut-cell>
+```
+
+### 显示按钮组
+
+``` html
+<nut-cell title="显示按钮组" is-link @click="state.visible = true;state.noButton = false;"></nut-cell>
+```
+
+### 自定义密码长度4
+
+``` html
+<nut-cell title="自定义密码长度4" is-link @click="state.visible = true;state.length = 4;"></nut-cell>
+```
+### 忘记密码提示语事件回调
+
+``` html
+<nut-cell title="忘记密码提示语事件回调" is-link @click="state.visible = true;"></nut-cell>
+```
+
+### 错误提示语
+``` html
+<nut-cell title="错误提示语" is-link @click="state.visible = true;state.errorMsg = '请输入正确密码';"></nut-cell>
+```
+
+### Prop
+
+
+| 字段                   | 说明                | 类型           | 默认值                       |
+|------------------------|---------------------|----------------|------------------------------|
+| v-model                | 密码初始值          | String         |                              |
+| v-model:visible        | 是否展示短密码框    | Boolean        | false                        |
+| title                  | 标题                | String         | 请输入密码                   |
+| desc                   | 密码框描述          | String         | 您使用了虚拟资产，请进行验证 |
+| tips                   | 提示语              | String         | 忘记密码                     |
+| close-on-click-overlay | 是否点击遮罩关闭    | Boolean        | true                         |
+| no-button              | 是否隐藏底部按钮    | Boolean        | true                         |
+| length                 | 密码长度，取值为4~6 | String、Number | 6                            |
+| error-msg              | 错误信息提示        | String         | ''                           |
+
+
+### Event
+
+| 事件名称 | 说明                   | 回调参数 |
+|----------|------------------------|----------|
+| change   | 输入密码时触发事件     |  当前输入框值value    |
+| ok       | 点击确实时触发事件     | 当前输入框值value    |
+| cancel   | 点击取消时触发事件     | -    |
+| close    | 点击关闭图标时触发事件 | -    |
+| complete | 输入完成的回调         | 当前输入框值value    |
+

src/packages/__VUE/swiper/doc.md

@@ -8,7 +8,10 @@
 
 ```javascript
 import { createApp } from 'vue';
+//vue
 import { Swiper } from '@nutui/nutui';
+//vue-taro
+import { Swiper } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(Swiper);

src/packages/__VUE/swiper/doc.taro.md

@@ -0,0 +1,92 @@
+# Swiper 轮播图 组件
+
+### 介绍
+
+常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
+
+### 安装
+
+```javascript
+import { createApp } from 'vue';
+//vue
+import { Swiper } from '@nutui/nutui';
+//vue-taro
+import { Swiper } from '@nutui/nutui@taro';
+
+const app = createApp();
+app.use(Swiper);
+```
+
+## 代码演示
+
+### 基础用法
+
+`autoplay` 是否自动切换
+`interval` 自动切换时间间隔
+`current` 当前所在滑块的 index
+`indicator-dots` 是否显示面板指示点
+`indicator-color` 指示点颜色
+
+```html
+<nut-swiper current="1" indicator-dots="true" indicator-color="#426543" autoplay="true" interval="3000">
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+```
+
+### 自定义大小
+
+`previous-margin` 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
+`next-margin` 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
+
+```html
+<nut-swiper previous-margin="10px" next-margin="10px">
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+```
+
+### 垂直方向
+
+`vertical` 滑动方向是否为纵向
+
+
+```html
+<nut-swiper vertical="true">
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/152158/32/19170/280589/6035429fE08208901/024578cf04ce3b47.jpg!cr_1125x445_0_171" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/159602/22/7999/126515/6035f371E6f95bfee/559cb1ee48c962c9.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/166846/13/7534/136440/60338b5cEd491d8b3/9e5527429136ab86.jpg" alt="" />
+  </nut-swiper-item>
+  <nut-swiper-item>
+    <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145433/27/14059/141680/5facf066Ec402354c/530d5a316aed55fc.jpg!cr_1125x445_0_171" alt="" />
+  </nut-swiper-item>
+</nut-swiper>
+```
+
+
+#### API [参考文档](https://docs.taro.zone/docs/components/viewContainer/swiper)

src/packages/__VUE/textarea/doc.taro.md

@@ -0,0 +1,87 @@
+# TextArea 文本域组件
+
+### 介绍
+
+文本框内输入或编辑文字，支持限制输入数量。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { TextArea } from '@nutui/nutui';
+
+const app = createApp();
+app.use(TextArea);
+
+```
+## 代码演示
+
+### 基础用法
+
+
+```html
+<nut-textarea v-model="value" />
+```
+``` javascript
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const value = ref('');
+    return { value };
+  },
+};
+```
+
+### 显示字数统计
+
+
+```html
+<nut-textarea v-model="value" limit-show max-length="20" />
+```
+
+### 高度自定义，拉伸
+
+
+```html
+<nut-textarea v-model="value" rows="10" autosize />
+```
+### 直读、禁用
+
+
+```html
+<nut-textarea readonly model-value="textarea直读状态" />
+<nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
+```
+
+
+### Prop
+
+| 参数        | 说明                                             | 类型           | 默认值         |
+|-------------|--------------------------------------------------|----------------|----------------|
+| v-model     | 输入值，支持双向绑定                             | String         | -              |
+| placeholder | 设置占位提示文字                                 | String         | `'请输入内容'` |
+| max-length  | 限制最长输入字符                                 | String、Number | -              |
+| rows        | textarea的高度                                   | String、Number | `2`            |
+| limit-show  | textarea是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
+| autosize    | 高度是否可拉伸                                   | Boolean        | `false`        |
+| text-align  | 文本位置,可选值`left`,`center`,`right`           | String         | `left`         |
+| readonly    | 只读属性                                         | Boolean        | `false`        |
+| disabled    | 禁用属性                                         | Boolean        | `false`        |
+
+
+### Event
+
+| 名称   | 说明           | 回调参数 |
+|--------|----------------|----------|
+| change | 输入内容时触发 | val      |
+| focus  | 聚焦时触发     | val      |
+| blur   | 失焦时触发     | val      |
+
+
+
+
+
+
+
+

src/packages/__VUE/toast/doc.taro.md

@@ -0,0 +1,93 @@
+# Toast 吐司
+
+轻提示。
+
+### 介绍
+
+用于轻提示。
+
+### 安装
+
+``` javascript
+import { createApp } from 'vue';
+import { Toast } from '@nutui/nutui';
+
+const app = createApp();
+app.use(Toast);
+```
+
+## 代码演示
+
+### 基本用法
+
+文字提示
+```javascript
+Toast.text('网络失败，请稍后再试~');
+```
+
+成功提示
+
+```javascript
+Toast.success('成功提示');
+```
+
+失败提示
+
+```javascript
+Toast.fail('失败提示');
+```
+
+警告提示
+
+```javascript
+Toast.warn('警告提示');
+```
+
+加载提示
+
+```javascript
+Toast.loading('加载中');
+```
+
+##¥ 支持在JS模块中导入使用
+```javascript
+import { Toast } from "@nutui/nutui";
+Toast.text('在js模块中使用');
+// 返回实例，可以手动调用实例中的hide方法关闭提示
+const toast = Toast.loading('在js模块中使用');
+toast.hide();
+```
+
+
+### API
+| 方法名                    | 说明                                                                    | 参数            | 返回值     |
+| ------------------------- | ----------------------------------------------------------------------- | --------------- | ---------- |
+| Toast.text                | 展示文字提示                                                            | options/message | toast 实例 |
+| Toast.success             | 展示成功提示                                                            | options/message | toast 实例 |
+| Toast.fail                | 展示失败提示                                                            | options/message | toast 实例 |
+| Toast.warn                | 展示警告提示                                                            | options/message | toast 实例 |
+| Toast.hide                | 关闭提示                                                                | force:boolean   | void       |
+| Toast.loading             | 展示加载提示                                                            | options/message | toast 实例 |
+
+## Options
+
+| 字段                | 说明                                                                          | 类型          | 默认值                        |
+| ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
+| msg                 | 消息文本内容,支持传入HTML                                                     | String/VNode  | ""                            |
+| id                  | 标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用 | String/Number | -                             |
+| duration            | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失（loading类型默认为0）       | Number        | 2000                          |
+| center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
+| bottom              | 距页面底部的距离（像素），option.center为false时生效                          | Number       | 30                          |
+| text-align-center     | 多行文案是否居中                                                              | Boolean       | true                          |
+| bg-color             | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"       |
+| custom-class         | 自定义类名                                                                    | String        | ""                            |
+| icon                | 自定义图标，**支持图片链接或base64格式**                                        | String        | ""                            |
+| size                | 文案尺寸，**small**/**base**/**large**三选一                                                  | String        | "base"                        |
+| cover               | 是否显示遮罩层，loading类型默认显示                                           | Boolean       | loading类型true/其他类型false |
+| cover-color          | 遮罩层颜色，默认透明                                                          | String        | "rgba(0,0,0,0)"               |
+| loading-rotate       | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
+| on-close             | 关闭时触发的事件                                                              | function      | null                          |
+| close-on-click-overlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |
+| toast-style          | 提示框style                                                        | object       | {}                         |
+| toast-class          | 提示框class                                                        | String       | ""                         |
+

src/sites/doc/components/Nav.vue

@@ -31,7 +31,10 @@
           :key="_package"
         >
           <li v-if="_package.show">
-            <router-link :to="_package.name.toLowerCase()">
+            <router-link
+              :to="_package.name.toLowerCase()"
+              :class="{ active: isActive(_package.name) }"
+            >
               {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
             </router-link>
           </li>
@@ -48,13 +51,14 @@ export default defineComponent({
   name: 'doc-nav',
   setup() {
     const isActive = computed(() => {
-      return function(name: string) {
-        return RefData.getInstance().currentRoute.value == name.toLowerCase();
+      return function (name: string) {
+        return (
+          RefData.getInstance().currentRoute.value == name.toLowerCase() ||
+          RefData.getInstance().currentRoute.value.indexOf(name.toLowerCase()) >
+            -1
+        );
       };
     });
-    onMounted(() => {
-      console.log('123' + nav);
-    });
     return {
       isActive,
       nav: reactive(nav),
@@ -122,7 +126,8 @@ export default defineComponent({
             }
           }
           a {
-            &.router-link-active {
+            &.router-link-active,
+            &.active {
               color: $doc-default-color !important;
             }
 

src/sites/doc/router.ts

@@ -29,6 +29,17 @@ for (const path in modulesPage) {
   });
 }
 
+/** vite-taro **/
+const modulesPageTaro = import.meta.glob('/src/packages/__VUE/**/*.taro.md');
+for (const path in modulesPageTaro) {
+  let name = (/packages\/__VUE\/(.*)\/doc.taro.md/.exec(path) as any[])[1];
+  pagesRouter.push({
+    path: `/${name}-taro`,
+    component: modulesPageTaro[path],
+    name: `${name}-taro`
+  });
+}
+
 /** webpack */
 // const docs = require.context('@/docs', true, /\.md$/);
 // docs.keys().forEach(component => {

src/sites/doc/views/Index.vue

@@ -1,19 +1,36 @@
 <template>
-  <doc-header></doc-header>
-  <doc-nav></doc-nav>
-  <div class="doc-content">
-    <div class="doc-content-document">
-      <router-view />
+  <div>
+    <doc-header></doc-header>
+    <doc-nav></doc-nav>
+    <div class="doc-content">
+      <div class="doc-content-document">
+        <div class="doc-content-tabs" v-if="isShow() && isShowTaroDoc">
+          <div
+            class="tab-item"
+            :class="{ cur: curKey === item.key }"
+            v-for="item in tabs"
+            :key="item.key"
+            @click="handleTabs(item.key)"
+            >{{ item.text }}</div
+          >
+        </div>
+        <div class="doc-content-tabs" v-if="isShow() && !isShowTaroDoc">
+          <div class="tab-item cur">Vue/Taro</div>
+        </div>
+        <router-view />
+      </div>
+      <doc-demo-preview :url="demoUrl"></doc-demo-preview>
     </div>
-    <doc-demo-preview :url="demoUrl"></doc-demo-preview>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue';
+import { nav } from '@/config.json';
 import {
   onBeforeRouteUpdate,
   RouteLocationNormalized,
-  useRoute
+  useRoute,
+  useRouter
 } from 'vue-router';
 import Header from '@/sites/doc/components/Header.vue';
 import Nav from '@/sites/doc/components/Nav.vue';
@@ -29,8 +46,50 @@ export default defineComponent({
     [DemoPreview.name]: DemoPreview
   },
   setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const excludeTaro = ['/intro', '/start', '/theme'];
     const data = reactive({
-      demoUrl: 'demo.html'
+      demoUrl: 'demo.html',
+      curKey: 'vue',
+      tabs: [
+        {
+          key: 'vue',
+          text: 'Vue'
+        },
+        {
+          key: 'taro',
+          text: 'Vue - Taro'
+        }
+      ]
+    });
+
+    const configNav = computed(() => {
+      let tarodocs = [];
+      nav.map((item) => {
+        item.packages.forEach((element) => {
+          let { tarodoc, name } = element;
+          if (tarodoc) {
+            tarodocs.push(name.toLowerCase());
+            tarodocs.push(`${name.toLowerCase()}-taro`);
+          }
+        });
+      });
+      return tarodocs;
+    });
+
+    const isTaro = (router: RouteLocationNormalized) => {
+      return router.path.indexOf('taro') > -1;
+    };
+
+    const isShow = () => {
+      return !excludeTaro.includes(route.path);
+    };
+
+    const isShowTaroDoc = computed(() => {
+      return (
+        configNav.value.findIndex((item) => item === route.path.substr(1)) > -1
+      );
     });
 
     const watchDemoUrl = (router: RouteLocationNormalized) => {
@@ -41,16 +100,34 @@ export default defineComponent({
       }`;
     };
 
+    const watchDocMd = () => {
+      const path = route.path;
+      router.replace(
+        isTaro(route) ? path.substr(0, path.length - 5) : `${path}-taro`
+      );
+    };
+
+    const handleTabs = (curKey: string) => {
+      data.curKey = curKey;
+      watchDocMd();
+    };
+
     onMounted(() => {
-      const route = useRoute();
       watchDemoUrl(route);
+      data.curKey = isTaro(route) ? 'taro' : 'vue';
     });
 
-    onBeforeRouteUpdate(to => {
+    onBeforeRouteUpdate((to) => {
       watchDemoUrl(to);
+      data.curKey = isTaro(to) ? 'taro' : 'vue';
     });
 
-    return data;
+    return {
+      ...toRefs(data),
+      handleTabs,
+      isShow,
+      isShowTaroDoc
+    };
   }
 });
 </script>
@@ -65,6 +142,41 @@ export default defineComponent({
     &-document {
       min-height: 800px;
     }
+    &-tabs {
+      position: absolute;
+      right: 445px;
+      top: 48px;
+      display: flex;
+      height: 50px;
+      align-items: center;
+      margin-bottom: 20px;
+      z-index: 1;
+      .tab-item {
+        position: relative;
+        padding: 10px 25px;
+        height: 100%;
+        cursor: pointer;
+        font-size: 20px;
+        color: #323232;
+        text-align: center;
+        border-radius: 4px;
+        &.cur {
+          color: #fa2c19;
+          &:after {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background-color: #fa2c19;
+          }
+        }
+        &:hover {
+          background-color: #f7f8fa;
+        }
+      }
+    }
   }
 }
 </style>

src/sites/mobile-taro/vue/src/app.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import './app.scss';
-import NutUI from '../../../../packages/nutui.taro.vue.ts';
+import NutUI from '../../../../packages/nutui.taro.vue';
 const App = createApp({
   onShow(options) {}
   // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖

src/sites/mobile/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="title != '/'" id="nav">
+  <div v-if="isShow" id="nav">
     <div class="back" @click="goBack">
       <nut-icon name="left"></nut-icon>
     </div>
@@ -8,7 +8,7 @@
   <router-view />
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, ref, watch, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { isMobile } from '@/sites/assets/util';
 export default defineComponent({
@@ -23,6 +23,13 @@ export default defineComponent({
     const goBack = () => {
       router.back();
     };
+
+    // 是否显示 title
+    const isShow = computed(() => {
+      return (
+        title.value && title.value != '/' && !title.value.includes('-taro')
+      );
+    });
     // 当当前路由发生变化时，调用回调函数
     watch(
       () => route,
@@ -42,7 +49,7 @@ export default defineComponent({
       }
     );
 
-    return { title, goBack };
+    return { title, isShow, goBack };
   }
 });
 </script>

src/sites/mobile/components/Index-taro.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="index">
+    <div class="index-header">
+      <img src="../../assets/images/logo-red.png" alt="" srcset="" />
+      <div class="info">
+        <h1>NutUI-Taro</h1>
+        <p>请使用微信扫描下方二维码查看效果</p>
+      </div>
+    </div>
+    <div class="index-wxcode">
+      <img
+        src="https://img12.360buyimg.com/imagetools/jfs/t1/162421/39/13392/9425/6052ea60E592310a9/264bdff23ef5fe95.png"
+        width="200"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'doc',
+  setup() {
+    return {};
+  }
+});
+</script>
+<style lang="scss" scoped>
+.index {
+  height: 100%;
+  width: 100%;
+  padding-top: 30px;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: 0 34px;
+    height: 117px;
+    > img {
+      width: 67px;
+      height: 67px;
+      margin-right: 18px;
+      flex-shrink: 0;
+    }
+    .info {
+      display: flex;
+      flex-direction: column;
+      h1 {
+        height: 48px;
+        line-height: 48px;
+        font-size: 34px;
+        color: rgba(51, 51, 51, 1);
+      }
+      p {
+        height: 18px;
+        line-height: 18px;
+        font-size: 12px;
+        color: rgba(154, 155, 157, 1);
+      }
+    }
+  }
+  &-wxcode {
+    display: flex;
+    height: calc(100% - 117px);
+    background: #f7f8fa;
+    border-radius: 30px 30px 0 0;
+    overflow: hidden;
+    padding: 30px 25px;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/sites/mobile/router.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 import Index from './components/Index.vue';
+import IndexTaro from './components/Index-Taro.vue';
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -29,6 +30,12 @@ for (const path in modulesPage) {
     component: modulesPage[path],
     name
   });
+
+  routes.push({
+    path: '/' + name + '-taro',
+    component: IndexTaro,
+    name: name + '-taro'
+  });
 }
 
 routes.push({