fix: tour修改 (#2036)

* fix: popover

* fix: 代码回退

* feat: 文档修改

* feat: 修改Imagepreview

* feat: imagepreview文案修改

* feat: noticebar文案修改

* fix: noticebar小程序不能运行问题修改

* feat: 组件文档修改picker

* docs: 文案修改

* docs: countdown

* feat: image

* docs: 文本修改

* fix: imagepreview

* docs: 单位修改

* docs: 文档修噶

* docs: actionsheet文档修改

* docs: 文档修改

* fix: drag使用公共函数

* docs: 文案更新

* feat: 文档修改

* feat: 文案修改

* feat: picker文案修改

* feat: picker

* feat: 文案修改

* fix: 多余Props删除

* feat: 文档修改

* feat: docs修改

* fix: picker修改

* feat: comment修改

* feat: 文案修改

* feat: 评论修改

* feat: 评论修改

* feat: 评论修改

* feat: popover文档修改

* feat: sku修改

* feat: tour修改

* feat: tour更新

src/packages/__VUE/picker/common.ts

@@ -128,6 +128,7 @@ export const componentWeapp = {
 
       // 选择的是哪个 option
       changeHandler(changeIndex, columnsList.value[changeIndex][data.detail.value[changeIndex]]);
+      console.log('设置默认值');
 
       defaultIndexes.value = defaultValuesConvert();
     };

src/packages/__VUE/tour/demo.vue

@@ -97,30 +97,10 @@
     <nut-cell :title="translate('tryClick')" @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-item id="target1" tab-title="首页"></nut-tabbar-item>
+      <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
+      <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
+      <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
     </nut-tabbar>
 
     <nut-tour

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

@@ -29,7 +29,7 @@ At each step, set the id of the target element, and the Tour component looks up
     </template>
   </nut-cell>
   <nut-tour
-    v-model:visible="showTour3"
+    v-model="showTour3"
     :steps="steps3"
     type="tile"
     location="bottom-end"
@@ -69,7 +69,7 @@ Through 'maskWidth', 'maskHeight', 'bgColor' can be configured hollow mask size,
 
   <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"
@@ -121,7 +121,7 @@ export default {
   </nut-cell>
 
   <nut-tour
-    v-model:visible="showTour2"
+    v-model="showTour2"
     :steps="steps2"
     type="tile"
     bgColor="#f00"
@@ -171,7 +171,7 @@ Can customize the bubble layer through the slot slot
   </nut-cell>
 
   <nut-tour
-    v-model:visible="showTour4"
+    v-model="showTour4"
     :steps="steps4"
     type="tile"
     theme="dark"
@@ -204,7 +204,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 .tour-demo-custom-content {
   padding: 8px;
   display: flex;
@@ -227,35 +227,15 @@ export default {
 ```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-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
+    <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
+    <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
+    <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
+  </nut-tabbar>
   <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
   <nut-tour
     class="nut-custom-tour"
-    v-model:visible="showTour"
+    v-model="showTour"
     :steps="steps"
     location="top-start"
     :offset="[0, 0]"
@@ -305,7 +285,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 |----------------|---------------------------------|---------|------------|
-| visible      | Whether to display the boot eject layer                 | boolean  | `false`     |
+| v-model      | Whether to display the boot eject layer                 | boolean  | `false`     |
 | type          | Tour type            | string   | `step`   |
 | steps       | Boot Step Content  | StepOptions[]   | `[]`  |
 | offset       | The offset of the hollow mask relative to the target element  | [number, number]   | `[8, 10]`  |

src/packages/__VUE/tour/doc.md

@@ -28,7 +28,7 @@ app.use(Tour);
     </template>
   </nut-cell>
   <nut-tour
-    v-model:visible="showTour3"
+    v-model="showTour3"
     :steps="steps3"
     type="tile"
     location="bottom-end"
@@ -68,7 +68,7 @@ export default {
 
   <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"
@@ -120,7 +120,7 @@ export default {
   </nut-cell>
 
   <nut-tour
-    v-model:visible="showTour2"
+    v-model="showTour2"
     :steps="steps2"
     type="tile"
     bgColor="#f00"
@@ -169,7 +169,7 @@ export default {
   </nut-cell>
 
   <nut-tour
-    v-model:visible="showTour4"
+    v-model="showTour4"
     :steps="steps4"
     type="tile"
     theme="dark"
@@ -202,7 +202,7 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 .tour-demo-custom-content {
   padding: 8px;
   display: flex;
@@ -226,35 +226,15 @@ export default {
 ```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-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
+    <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
+    <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
+    <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
+  </nut-tabbar>
   <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
   <nut-tour
     class="nut-custom-tour"
-    v-model:visible="showTour"
+    v-model="showTour"
     :steps="steps"
     location="top-start"
     :offset="[0, 0]"
@@ -294,6 +274,11 @@ export default {
   }
 };
 </script>
+<style>
+  #app{
+    padding-top:200px
+  }
+</style>
 
 ```
 :::
@@ -304,7 +289,7 @@ export default {
 
 | 参数            | 说明                            | 类型     | 默认值      |
 |----------------|---------------------------------|---------|------------|
-| visible      | 是否展示引导弹出层                 | boolean  | `false`     |
+| v-model      | 是否展示引导弹出层                 | boolean  | `false`     |
 | type          | 引导类型            | string   | `step`   |
 | steps       | 引导步骤内容  | StepOptions[]   | `[]`  |
 | offset       | 镂空遮罩相对于目标元素的偏移量  | [number, number]   | `[8, 10]`  |

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

@@ -29,14 +29,14 @@ app.use(Tour);
     </template>
   </nut-cell>
   <nut-tour
-    v-model:visible="showTour3"
+    v-model="showTour3"
     :steps="steps3"
     type="tile"
     location="bottom-end"
   ></nut-tour>
 </template>
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -69,7 +69,7 @@ export default {
 
   <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"
@@ -82,7 +82,7 @@ export default {
 </template>
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
    setup() {
     const state = reactive({
@@ -110,8 +110,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;height:20px;margin-right:10px"
           id="target6"
           src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
         />
@@ -120,7 +121,7 @@ export default {
   </nut-cell>
 
   <nut-tour
-    v-model:visible="showTour2"
+    v-model="showTour2"
     :steps="steps2"
     type="tile"
     bgColor="#f00"
@@ -132,7 +133,7 @@ export default {
 
 
 <script>
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -169,7 +170,7 @@ export default {
   </nut-cell>
 
   <nut-tour
-    v-model:visible="showTour4"
+    v-model="showTour4"
     :steps="steps4"
     type="tile"
     theme="dark"
@@ -186,7 +187,7 @@ export default {
 </template>
 
 <script lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -201,6 +202,18 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+.tour-demo-custom-content {
+  padding: 8px;
+  display: flex;
+  width: max-content;
+  align-items: center;
+
+  .nut-divider {
+    border-color: #fff;
+  }
+}
+</style>
 
 ```
 :::
@@ -214,19 +227,27 @@ export default {
 <template>
   <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
 
-  <nut-tour
-    class="nut-custom-tour"
-    v-model:visible="showTour"
-    :steps="steps"
-    location="top-start"
-    :offset="[0, 0]"
-    maskWidth="50"
-    maskHeight="50"
-  ></nut-tour>
+    <nut-tabbar>
+      <nut-tabbar-item id="target1" tab-title="首页"></nut-tabbar-item>
+      <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
+      <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
+      <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
+    </nut-tabbar>
+
+    <nut-tour
+      class="nut-customword-tour"
+      v-model="showTour"
+      :steps="steps"
+      location="top-start"
+      :offset="[0, 0]"
+      maskWidth="50"
+      maskHeight="50"
+      :showTitleBar="false"
+    ></nut-tour>
 </template>
 
 <script lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
@@ -256,7 +277,11 @@ export default {
   }
 };
 </script>
-
+<style>
+page{
+  padding-top: 200px;
+}
+</style>
 ```
 :::
 
@@ -266,7 +291,7 @@ export default {
 
 | 参数            | 说明                            | 类型     | 默认值      |
 |----------------|---------------------------------|---------|------------|
-| visible      | 是否展示引导弹出层                 | boolean  | `false`     |
+| v-model      | 是否展示引导弹出层                 | boolean  | `false`     |
 | type          | 引导类型            | string   | `step`   |
 | steps       | 引导步骤内容  | StepOptions[]   | `[]`  |
 | offset       | 镂空遮罩相对于目标元素的偏移量  | [number, number]   | `[8, 10]`  |

src/sites/mobile-taro/vue/src/exhibition/pages/tour/index.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"
@@ -96,35 +96,15 @@
     <nut-cell title="点击试试" @click="showTour = true"></nut-cell>
 
     <nut-tabbar>
-      <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-item id="target1" tab-title="首页"></nut-tabbar-item>
+      <nut-tabbar-item id="target2" tab-title="分类"></nut-tabbar-item>
+      <nut-tabbar-item id="target3" tab-title="购物车"></nut-tabbar-item>
+      <nut-tabbar-item id="target4" tab-title="我的"></nut-tabbar-item>
     </nut-tabbar>
 
     <nut-tour
       class="nut-customword-tour"
-      v-model:visible="showTour"
+      v-model="showTour"
       :steps="steps"
       location="top-start"
       :offset="[0, 0]"