feat: 小程序demo增加顶部

jd/generate-themes.cjs

@@ -26,8 +26,8 @@ tasks.push(fs.copy(path.resolve(__dirname, '../src/packages/styles'), path.resol
 
 Promise.all(tasks).then((res) => {
   let themes = [
-    { file: 'default.scss', sourcePath: `@import '../variables.scss';\n @import '../theme-deafult.scss';` },
-    { file: 'jdt.scss', sourcePath: `@import '../variables-jdt.scss';\n @import '../theme-jdt.scss'; ` },
+    { file: 'default.scss', sourcePath: `@import '../variables.scss';` },
+    { file: 'jdt.scss', sourcePath: `@import '../variables-jdt.scss';` },
     { file: 'jdb.scss', sourcePath: `@import '../variables-jdb.scss';` },
     { file: 'jddkh.scss', sourcePath: `@import '../variables-jddkh.scss';` }
   ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.15",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.cjs",
   "module": "dist/nutui.es.js",

publish/nutui-taro/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-taro",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.15",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.cjs",
   "module": "dist/nutui.es.js",
@@ -48,7 +48,8 @@
     }
   },
   "dependencies": {
-    "@nutui/icons-vue-taro": "^0.0.4"
+    "@nutui/icons-vue-taro": "^0.0.4",
+    "sass": "^1.50.0"
   },
   "devDependencies": {},
   "repository": {

publish/nutui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "4.0.0-beta.13",
+  "version": "4.0.0-beta.15",
   "description": "京东风格的轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）",
   "main": "dist/nutui.umd.cjs",
   "module": "dist/nutui.es.js",
@@ -36,7 +36,8 @@
     "publish:beta": "npm publish --tag=beta"
   },
   "dependencies": {
-    "@nutui/icons-vue": "^0.0.20"
+    "@nutui/icons-vue": "^0.0.20",
+    "sass": "^1.50.0"
   },
   "devDependencies": {},
   "repository": {

src/config.json

@@ -15,6 +15,12 @@
         "show": true
       },
       {
+        "name": "official-theme",
+        "cName": "官方主题",
+        "eName": "Official Theme",
+        "show": true
+      },
+      {
         "name": "theme",
         "cName": "定制主题",
         "eName": "Customize Theme",

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

@@ -587,7 +587,7 @@ If you want to select a province, you need to set the region ID in the order of
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/address/doc.md

@@ -609,7 +609,7 @@ app.use(Address);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -610,7 +610,7 @@ app.use(Address);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/addresslist/components/GeneralShell.vue

@@ -1,14 +1,6 @@
 <template>
-  <div class="nut-address-list-general">
-    <item-contents
-      :item="item"
-      @delIcon="delShellClick"
-      @editIcon="editShellClick"
-      @itemClick="itemShellClick"
-      @touchstart="holddownstart"
-      @touchend="holddownend"
-      @touchmove="holddownmove"
-    >
+  <div class="nut-address-list-general" v-if="!swipeEdition">
+    <component :is="renderCompontent()" @touchstart="holddownstart" @touchend="holddownend" @touchmove="holddownmove">
       <template v-slot:contentTop>
         <slot name="contentInfo"></slot>
       </template>
@@ -18,7 +10,7 @@
       <template v-slot:contentAddr>
         <slot name="contentAddrs"></slot>
       </template>
-    </item-contents>
+    </component>
     <div class="nut-address-list-general__mask" v-if="longPress && showMaskRef" @click="maskClick">
       <slot name="longpressAll">
         <div class="nut-address-list-general__mask-copy" @click="copyCLick">
@@ -27,16 +19,36 @@
         <div class="nut-address-list-general__mask-set" @click="setDefault">
           <div class="nut-address-list-mask-contain"> 设置<br />默认 </div>
         </div>
-        <div class="nut-address-list-general__mask-del" @click="delClick">
+        <div class="nut-address-list-general__mask-del" @click="delLongClick">
           <div class="nut-address-list-mask-contain"> 删除<br />地址 </div>
         </div>
       </slot>
     </div>
     <div class="nut-address-list__mask-bottom" v-if="showMaskRef" @click="hideMaskClick"></div>
   </div>
+  <nut-swipe v-else>
+    <div class="nut-address-list-swipe">
+      <component :is="renderCompontent()" @touchmove="swipemove" @touchstart="swipestart">
+        <template v-slot:contentTop>
+          <slot name="contentInfo"></slot>
+        </template>
+        <template v-slot:contentIcon>
+          <slot name="contentIcons"></slot>
+        </template>
+        <template v-slot:contentAddr>
+          <slot name="contentAddrs"></slot>
+        </template>
+      </component>
+    </div>
+    <template #right>
+      <slot name="swiperightbtn">
+        <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
+      </slot>
+    </template>
+  </nut-swipe>
 </template>
 <script lang="ts">
-import { ref } from 'vue';
+import { ref, h } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('addresslist-general');
 import ItemContents from './ItemContents.vue';
@@ -50,29 +62,53 @@ export default create({
     longPress: {
       type: Boolean,
       default: false
+    },
+    swipeEdition: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel'],
+  emits: ['delIcon', 'editIcon', 'itemClick', 'longDown', 'longCopy', 'longSet', 'longDel', 'swipeDel'],
   components: {
     ItemContents
   },
 
   setup(props, { emit }) {
+    const renderCompontent = () => {
+      return h(ItemContents, {
+        item: props.item,
+        onDelIcon(event: Event) {
+          delClick(event);
+        },
+        onEditIcon(event: Event) {
+          editClick(event);
+        },
+        onItemClick(event: Event) {
+          itemClick(event);
+        }
+      });
+    };
     let loop: any = null;
+    const moveRef = ref(false);
     const showMaskRef = ref(false);
 
-    const delShellClick = (event: Event) => {
+    const delClick = (event: Event) => {
       emit('delIcon', event, props.item);
       event.stopPropagation();
     };
-    const editShellClick = (event: Event) => {
+    const editClick = (event: Event) => {
       emit('editIcon', event, props.item);
       event.stopPropagation();
     };
-    const itemShellClick = (event: Event) => {
+    const itemClick = (event: Event) => {
+      if (moveRef.value) return;
       emit('itemClick', event, props.item);
       event.stopPropagation();
     };
+    const delLongClick = (event: Event) => {
+      emit('longDel', event, props.item);
+      event.stopPropagation();
+    };
     const holdingFunc = (event: Event) => {
       loop = 0;
       showMaskRef.value = true;
@@ -103,10 +139,6 @@ export default create({
       emit('longSet', event, props.item);
       event.stopPropagation();
     };
-    const delClick = (event: Event) => {
-      emit('longDel', event, props.item);
-      event.stopPropagation();
-    };
     const maskClick = (event: Event) => {
       if (loop != 0) {
         // 排除长按时触发点击的情况
@@ -115,20 +147,34 @@ export default create({
       event.stopPropagation();
       event.preventDefault();
     };
+    const swipeDelClick = (event: Event) => {
+      emit('swipeDel', event, props.item);
+      event.stopPropagation();
+    };
+    const swipestart = () => {
+      moveRef.value = false;
+    };
+    const swipemove = () => {
+      moveRef.value = true;
+    };
 
     return {
-      delShellClick,
-      editShellClick,
-      itemShellClick,
+      renderCompontent,
+      showMaskRef,
+      itemClick,
+      editClick,
+      delClick,
+      delLongClick,
       holddownstart,
       holddownmove,
       holddownend,
-      showMaskRef,
-      delClick,
       copyCLick,
       hideMaskClick,
       setDefault,
-      maskClick
+      maskClick,
+      swipeDelClick,
+      swipestart,
+      swipemove
     };
   }
 });

src/packages/__VUE/addresslist/components/SwipeShell.vue

@@ -1,85 +0,0 @@
-<template>
-  <nut-swipe>
-    <div class="nut-address-list-swipe">
-      <item-contents
-        :item="item"
-        @delIcon="delClick"
-        @editIcon="editClick"
-        @itemClick="itemClick"
-        @touchmove="swipemove"
-        @touchstart="swipestart"
-      >
-        <template v-slot:contentTop>
-          <slot name="contentInfo"></slot>
-        </template>
-        <template v-slot:contentIcon>
-          <slot name="contentIcons"></slot>
-        </template>
-        <template v-slot:contentAddr>
-          <slot name="contentAddrs"></slot>
-        </template>
-      </item-contents>
-    </div>
-    <template #right>
-      <slot name="swiperightbtn">
-        <nut-button shape="square" style="height: 100%" type="danger" @click="swipeDelClick">删除</nut-button>
-      </slot>
-    </template>
-  </nut-swipe>
-</template>
-<script lang="ts">
-import { ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { create } = createComponent('addresslist-swipe');
-import ItemContents from './ItemContents.vue';
-
-export default create({
-  props: {
-    item: {
-      type: Object,
-      default: {}
-    }
-  },
-  emits: ['delIcon', 'editIcon', 'itemClick', 'swipeDel'],
-  components: {
-    ItemContents
-  },
-
-  setup(props, { emit }) {
-    const moveRef = ref(false);
-    const delClick = (event: Event) => {
-      emit('delIcon', event, props.item);
-      event.stopPropagation();
-    };
-    const editClick = (event: Event) => {
-      emit('editIcon', event, props.item);
-      event.stopPropagation();
-    };
-    const itemClick = (event: Event) => {
-      if (moveRef.value) return;
-      emit('itemClick', event, props.item);
-      event.stopPropagation();
-    };
-    const swipeDelClick = (event: Event) => {
-      emit('swipeDel', event, props.item);
-      event.stopPropagation();
-    };
-
-    const swipestart = () => {
-      moveRef.value = false;
-    };
-    const swipemove = () => {
-      moveRef.value = true;
-    };
-
-    return {
-      delClick,
-      editClick,
-      itemClick,
-      swipeDelClick,
-      swipestart,
-      swipemove
-    };
-  }
-});
-</script>

src/packages/__VUE/addresslist/demo.vue

@@ -24,7 +24,7 @@
       :dataMapOptions="dataMapOptions"
     >
     </nut-address-list>
-    <h2>{{ translate('title1') }}</h2>
+    <h2>{{ translate('title2') }}</h2>
     <nut-address-list
       :data="data"
       swipeEdition

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

@@ -301,7 +301,7 @@ const dataMapOptions = {
 ### CSS Variables
 
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/addresslist/doc.md

@@ -305,7 +305,7 @@ const dataMapOptions = {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -298,7 +298,7 @@ const dataMapOptions = {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/addresslist/index.taro.vue

@@ -1,57 +1,35 @@
 <template>
   <div :class="classes">
-    <template v-if="!swipeEdition">
-      <general-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        :longPress="longPress"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-        @longCopy="clickLongCopy"
-        @longSet="clickLongSet"
-        @longDel="clickLongDel"
-      >
-        <template v-slot:contentInfo v-if="longPress">
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons v-if="longPress">
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs v-if="longPress">
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:longpressAll v-if="longPress">
-          <slot name="longpressbtns"></slot>
-        </template>
-      </general-shell>
-    </template>
-    <template v-if="swipeEdition">
-      <swipe-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-      >
-        <template v-slot:contentInfo>
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons>
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs>
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:swiperightbtn>
-          <slot name="swiperight"></slot>
-        </template>
-      </swipe-shell>
-    </template>
+    <general-shell
+      v-for="(item, index) of dataArray"
+      :key="index"
+      :item="item"
+      :longPress="longPress"
+      :swipeEdition="swipeEdition"
+      @delIcon="clickDelIcon"
+      @editIcon="clickEditIcon"
+      @itemClick="clickContentItem"
+      @swipeDel="clickSwipeDel"
+      @longCopy="clickLongCopy"
+      @longSet="clickLongSet"
+      @longDel="clickLongDel"
+    >
+      <template v-slot:contentInfo>
+        <slot name="iteminfos"></slot>
+      </template>
+      <template v-slot:contentIcons>
+        <slot name="itemicon"></slot>
+      </template>
+      <template v-slot:contentAddrs>
+        <slot name="itemaddr"></slot>
+      </template>
+      <template v-slot:longpressAll v-if="longPress">
+        <slot name="longpressbtns"></slot>
+      </template>
+      <template v-slot:swiperightbtn v-if="swipeEdition">
+        <slot name="swiperight"></slot>
+      </template>
+    </general-shell>
     <div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
@@ -61,7 +39,6 @@
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('address-list');
-import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 import Button from '../button/index.taro.vue';
@@ -90,7 +67,6 @@ export default create({
     }
   },
   components: {
-    SwipeShell,
     GeneralShell,
     [Button.name]: Button,
     [Swipe.name]: Swipe

src/packages/__VUE/addresslist/index.vue

@@ -1,57 +1,35 @@
 <template>
   <div :class="classes">
-    <template v-if="!swipeEdition">
-      <general-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        :longPress="longPress"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-        @longCopy="clickLongCopy"
-        @longSet="clickLongSet"
-        @longDel="clickLongDel"
-      >
-        <template v-slot:contentInfo v-if="longPress">
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons v-if="longPress">
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs v-if="longPress">
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:longpressAll v-if="longPress">
-          <slot name="longpressbtns"></slot>
-        </template>
-      </general-shell>
-    </template>
-    <template v-if="swipeEdition">
-      <swipe-shell
-        v-for="(item, index) of dataArray"
-        :key="index"
-        :item="item"
-        @delIcon="clickDelIcon"
-        @editIcon="clickEditIcon"
-        @itemClick="clickContentItem"
-        @swipeDel="clickSwipeDel"
-      >
-        <template v-slot:contentInfo>
-          <slot name="iteminfos"></slot>
-        </template>
-        <template v-slot:contentIcons>
-          <slot name="itemicon"></slot>
-        </template>
-        <template v-slot:contentAddrs>
-          <slot name="itemaddr"></slot>
-        </template>
-        <template v-slot:swiperightbtn>
-          <slot name="swiperight"></slot>
-        </template>
-      </swipe-shell>
-    </template>
+    <general-shell
+      v-for="(item, index) of dataArray"
+      :key="index"
+      :item="item"
+      :longPress="longPress"
+      :swipeEdition="swipeEdition"
+      @delIcon="clickDelIcon"
+      @editIcon="clickEditIcon"
+      @itemClick="clickContentItem"
+      @swipeDel="clickSwipeDel"
+      @longCopy="clickLongCopy"
+      @longSet="clickLongSet"
+      @longDel="clickLongDel"
+    >
+      <template v-slot:contentInfo>
+        <slot name="iteminfos"></slot>
+      </template>
+      <template v-slot:contentIcons>
+        <slot name="itemicon"></slot>
+      </template>
+      <template v-slot:contentAddrs>
+        <slot name="itemaddr"></slot>
+      </template>
+      <template v-slot:longpressAll v-if="longPress">
+        <slot name="longpressbtns"></slot>
+      </template>
+      <template v-slot:swiperightbtn v-if="swipeEdition">
+        <slot name="swiperight"></slot>
+      </template>
+    </general-shell>
     <div class="nut-address-list__bottom" v-if="showBottomButton" @click="addAddress">
       <nut-button block type="danger">{{ translate('addAddress') }}</nut-button>
     </div>
@@ -61,7 +39,6 @@
 import { reactive, onMounted, ref, watch, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('address-list');
-import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 import Button from '../button/index.vue';
@@ -90,7 +67,6 @@ export default create({
     }
   },
   components: {
-    SwipeShell,
     GeneralShell,
     [Button.name]: Button,
     [Swipe.name]: Swipe

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

@@ -252,7 +252,7 @@ Icon and letter types can have custom colors and background colors
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/avatar/index.scss

@@ -7,6 +7,7 @@
   flex: 0 0 auto; // 防止被压缩
   text-align: center;
   img {
+    display: block;
     width: 100%;
     height: 100%;
   }

src/packages/__VUE/avatar/index.taro.vue

@@ -6,9 +6,7 @@
     v-if="showMax || !avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount"
   >
     <template v-if="!avatarGroup?.props?.maxCount || index <= avatarGroup?.props?.maxCount">
-      <view>
-        <slot></slot>
-      </view>
+      <slot></slot>
     </template>
     <!-- 折叠头像 -->
     <template v-if="showMax && avatarGroup?.props?.maxCount">

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

@@ -229,7 +229,7 @@ app.use(Backtop);
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 
 | --nut-backtop-border-color       | _#e0e0e0_        | 

src/packages/__VUE/backtop/doc.md

@@ -233,7 +233,7 @@ app.use(Backtop);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -222,7 +222,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -234,7 +234,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/badge/doc.md

@@ -235,7 +235,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -234,7 +234,7 @@ import { Check, Link, Download } from '@nutui/icons-vue';
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -203,6 +203,13 @@ The color of the button can be customized through the color property.
 | block    | Whether to set display block      | boolean | `false`   |
 | loading  | Whether to show loading status     | boolean | `false`   |
 
+### Slots
+
+| Name | Description |
+|-|-|
+| default | button content |
+| icon | button icon |
+
 ### Events
 
 | Event | Description           | Arguments          |
@@ -213,7 +220,7 @@ The color of the button can be customized through the color property.
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/button/doc.md

@@ -221,7 +221,7 @@ app.use(Button);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -198,9 +198,15 @@ app.use(Button);
 | plain    | 是否为朴素按钮                                               | boolean | `false`   |
 | disabled | 是否禁用按钮                                                 | boolean | `false`   |
 | block    | 是否为块级元素                                               | boolean | `false`   |
-| icon     | 按钮图标，同 `Icon` 组件 `name` 属性                             | string  | -         |
 | loading  | 按钮 `loading` 状态                                            | boolean | `false`   |
 
+### Slots
+
+| 名称 | 说明 |
+|-|-|
+| default | 按钮内容 |
+| icon | 按钮图标 |
+
 ### Events
 
 | 事件名 | 说明           | 回调参数          |
@@ -211,7 +217,7 @@ app.use(Button);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/button/index.scss

@@ -16,7 +16,6 @@
   user-select: none;
   touch-action: manipulation;
   vertical-align: bottom;
-
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-tap-highlight-color: transparent;
 
@@ -174,3 +173,66 @@
     border-radius: 0;
   }
 }
+.nut-button--default:not([disabled]):active {
+  color: $button-default-color;
+  background: $button-default-bg-color;
+  border: $button-border-width solid $button-default-border-color;
+}
+.nut-button--primary:not([disabled]):active {
+  color: $button-primary-color;
+  background: $button-primary-background-color;
+  border: $button-border-width solid transparent;
+}
+
+.nut-button--info:not([disabled]):active {
+  color: $button-info-color;
+  background: $button-info-background-color;
+  border: $button-border-width solid transparent;
+}
+
+.nut-button--success:not([disabled]):active {
+  color: $button-success-color;
+  background: $button-success-background-color;
+  border: $button-border-width solid transparent;
+}
+
+.nut-button--danger:not([disabled]):active {
+  color: $button-danger-color;
+  background: $button-danger-background-color;
+  border: $button-border-width solid transparent;
+}
+
+.nut-button--warning:not([disabled]):active {
+  color: $button-warning-color;
+  background: $button-warning-background-color;
+  border: $button-border-width solid transparent;
+}
+.nut-button--plain:not([disabled]):active {
+  background: $button-plain-background-color;
+}
+.nut-button--plain {
+  &.nut-button--primary:not([disabled]):active {
+    color: $button-primary-border-color;
+    border-color: $button-primary-border-color;
+  }
+
+  &.nut-button--info:not([disabled]):active {
+    color: $button-info-border-color;
+    border-color: $button-info-border-color;
+  }
+
+  &.nut-button--success:not([disabled]):active {
+    color: $button-success-border-color;
+    border-color: $button-success-border-color;
+  }
+
+  &.nut-button--danger:not([disabled]):active {
+    color: $button-danger-border-color;
+    border-color: $button-danger-border-color;
+  }
+
+  &.nut-button--warning:not([disabled]):active {
+    color: $button-warning-border-color;
+    border-color: $button-warning-border-color;
+  }
+}

src/packages/__VUE/button/index.taro.vue

@@ -47,18 +47,6 @@ export default create({
     block: {
       type: Boolean,
       default: false
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    iconClassPrefix: {
-      type: String,
-      default: 'nut-icon'
-    },
-    iconFontClassName: {
-      type: String,
-      default: 'nutui-iconfont'
     }
   },
   emits: ['click'],

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

@@ -643,7 +643,7 @@ Through [ref](https://vuejs.org/guide/essentials/template-refs.html), you can ge
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/calendar/doc.md

@@ -637,7 +637,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -637,7 +637,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -181,7 +181,7 @@ app.use(Card);
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/card/doc.md

@@ -178,7 +178,7 @@ app.use(Card);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -180,7 +180,7 @@ app.use(Card);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -443,7 +443,7 @@ export default {
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name                             | Default Value              |
 |----------------------------------|----------------------------|

src/packages/__VUE/cascader/doc.md

@@ -443,7 +443,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                             | 默认值                     |
 |----------------------------------|----------------------------|

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

@@ -443,7 +443,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                             | 默认值                     |
 |----------------------------------|----------------------------|

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

@@ -221,7 +221,7 @@ export default {
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/category/doc.md

@@ -222,7 +222,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -221,7 +221,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -254,7 +254,7 @@ You can center the left and right contents of the cell vertically through the 'c
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name                               | Default Value                |
 |------------------------------------|------------------------------|

src/packages/__VUE/cell/doc.md

@@ -257,7 +257,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                               | 默认值                       |
 |------------------------------------|------------------------------|

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

@@ -241,7 +241,7 @@ app.use(CellGroup);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                               | 默认值                       |
 |------------------------------------|------------------------------|

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

@@ -420,7 +420,7 @@ When the value changes, the `change` event will be triggered
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/checkbox/doc.md

@@ -425,7 +425,7 @@ app.use(Checklist);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -422,7 +422,7 @@ app.use(Checklist);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 描述 |
 | --------------------------------------- | -------------------------- | ---- |

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

@@ -150,7 +150,7 @@ export default {
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/circleprogress/doc.md

@@ -150,7 +150,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -222,7 +222,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/collapse/doc.md

@@ -217,7 +217,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- |

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

@@ -218,7 +218,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

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

@@ -242,7 +242,7 @@ const info = [{
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/comment/doc.md

@@ -246,7 +246,7 @@ const info = [{
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -247,7 +247,7 @@ const info = [{
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -346,7 +346,7 @@ Paused and restarted the countdown with the `paused` attribute
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/countdown/doc.md

@@ -350,7 +350,7 @@ app.use(Countdown);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -350,7 +350,7 @@ app.use(Countdown);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -126,23 +126,6 @@ export default {
 ```
 ::: 
 
-### Teleport use, mount to the specified element node
-
-``` html
-<nut-dialog teleport="#app" ... />
-```
-
-``` javascript
-showDialog({
-  teleport: '#app',
-  ...
-});
-showDialog({
-  teleport: '.demo',
-  ...
-});
-```
-
 ### Template use
 
 :::demo
@@ -186,6 +169,46 @@ export default {
 </script>
 ```
 :::
+
+
+### Teleport use, mount to the specified element node
+
+:::demo
+``` html
+<template>
+  <nut-cell-group title="Teleport use, mount to the specified element node">
+    <nut-cell title="body element node" @click="teleportClick('body')"></nut-cell>
+    <nut-cell title="#app element node" @click="teleportClick('#app')"></nut-cell>
+    <nut-cell title="demo class element node" @click="teleportClick('.demo')"></nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
+export default {
+  setup() {
+    const onCancel = () => {
+      console.log('event cancel');
+    };
+    const teleportClick = (teleport: string) => {
+      showDialog({
+        teleport,
+        title: 'teleport to ' + teleport,
+        content: 'Open the developer tool and take a look at the Elements tab',
+        noCancelBtn: true,
+        onCancel
+      });
+    };
+    return {
+      teleportClick
+    }
+  }
+}
+</script>
+```
+:::
+
+
 ## API
 ### DialogOptions
 | Attribute           | Description                                                                    | Type                     | Default              |
@@ -263,7 +286,7 @@ export default {
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name                                | Default Value         |
 |-------------------------------------|-----------------------|

src/packages/__VUE/dialog/doc.md

@@ -18,7 +18,7 @@ app.use(Dialog);
 ```
 
 
-### 函数调用
+### 函数式调用
 
 :::demo
 ```html
@@ -126,30 +126,13 @@ export default {
 ```
 ::: 
 
-### teleport 使用，挂载到指定节点
-
-``` html
-<nut-dialog teleport="#app" ... />
-```
-
-``` javascript
-showDialog({
-  teleport: '#app',
-  ...
-});
-showDialog({
-  teleport: '.demo',
-  ...
-});
-```
-
-### 标签式组件使用
+### 标签式使用
 
 :::demo
 ```html
 <template>
   <nut-cell-group title="标签式使用">
-    <nut-cell title="组件调用" @click="componentClick"></nut-cell>
+    <nut-cell title="标签式使用" @click="componentClick"></nut-cell>
     <nut-dialog
       teleport="#app"
       title="组件调用"
@@ -187,6 +170,42 @@ export default {
 ```
 :::
 
+### teleport 使用，挂载到指定节点
+
+:::demo
+``` html
+<template>
+  <nut-cell-group title="Teleport 使用，挂载到指定节点">
+    <nut-cell title="body element node" @click="teleportClick('body')"></nut-cell>
+    <nut-cell title="#app element node" @click="teleportClick('#app')"></nut-cell>
+    <nut-cell title="demo class element node" @click="teleportClick('.demo')"></nut-cell>
+  </nut-cell-group>
+</template>
+<script lang="ts">
+import { showDialog } from '@nutui/nutui';
+import '@nutui/nutui/dist/packages/dialog/style';
+export default {
+  setup() {
+    const onCancel = () => {
+      console.log('event cancel');
+    };
+    const teleportClick = (teleport: string) => {
+      showDialog({
+        teleport,
+        title: 'teleport to ' + teleport,
+        content: '打开开发者工具看一下 Elements Tab',
+        noCancelBtn: true,
+        onCancel
+      });
+    };
+    return {
+      teleportClick
+    }
+  }
+}
+</script>
+```
+:::
 ## API
 ### DialogOptions
 | 参数                | 说明                                                          | 类型                     | 默认值               |
@@ -264,7 +283,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                | 默认值                |
 |-------------------------------------|-----------------------|

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

@@ -160,7 +160,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                | 默认值                |
 |-------------------------------------|-----------------------|

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

@@ -126,7 +126,7 @@ User can custom divider style with style attribute.
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/divider/doc.md

@@ -125,7 +125,7 @@ app.use(Divider);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -126,7 +126,7 @@ app.use(Divider);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -101,7 +101,7 @@ app.use(Ecard);
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/ecard/doc.md

@@ -101,7 +101,7 @@ app.use(Ecard);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -101,7 +101,7 @@ app.use(Ecard);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 描述 |
 | --------------------------------------- | -------------------------- | ---- |

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

@@ -494,7 +494,7 @@ app.use(Elevator);
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/elevator/doc.md

@@ -496,7 +496,7 @@ app.use(Elevator);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -495,7 +495,7 @@ app.use(Elevator);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -103,7 +103,7 @@ app.use(Ellipsis);
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/ellipsis/doc.md

@@ -103,7 +103,7 @@ app.use(Ellipsis);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -103,7 +103,7 @@ app.use(Ellipsis);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -80,7 +80,7 @@ app.use(Empty);
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/empty/doc.md

@@ -81,7 +81,7 @@ app.use(Empty);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -80,7 +80,7 @@ app.use(Empty);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -165,7 +165,7 @@ const navList = reactive([
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name                             | Default Value                                                                             |
 |----------------------------------|-------------------------------------------------------------------------------------------|

src/packages/__VUE/fixednav/doc.md

@@ -166,7 +166,7 @@ const navList = reactive([
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                             | 默认值                                                                                    |
 |----------------------------------|-------------------------------------------------------------------------------------------|

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

@@ -171,7 +171,7 @@ return {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                             | 默认值                                                                                    |
 |----------------------------------|-------------------------------------------------------------------------------------------|

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

@@ -425,7 +425,7 @@ Use [ref](https://vuejs.org/guide/essentials/template-refs.html#template-refs) t
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name                                  | Default Value               |
 |---------------------------------------|-----------------------------|

src/packages/__VUE/form/doc.md

@@ -423,7 +423,7 @@ setup(){
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                  | 默认值                      |
 |---------------------------------------|-----------------------------|

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

@@ -418,7 +418,7 @@ setup(){
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                  | 默认值                      |
 |---------------------------------------|-----------------------------|

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

@@ -252,7 +252,7 @@ app.use(GridItem);
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/grid/doc.md

@@ -249,7 +249,7 @@ app.use(GridItem);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -247,7 +247,7 @@ app.use(GridItem);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -81,7 +81,7 @@ app.use(Indicator);
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/indicator/doc.md

@@ -81,7 +81,7 @@ app.use(Indicator);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -81,7 +81,7 @@ app.use(Indicator);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -128,7 +128,7 @@ Scrolling to the bottom of the list automatically loads more data.
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/infiniteloading/doc.md

@@ -131,7 +131,7 @@
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- | 

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

@@ -405,7 +405,7 @@ After setting the `maxlength` and `show-word-limit` attributes, word count will
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value | 
 | --------------------------------------- | -------------------------- | 

src/packages/__VUE/input/doc.md

@@ -423,7 +423,7 @@ app.use(Input);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- | 

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

@@ -410,7 +410,7 @@ app.use(Input);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     | 
 | --------------------------------------- | -------------------------- |

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

@@ -274,7 +274,7 @@ Asynchronous modification through `change` event and `model-value`
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/inputnumber/doc.md

@@ -274,7 +274,7 @@ app.use(InputNumber);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -270,7 +270,7 @@ app.use(InputNumber);
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |

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

@@ -168,7 +168,7 @@ The optional attributes are as follows:
 
 ### CSS Variables
 
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
+The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
 | Name | Default Value |
 | --------------------------------------- | -------------------------- |

src/packages/__VUE/invoice/doc.md

@@ -166,7 +166,7 @@ export default {
 
 ### 样式变量
 
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
 | 名称                                    | 默认值                     |
 | --------------------------------------- | -------------------------- |