Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

src/packages/__VUE/cell/demo.vue

@@ -47,7 +47,7 @@
       <nut-cell :title="translate('image')">
         <template v-slot:icon>
           <img
-            class="nut-icon"
+            style="width: 20px; height: 20px"
             src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
           />
         </template>

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

@@ -141,7 +141,7 @@ app.use(CellGroup);
     <nut-cell title="Image">
       <template v-slot:icon>
         <img
-          class="nut-icon"
+          style="width:20px;height: 20px;"
           src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
         />
       </template>

src/packages/__VUE/cell/doc.md

@@ -144,7 +144,7 @@ app.use(CellGroup);
     <nut-cell title="图片">
       <template v-slot:icon>
         <img
-          class="nut-icon"
+          style="width:20px;height: 20px;"
           src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
         />
       </template>

src/packages/__VUE/cell/index.scss

@@ -80,6 +80,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
+    min-width: 80px;
     &-desc {
       font-size: $cell-title-desc-font;
     }
@@ -87,6 +88,7 @@
   &__value {
     display: inline-block;
     text-align: right;
+    flex: 1;
     font-size: $cell-desc-font;
     color: $cell-desc-color;
     &--alone {

src/packages/__VUE/comment/index.scss

@@ -91,7 +91,7 @@
       &-complex {
         display: flex;
         align-items: center;
-        font-weight: bold;
+        color: $comment-header-user-name-color;
 
         &-name {
           margin-right: 10px;

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

@@ -230,7 +230,7 @@ app.use(GridItem);
 | Attribute | Description | Type | Default |
 |-|-|-|-|
 | text | text | string | - |
-| url | Link URL | string | - |
+| url | Link URL | string | `''` |
 | to | Target route of the link, same as [to](https://router.vuejs.org/zh/api/#to) of vue-router | string \| object| - |
 | replace  | If true, the navigation will not leave a history record | boolean | `false` |
 

src/packages/__VUE/grid/doc.md

@@ -228,7 +228,7 @@ app.use(GridItem);
 | 参数                  | 说明                                                                                     | 类型               | 默认值      |
 |----------------------|-----------------------------------------------------------------------------------------|--------------------|------------|
 | text                 | 文字                                                                                     | string             | -          |
-| url     | 点击后跳转的链接地址                                                                        | string            | -           |
+| url     | 点击后跳转的链接地址                                                                        | string            | `''`           |
 | to      | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | string \| object  | -           |
 | replace | 是否在跳转时替换当前页面历史                                                                 | boolean           | `false`     |
 

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

@@ -169,29 +169,6 @@ app.use(GridItem);
 ```
 :::
 
-### 页面导航
-
-:::demo
-```html
-<template>
-  <nut-grid :column-num="2">
-    <nut-grid-item text="路由跳转" to="/">
-      <Home />
-    </nut-grid-item>
-    <nut-grid-item text="链接跳转" url="https://jd.com">
-      <Search />
-    </nut-grid-item>
-  </nut-grid>
-</template>
-<script lang="ts">
-  import { Home, Search } from '@nutui/icons-vue-taro';
-  export default {
-    components: { Home, Search },
-  };
-</script>
-```
-:::
-
 ### 自定义内容
 
 :::demo

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

@@ -56,6 +56,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
   <nut-cell title="请选择城市" :desc="popupDesc" @click="show = true"></nut-cell>
     <nut-popup position="bottom"  v-model:visible="show">
       <nut-picker
+        v-model="popupValue"
         :columns="columns"
         title="请选择城市"
         @confirm="popupConfirm"
@@ -71,6 +72,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
     setup(props) {
       const show = ref(false)
       const popupDesc = ref()
+      const popupValue = ref();
       const columns = ref([
         { text: '南京市', value: 'NanJing' },
         { text: '无锡市', value: 'WuXi' },
@@ -86,7 +88,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
         show.value = false
       }
 
-      return {show,popupDesc,columns, confirm,popupConfirm};
+      return {show,popupDesc,columns, confirm,popupConfirm,popupValue};
     }
   };
 </script>

src/packages/__VUE/pullrefresh/__tests__/pullrefresh.spec.ts

@@ -20,26 +20,26 @@ test('pull base', async () => {
     }
   });
 
-  const track = wrapper.find('.nut-pullrefresh');
+  const track = wrapper.find('.nut-pull-refresh');
 
   trigger(track, 'touchstart', 0, 0);
   trigger(track, 'touchmove', 0, 20);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('下拉刷新');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('下拉刷新');
 
   trigger(track, 'touchmove', 0, 60);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('释放刷新');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('释放刷新');
 
   trigger(track, 'touchend', 0, 100);
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('加载中...');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('加载中...');
 
   triggerDrag(track, 0, 100);
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('加载中...');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('加载中...');
 
   expect(wrapper.emitted('update:modelValue')).toBeTruthy();
   expect(wrapper.emitted('refresh')).toBeTruthy();
@@ -55,26 +55,26 @@ test('Custom loading text', async () => {
     }
   });
 
-  const track = wrapper.find('.nut-pullrefresh');
+  const track = wrapper.find('.nut-pull-refresh');
 
   trigger(track, 'touchstart', 0, 0);
   trigger(track, 'touchmove', 0, 20);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('用力拉');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('用力拉');
 
   trigger(track, 'touchmove', 0, 60);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('松开吧');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('松开吧');
 
   trigger(track, 'touchend', 0, 100);
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('玩命加载中...');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('玩命加载中...');
 
   triggerDrag(track, 0, 100);
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('玩命加载中...');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('玩命加载中...');
 
   expect(wrapper.emitted('update:modelValue')).toBeTruthy();
   expect(wrapper.emitted('refresh')).toBeTruthy();
@@ -88,13 +88,13 @@ test('Should allow to custom pull distance', async () => {
     }
   });
 
-  const track = wrapper.find('.nut-pullrefresh');
+  const track = wrapper.find('.nut-pull-refresh');
 
   trigger(track, 'touchstart', 0, 0);
   trigger(track, 'touchmove', 0, 100);
 
   await sleep();
-  expect(wrapper.find('.nut-pullrefresh-container-topbox-text').text()).toBe('下拉刷新');
+  expect(wrapper.find('.nut-pull-refresh-container-topbox-text').text()).toBe('下拉刷新');
 
   expect(wrapper.emitted('update:modelValue')).toBeFalsy();
   expect(wrapper.emitted('refresh')).toBeFalsy();

src/packages/__VUE/pullrefresh/demo.vue

@@ -2,12 +2,12 @@
   <div class="demo">
     <nut-tabs v-model="tabsValue" animatedTime="0">
       <nut-tab-pane :title="translate('basic')">
-        <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+        <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
           <div class="pull-block">{{ translate('content') }}</div>
-        </nut-pullrefresh>
+        </nut-pull-refresh>
       </nut-tab-pane>
       <nut-tab-pane :title="translate('customTxt')">
-        <nut-pullrefresh
+        <nut-pull-refresh
           v-model="refresh2"
           :loosingTxt="translate('loose')"
           :loadingTxt="translate('load')"
@@ -18,15 +18,15 @@
             <div>{{ translate('pull') }}</div>
           </template>
           <div class="pull-block">{{ translate('content') }}</div>
-        </nut-pullrefresh>
+        </nut-pull-refresh>
       </nut-tab-pane>
       <nut-tab-pane :title="translate('listenerTxt')">
         <div class="parentpage">
-          <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+          <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
             <div class="pull-letter" v-for="item in refreshList2">
               <div>{{ item }}</div>
             </div>
-          </nut-pullrefresh>
+          </nut-pull-refresh>
         </div>
       </nut-tab-pane>
     </nut-tabs>
@@ -37,7 +37,7 @@
 import { onMounted, ref, reactive, toRefs, getCurrentInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 
-const { createDemo, translate } = createComponent('pullrefresh');
+const { createDemo, translate } = createComponent('pull-refresh');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
 import { showToast } from '@/packages/nutui.vue';
 
@@ -59,8 +59,8 @@ const initTranslate = () =>
       pullRefresh: 'Pull to refresh',
       customTxt: 'Custom Tips',
       listenerTxt: 'Customize the listener',
-      content: 'Try it down',
-      loose: 'Let go',
+      content: 'Try to pull down!',
+      loose: 'Relax',
       load: 'Desperate loading...',
       ok: 'Ok!',
       pull: 'Pull'
@@ -141,7 +141,7 @@ export default createDemo({
 .nut-tab-pane {
   padding: 0;
 }
-.nut-pullrefresh {
+.nut-pull-refresh {
   height: calc(100vh - 107px);
 }
 .pull-block {

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

@@ -23,9 +23,9 @@ The refresh event will be Emitted when pull refresh, you should set v-model to f
 
 ```html
 <template>
-  <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
-    <div class="pull-block">向下拉试试吧！</div>
-  </nut-pullrefresh>
+  <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
+    <div class="pull-block">Try to pull down!</div>
+  </nut-pull-refresh>
 </template>
 
 <script>
@@ -53,17 +53,17 @@ The pull-down refresh has four states:`'loading' | 'loosing' | 'pulling' `，res
 
 ```html
 <template>
-  <nut-pullrefresh
+  <nut-pull-refresh
     v-model="refresh2"
-    loosingTxt="松开吧"
-    loadingTxt="玩命加载中..."
+    loosingTxt="Relax"
+    loadingTxt="Desperate loading..."
     @refresh="refreshFun"
   >
     <template #pullingTxt>
-      <div>用力拉</div>
+      <div>Pull</div>
     </template>
-    <div class="pull-block">向下拉试试吧！</div>
-  </nut-pullrefresh>
+    <div class="pull-block">Try to pull down!</div>
+  </nut-pull-refresh>
 </template>
 
 <script>
@@ -92,11 +92,11 @@ The trigger conditions for PullRefresh are: The parent position of the scroll ba
 ```html
 <template>
   <div class="parentpage">
-    <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+    <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
       <div class="pull-letter" v-for="item in refreshList2">
         <div>{{item}}</div>
       </div>
-    </nut-pullrefresh>
+    </nut-pull-refresh>
   </div>
 </template>
 
@@ -139,7 +139,7 @@ The trigger conditions for PullRefresh are: The parent position of the scroll ba
 | pulling-txt         | Text to show when pulling                       | string | `Pull to refresh...`            |
 | loosing-txt         | Text to show when loosing                       | string | `Loose to refresh...`            |
 | loading-txt        | Text to show when loading                         | string | `Loading...`                |
-| duration       | Animation duration                         | number | `0.3`                |
+| duration       | Pull down animation duration                         | number | `0.3`                |
 
 ### Events
 

src/packages/__VUE/pullrefresh/doc.md

@@ -22,9 +22,9 @@ app.use(PullRefresh);
 
 ```html
 <template>
-  <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+  <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
     <div class="pull-block">向下拉试试吧！</div>
-  </nut-pullrefresh>
+  </nut-pull-refresh>
 </template>
 
 <script>
@@ -52,7 +52,7 @@ app.use(PullRefresh);
 
 ```html
 <template>
-  <nut-pullrefresh
+  <nut-pull-refresh
     v-model="refresh2"
     loosingTxt="松开吧"
     loadingTxt="玩命加载中..."
@@ -62,7 +62,7 @@ app.use(PullRefresh);
       <div>用力拉</div>
     </template>
     <div class="pull-block">向下拉试试吧！</div>
-  </nut-pullrefresh>
+  </nut-pull-refresh>
 </template>
 
 <script>
@@ -91,11 +91,11 @@ PullRefresh 的触发条件是：父级滚动元素的滚动条在顶部位置
 ```html
 <template>
   <div class="parentpage">
-    <nut-pullrefresh v-model="refresh" @refresh="refreshFun">
+    <nut-pull-refresh v-model="refresh" @refresh="refreshFun">
       <div class="pull-letter" v-for="item in refreshList2">
         <div>{{item}}</div>
       </div>
-    </nut-pullrefresh>
+    </nut-pull-refresh>
   </div>
 </template>
 
@@ -138,7 +138,7 @@ PullRefresh 的触发条件是：父级滚动元素的滚动条在顶部位置
 | pulling-txt         | 下拉过程提示文案                       | string | `下拉刷新`            |
 | loosing-txt         | 释放过程提示文案                       | string | `释放刷新`            |
 | loading-txt        | 加载过程提示文案                         | string | `加载中...`                |
-| duration       | 动画加载时长                         | number | `0.3 `               |
+| duration       | 下拉动画加载时长                         | number | `0.3 `               |
 
 ### Events
 

src/packages/__VUE/pullrefresh/index.scss

@@ -1,4 +1,4 @@
-.nut-pullrefresh {
+.nut-pull-refresh {
   height: 100%;
   overflow: hidden;
   &-container {

src/packages/__VUE/pullrefresh/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div :class="classes" ref="scroller" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
-    <div class="nut-pullrefresh-container" :style="getStyle">
-      <div class="nut-pullrefresh-container-topbox" :style="getHeightStyle">
+    <div class="nut-pull-refresh-container" :style="getStyle">
+      <div class="nut-pull-refresh-container-topbox" :style="getHeightStyle">
         <Loading
-          class="nut-icon-loading nut-pullrefresh-container-topbox-icon"
+          class="nut-icon-loading nut-pull-refresh-container-topbox-icon"
           v-if="status == 'loading' && !slots.loading"
         ></Loading>
 
-        <div class="nut-pullrefresh-container-topbox-text">{{ getPullStatus }}</div>
+        <div class="nut-pull-refresh-container-topbox-text">{{ getPullStatus }}</div>
 
         <slot v-if="status == 'pulling'" name="pulling"></slot>
         <slot v-if="status == 'loosing'" name="loosing"></slot>
@@ -21,7 +21,7 @@
 <script lang="ts">
 import { toRefs, reactive, computed, CSSProperties, ref, nextTick, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('pullrefresh');
+const { componentName, create, translate } = createComponent('pull-refresh');
 import { useTouch } from '@/packages/utils/useTouch';
 import { getScrollTopRoot } from '@/packages/utils/util';
 import { pxCheck } from '@/packages/utils/pxCheck';

src/packages/__VUE/tour/demo.vue

@@ -10,7 +10,7 @@
 
     <nut-tour
       class="nut-custom-tour nut-customword-tour"
-      v-model:visible="showTour3"
+      v-model="showTour3"
       :steps="steps3"
       type="tile"
       location="bottom-end"
@@ -26,7 +26,7 @@
 
     <nut-tour
       class="nut-custom-tour nut-customword-tour nut-customstyle-tour"
-      v-model:visible="showTour1"
+      v-model="showTour1"
       :steps="steps1"
       location="bottom-end"
       type="tile"
@@ -58,7 +58,7 @@
 
     <nut-tour
       class="nut-custom-tour nut-customword-tour"
-      v-model:visible="showTour2"
+      v-model="showTour2"
       :steps="steps2"
       type="tile"
       bgColor="#f00"
@@ -77,7 +77,7 @@
 
     <nut-tour
       class="nut-custom-tour nut-customword-tour"
-      v-model:visible="showTour4"
+      v-model="showTour4"
       :steps="steps4"
       type="tile"
       theme="dark"
@@ -125,7 +125,7 @@
 
     <nut-tour
       class="nut-custom-tour"
-      v-model:visible="showTour"
+      v-model="showTour"
       :steps="steps"
       location="top-start"
       :offset="[0, 0]"

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

@@ -38,7 +38,7 @@ At each step, set the id of the target element, and the Tour component looks up
   ></nut-tour>
 </template>
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -84,7 +84,7 @@ Through 'maskWidth', 'maskHeight', 'bgColor' can be configured hollow mask size,
 </template>
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
    setup() {
     const state = reactive({
@@ -110,10 +110,11 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-cell title="try click" @click="showTour2 = true">
+  <nut-cell title="点击试试" @click="showTour2 = true">
     <template v-slot:link>
-      <div class="tour-demo-img">
+      <div class="tour-demo-img" v-for='i in [1,2,3]'>
         <img
+             style="width:20px;margin-right:10px"
           id="target6"
           src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
         />
@@ -134,14 +135,14 @@ export default {
 
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
       showTour2: false,
       steps2: [
         {
-          content: '70+ 高质量组件，覆盖移动端主流场景',
+          content: '这里换成关注和粉丝啦，听歌时长点击头像可见',
           target: 'target6',
           popoverOffset: [40, 12],
           arrowOffset: -36
@@ -154,6 +155,7 @@ export default {
 </script>
 
 
+
 ```
 :::
 
@@ -164,7 +166,7 @@ Can customize the bubble layer through the slot slot
 :::demo
 ```html
 <template>
-  <nut-cell title="try click" @click="showTour4 = true">
+  <nut-cell title="点击试试" @click="showTour4 = true">
     <template v-slot:link>
       <nut-switch id="target8" />
     </template>
@@ -188,7 +190,7 @@ Can customize the bubble layer through the slot slot
 </template>
 
 <script lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -204,6 +206,19 @@ export default {
 };
 </script>
 
+<style>
+.tour-demo-custom-content {
+  padding: 8px;
+  display: flex;
+  width: max-content;
+  align-items: center;
+
+  .nut-divider {
+    border-color: #fff;
+  }
+}
+</style>
+
 ```
 :::
 
@@ -213,8 +228,33 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-cell title="try click" @click="showTour = true"></nut-cell>
-
+  <nut-tabbar :bottom="true">
+      <nut-tabbar-item
+        id="target1"
+        tab-title="首页"
+        img="https://img13.360buyimg.com/imagetools/jfs/t1/23319/19/18329/3084/62e7c346E957c54ef/6c3e8a49e52b76f2.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/70423/4/20553/3652/62e74629E23ba550e/aeeed0e3b9f43ae6.png"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        id="target2"
+        tab-title="分类"
+        img="https://img13.360buyimg.com/imagetools/jfs/t1/202062/32/25149/5246/62e7c353E5a51db17/b82b940e6eb22ec3.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/162634/35/26732/5502/62e747a8E5330f029/3ea00a0c140beb38.png"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        id="target3"
+        tab-title="购物车"
+        img="https://img12.360buyimg.com/imagetools/jfs/t1/60552/28/20576/5585/62e7c2ddE2e0b48a7/70eefb366b85f3e4.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/138362/15/28011/5802/62e747a4E4139ef2f/9a79a1c0f6a273b4.png"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        id="target4"
+        tab-title="我的"
+        img="https://img14.360buyimg.com/imagetools/jfs/t1/156023/30/29042/4257/62e7c34aE71f32967/690e2db242e2a97f.png"
+        activeImg="https://img13.360buyimg.com/imagetools/jfs/t1/144283/8/28420/4851/62e74784Eaa8549fe/80535de2961b812e.png"
+      ></nut-tabbar-item>
+    </nut-tabbar>
+  <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
   <nut-tour
     class="nut-custom-tour"
     v-model:visible="showTour"
@@ -227,7 +267,7 @@ export default {
 </template>
 
 <script lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({

src/packages/__VUE/tour/doc.md

@@ -17,7 +17,6 @@ app.use(Tour);
 
 ```
 
-
 ### 基础用法
 
 在每一步中设置 `target` 目标元素的 id ，Tour 组件则会根据设置的 id 值进行查找
@@ -38,7 +37,7 @@ app.use(Tour);
   ></nut-tour>
 </template>
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -84,7 +83,7 @@ export default {
 </template>
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
    setup() {
     const state = reactive({
@@ -112,8 +111,9 @@ export default {
 <template>
   <nut-cell title="点击试试" @click="showTour2 = true">
     <template v-slot:link>
-      <div class="tour-demo-img">
+      <div class="tour-demo-img" v-for='i in [1,2,3]'>
         <img
+             style="width:20px;margin-right:10px"
           id="target6"
           src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
         />
@@ -134,7 +134,7 @@ export default {
 
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -188,7 +188,7 @@ export default {
 </template>
 
 <script lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -204,6 +204,19 @@ export default {
 };
 </script>
 
+<style>
+.tour-demo-custom-content {
+  padding: 8px;
+  display: flex;
+  width: max-content;
+  align-items: center;
+
+  .nut-divider {
+    border-color: #fff;
+  }
+}
+</style>
+
 ```
 :::
 
@@ -214,8 +227,33 @@ export default {
 :::demo
 ```html
 <template>
+  <nut-tabbar :bottom="true">
+      <nut-tabbar-item
+        id="target1"
+        tab-title="首页"
+        img="https://img13.360buyimg.com/imagetools/jfs/t1/23319/19/18329/3084/62e7c346E957c54ef/6c3e8a49e52b76f2.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/70423/4/20553/3652/62e74629E23ba550e/aeeed0e3b9f43ae6.png"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        id="target2"
+        tab-title="分类"
+        img="https://img13.360buyimg.com/imagetools/jfs/t1/202062/32/25149/5246/62e7c353E5a51db17/b82b940e6eb22ec3.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/162634/35/26732/5502/62e747a8E5330f029/3ea00a0c140beb38.png"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        id="target3"
+        tab-title="购物车"
+        img="https://img12.360buyimg.com/imagetools/jfs/t1/60552/28/20576/5585/62e7c2ddE2e0b48a7/70eefb366b85f3e4.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/138362/15/28011/5802/62e747a4E4139ef2f/9a79a1c0f6a273b4.png"
+      ></nut-tabbar-item>
+      <nut-tabbar-item
+        id="target4"
+        tab-title="我的"
+        img="https://img14.360buyimg.com/imagetools/jfs/t1/156023/30/29042/4257/62e7c34aE71f32967/690e2db242e2a97f.png"
+        activeImg="https://img13.360buyimg.com/imagetools/jfs/t1/144283/8/28420/4851/62e74784Eaa8549fe/80535de2961b812e.png"
+      ></nut-tabbar-item>
+    </nut-tabbar>
   <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
-
   <nut-tour
     class="nut-custom-tour"
     v-model:visible="showTour"
@@ -228,7 +266,7 @@ export default {
 </template>
 
 <script lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({

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

@@ -77,6 +77,7 @@ import { computed, watch, ref, reactive, toRefs, PropType, onMounted, Component,
 import { PopoverLocation } from '../popover/type';
 import { createComponent } from '@/packages/utils/create';
 import { useTaroRect, rectTaro } from '@/packages/utils/useTaroRect';
+import { useRect } from '@/packages/utils/useRect';
 import { Close } from '@nutui/icons-vue-taro';
 import Taro from '@tarojs/taro';
 import Popover from '../popover/index.taro.vue';
@@ -95,7 +96,7 @@ export default create({
     Close
   },
   props: {
-    visible: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
     type: {
       type: String,
       default: 'step' // tile
@@ -161,10 +162,10 @@ export default create({
       default: true
     }
   },
-  emits: ['update:visible', 'change', 'close'],
+  emits: ['update:modelValue', 'change', 'close'],
   setup(props, { emit }) {
     const state = reactive({
-      showTour: props.visible,
+      showTour: props.modelValue,
       active: 0
     });
 
@@ -219,7 +220,14 @@ export default create({
 
     const getRootPosition = () => {
       props.steps.forEach(async (item, i) => {
-        const rect = await useTaroRect(item.target, Taro);
+        let rect;
+        if (Taro.getEnv() === 'WEB') {
+          rect = await useRect(document.querySelector(`#${item.target}`));
+        } else {
+          rect = await useTaroRect(item.target, Taro);
+        }
+
+        console.log('获取taro', rect);
         maskRect[i] = rect;
         maskStyle(i);
       });
@@ -229,7 +237,7 @@ export default create({
       state.showTour = false;
       showPopup.value[state.active] = false;
       emit('close', state.active);
-      emit('update:visible', false);
+      emit('update:modelValue', false);
     };
 
     const handleClickMask = () => {
@@ -243,7 +251,7 @@ export default create({
     });
 
     watch(
-      () => props.visible,
+      () => props.modelValue,
       (val) => {
         if (val) {
           state.active = 0;

src/packages/__VUE/tour/index.vue

@@ -83,9 +83,9 @@ import { Close } from '@nutui/icons-vue';
 import Popover from '../popover/index.vue';
 
 interface StepOptions {
-  target: Element;
-  content: String;
-  location?: PopoverLocation;
+  target: Element | string;
+  content: string;
+  location?: string;
   popoverOffset?: number[];
   arrowOffset?: number;
 }
@@ -96,7 +96,7 @@ export default create({
     Close
   },
   props: {
-    visible: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
     type: {
       type: String,
       default: 'step' // tile
@@ -162,10 +162,10 @@ export default create({
       default: true
     }
   },
-  emits: ['update:visible', 'change', 'close'],
+  emits: ['update:modelValue', 'change', 'close'],
   setup(props, { emit }) {
     const state = reactive({
-      showTour: props.visible,
+      showTour: props.modelValue,
       showPopup: false,
       active: 0
     });
@@ -233,7 +233,7 @@ export default create({
       state.showTour = false;
       state.showPopup = false;
       emit('close', state.active);
-      emit('update:visible', false);
+      emit('update:modelValue', false);
     };
 
     const handleClickMask = () => {
@@ -245,7 +245,7 @@ export default create({
       getRootPosition();
     });
     watch(
-      () => props.visible,
+      () => props.modelValue,
       (val) => {
         if (val) {
           getRootPosition();

src/packages/utils/useTaroRect/index.ts

@@ -24,7 +24,7 @@ export interface rectTaro {
 
 export const useTaroRect = (elementRef: (Element | Window | any) | Ref<Element | Window | any>, Taro: any): any => {
   let element = unref(elementRef);
-
+  console.log(Taro.getEnv());
   return new Promise((resolve) => {
     if (Taro.getEnv() === 'WEB') {
       if (element && element.$el) {
@@ -58,6 +58,7 @@ export const useTaroRect = (elementRef: (Element | Window | any) | Ref<Element |
     } else {
       const query = Taro.createSelectorQuery();
       let el = (element as any).id ? (element as any).id : (element as any);
+
       query.select(`#${el}`) && query.select(`#${el}`).boundingClientRect();
       query.exec(function (res: any) {
         resolve(res[0]);

src/sites/mobile-taro/vue/src/dentry/pages/picker/index.vue

@@ -13,7 +13,13 @@
     <h2>搭配 Popup 使用</h2>
     <nut-cell title="城市选择" :desc="popupDesc" @click="show = true"></nut-cell>
     <nut-popup position="bottom" v-model:visible="show" :safeAreaInsetBottom="true">
-      <nut-picker :columns="columns" title="城市选择" @confirm="popupConfirm" @cancel="show = false">
+      <nut-picker
+        v-model="popupValue"
+        :columns="columns"
+        title="城市选择"
+        @confirm="popupConfirm"
+        @cancel="show = false"
+      >
         <nut-button block type="primary" style="margin-bottom: 20px">永远有效</nut-button>
       </nut-picker>
     </nut-popup>
@@ -52,6 +58,7 @@ export default {
     const asyncValue = ref<string[]>();
     const msg = ref();
     const showToast = ref(false);
+    const popupValue = ref();
 
     const columns = ref([
       { text: '南京市', value: 'NanJing' },
@@ -205,7 +212,8 @@ export default {
       popupConfirm,
       popupDesc,
       msg,
-      env
+      env,
+      popupValue
     };
   }
 };

src/sites/mobile-taro/vue/src/exhibition/pages/tour/index.vue

@@ -91,7 +91,7 @@
       </view>
     </nut-tour>
 
-    <!-- <h2>步骤</h2> -->
+    <h2>步骤引导</h2>
 
     <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
 
@@ -104,19 +104,19 @@
       ></nut-tabbar-item>
       <nut-tabbar-item
         id="target2"
-        tab-title="首页"
+        tab-title="分类"
         img="https://img13.360buyimg.com/imagetools/jfs/t1/202062/32/25149/5246/62e7c353E5a51db17/b82b940e6eb22ec3.png"
         activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/162634/35/26732/5502/62e747a8E5330f029/3ea00a0c140beb38.png"
       ></nut-tabbar-item>
       <nut-tabbar-item
         id="target3"
-        tab-title="首页"
+        tab-title="购物车"
         img="https://img12.360buyimg.com/imagetools/jfs/t1/60552/28/20576/5585/62e7c2ddE2e0b48a7/70eefb366b85f3e4.png"
         activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/138362/15/28011/5802/62e747a4E4139ef2f/9a79a1c0f6a273b4.png"
       ></nut-tabbar-item>
       <nut-tabbar-item
         id="target4"
-        tab-title="首页"
+        tab-title="我的"
         img="https://img14.360buyimg.com/imagetools/jfs/t1/156023/30/29042/4257/62e7c34aE71f32967/690e2db242e2a97f.png"
         activeImg="https://img13.360buyimg.com/imagetools/jfs/t1/144283/8/28420/4851/62e74784Eaa8549fe/80535de2961b812e.png"
       ></nut-tabbar-item>
@@ -126,7 +126,7 @@
       class="nut-customword-tour"
       v-model:visible="showTour"
       :steps="steps"
-      location="bottom-start"
+      location="top-start"
       :offset="[0, 0]"
       maskWidth="50"
       maskHeight="50"
@@ -158,7 +158,7 @@ export default {
           target: 'target1'
         },
         {
-          content: '支持一套代码同时开发多端小程序+H5',
+          content: '支持一套代码同时开发多端小程序',
           target: 'target2'
         },
         {