feat: tour更新 (jd-opensource#2039)

yangbinji · Jan 11, 2023 · c83403b · c83403b
1 parent 1a1f013
commit c83403b
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 73 deletions.
diff --git a/src/packages/__VUE/comment/components/CmtHeader.taro.vue b/src/packages/__VUE/comment/components/CmtHeader.taro.vue
@@ -13,7 +13,7 @@
           </view>
 
           <view class="nut-comment-header__user-score">
-            <nut-rate v-model="info.score" size="12" spacing="5" readonly :disabled="true" @change="handleClick" />
+            <nut-rate v-model="info.score" size="12" spacing="5" readonly @change="handleClick" />
           </view>
         </view>
 
@@ -25,7 +25,7 @@
       <view class="nut-comment-header__time" v-if="info.time">{{ info.time }}</view>
     </view>
     <view :class="[`nut-comment-header__${type}-score`]" v-if="type == 'complex'">
-      <nut-rate v-model="info.score" size="12" spacing="3" readonly :disabled="true" />
+      <nut-rate v-model="info.score" size="12" spacing="3" readonly />
       <i :class="[`nut-comment-header__${type}-score-i`]"></i>
       <view :class="[`nut-comment-header__${type}-score-size`]">{{ info.size }}</view>
     </view>

diff --git a/src/packages/__VUE/comment/doc.en-US.md b/src/packages/__VUE/comment/doc.en-US.md
@@ -40,7 +40,6 @@ By default, images of reviews for individual items are displayed in a single sli
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import { Dongdong } from '@nutui/icons-vue';
 export default {
   setup() {
     let cmt = ref({});
@@ -244,6 +243,8 @@ const follow = {
   "content": "", // Review content
   "images": [] // Review images
 }
+```
+
 ## Theming
 
 ### CSS Variables

diff --git a/src/packages/__VUE/comment/doc.taro.md b/src/packages/__VUE/comment/doc.taro.md
@@ -40,7 +40,7 @@ app.use(Comment);
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro';
 export default {
   setup() {
     let cmt = ref({});
@@ -104,7 +104,7 @@ export default {
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro';
 export default {
   setup() {
     let cmt = ref({});
@@ -146,7 +146,7 @@ export default {
 </template>
 <script lang="ts">
 import { reactive, ref,onMounted } from 'vue';
-import Taro from '@tarojs/taro'
+import Taro from '@tarojs/taro';
 export default {
   setup() {
     let cmt = ref({});
@@ -250,6 +250,7 @@ const follow = {
   "content": "", // 追评内容
   "images": [] // 追评图片
 }
+```
 
 ## 主题定制
 

diff --git a/src/packages/__VUE/popover/doc.en-US.md b/src/packages/__VUE/popover/doc.en-US.md
@@ -164,9 +164,9 @@ Customize the content in the slot named content.
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible.customized" location="top-start" custom-class="customClass">
+  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
      <template #reference>
-       <nut-button type="primary" shape="square">自定义内容</nut-button>
+       <nut-button type="primary" shape="square">Custom Content</nut-button>
      </template>
 
      <template #content>
@@ -481,7 +481,7 @@ export default {
 | visible      | whether to show                 | boolean  | `false`     |
 | theme          | Theme style, can be set to `dark` `light`          | string   | `light`   |
 | location       | pop-up location  | string   | `bottom`  |
-| offset        | the offset of the occurrence position  | number \| string   | `[0, 12]`  |
+| offset        | the offset of the occurrence position  | [number,number]   | `[0, 12]`  |
 | show-arrow        | whether to show small arrows  | boolean  | `true`  |
 | custom-class        | custom class   | string  | `''`  |
 | duration        | Transition duration，Unit second  |  number \| string  | `0.3`  |

diff --git a/src/packages/__VUE/popover/doc.md b/src/packages/__VUE/popover/doc.md
@@ -164,7 +164,7 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible.customized" location="top-start" custom-class="customClass">
+  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
      <template #reference>
        <nut-button type="primary" shape="square">自定义内容</nut-button>
      </template>
@@ -481,7 +481,7 @@ export default {
 | visible      | 是否展示气泡弹出层                 | boolean  | `false`     |
 | theme          | 主题风格，可选值为 `dark`            | string   | `light`   |
 | location       | 弹出位置  | string   | `bottom`  |
-| offset        | 出现位置的偏移量  | number \| string   | `[0, 12]`  |
+| offset        | 出现位置的偏移量  | [number,number]   | `[0, 12]`  |
 | show-arrow        | 是否显示小箭头  | boolean  | `true`  |
 | custom-class        | 自定义 class 值  | string  | `''`  |
 | duration        | 动画时长，单位秒  |  number \| string  | `0.3`  |

diff --git a/src/packages/__VUE/popover/doc.taro.md b/src/packages/__VUE/popover/doc.taro.md
@@ -146,6 +146,9 @@ export default {
 </script>
 
 <style>
+.nut-row-flex{
+  padding-top: 100px;
+}
 .nut-popover-content {
     width: 120px;
 }
@@ -164,7 +167,7 @@ export default {
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible.customized" location="top-start" custom-class="customClass">
+  <nut-popover v-model:visible="visible.customized" location="bottom-start" custom-class="customClass">
      <template #reference>
        <nut-button type="primary" shape="square">自定义内容</nut-button>
      </template>
@@ -415,7 +418,7 @@ export default {
 }
 </script>
 <style>
-page{
+#popid{
   margin-top:300px
 }
 .nut-popover-content {
@@ -462,7 +465,7 @@ export default {
 
 </script>
 <style>
-page{
+page,#app{
   margin-top:300px
 }
 .nut-popover-content {
@@ -481,7 +484,7 @@ page{
 | visible      | 是否展示气泡弹出层                 | boolean  | `false`     |
 | theme          | 主题风格，可选值为 dark            | string   | `light`   |
 | location       | 弹出位置  | string   | `bottom`  |
-| offset        | 出现位置的偏移量  | number \| string   | `[0, 12]`  |
+| offset        | 出现位置的偏移量  | [number,number]   | `[0, 12]`  |
 | show-arrow        | 是否显示小箭头  | boolean  | `true`  |
 | custom-class        | 自定义 class 值  | string  | `''`  |
 | duration        | 动画时长，单位秒  |  number \| string  | `0.3`  |

diff --git a/src/packages/__VUE/tour/demo.vue b/src/packages/__VUE/tour/demo.vue
@@ -109,7 +109,7 @@
       :steps="steps"
       location="top-start"
       :offset="[0, 0]"
-      maskWidth="50"
+      maskWidth="60"
       maskHeight="50"
     ></nut-tour>
   </div>
@@ -282,4 +282,7 @@ export default createDemo({
     border-color: #fff;
   }
 }
+.nut-tabbar-item_icon-box_nav-word {
+  font-size: 14px;
+}
 </style>
diff --git a/src/packages/__VUE/tour/doc.en-US.md b/src/packages/__VUE/tour/doc.en-US.md
@@ -50,7 +50,11 @@ export default {
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -96,7 +100,11 @@ export default {
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -140,7 +148,7 @@ export default {
       showTour2: false,
       steps2: [
         {
-          content: '这里换成关注和粉丝啦，听歌时长点击头像可见',
+          content: '支持一套代码同时开发多端小程序+H5',
           target: 'target6',
           popoverOffset: [40, 12],
           arrowOffset: -36
@@ -152,7 +160,11 @@ export default {
 }
 </script>
 
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 
 ```
 :::
@@ -239,7 +251,7 @@ export default {
     :steps="steps"
     location="top-start"
     :offset="[0, 0]"
-    maskWidth="50"
+    maskWidth="60"
     maskHeight="50"
   ></nut-tour>
 </template>
@@ -276,6 +288,14 @@ export default {
 };
 </script>
 
+<style>
+  #app{
+    padding-top:200px
+  }
+  .nut-tabbar-item_icon-box_nav-word{
+  font-size: 14px;
+}
+</style>
 ```
 :::
 
@@ -309,7 +329,7 @@ export default {
 | Attribute | Description | Type | Default |
 |----------------|----------------------|----------|--------|
 | target           | target dom               | Element   | -      |
-| content           | popover content     | String   | ''     |
+| content           | popover content     | string   | ''     |
 | location       | Location of popover,[location](https://nutui.jd.com/#/zh-CN/component/popover)           | string  | `'bottom'`  |
 | popover-offset | Offset of popopver [offset](https://nutui.jd.com/#/zh-CN/component/popover)     | [number, number]   | `[0, 12]`  | 
 | arrow-offset      | Offset of arrow [arrowOffset](https://nutui.jd.com/#/zh-CN/component/popover)           | number  | `0`  | 

diff --git a/src/packages/__VUE/tour/doc.md b/src/packages/__VUE/tour/doc.md
@@ -41,15 +41,19 @@ export default {
     const state = reactive({
       showTour3: false,
       steps3: [{
-          content: '邀请有礼，全新改版，奖励多多哦',
+          content: '70+ 高质量组件，覆盖移动端主流场景',
           target: 'target7'
         }]
     });
     return {...toRefs(state)};
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -87,15 +91,19 @@ export default {
     const state = reactive({
       showTour1: false,
       steps1: [{
-          content: '邀请有礼，全新改版，奖励多多哦',
+          content: '70+ 高质量组件，覆盖移动端主流场景',
           target: 'target5'
         }]
     });
     return {...toRefs(state)};
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 ```
 :::
 
@@ -139,7 +147,7 @@ export default {
       showTour2: false,
       steps2: [
         {
-          content: '这里换成关注和粉丝啦，听歌时长点击头像可见',
+          content: '支持一套代码同时开发多端小程序+H5',
           target: 'target6',
           popoverOffset: [40, 12],
           arrowOffset: -36
@@ -150,7 +158,11 @@ export default {
     }
 }
 </script>
-
+<style>
+  .nut-tour-content-inner{
+    white-space: nowrap
+  }
+</style>
 
 ```
 :::
@@ -238,7 +250,7 @@ export default {
     :steps="steps"
     location="top-start"
     :offset="[0, 0]"
-    maskWidth="50"
+    maskWidth="60"
     maskHeight="50"
   ></nut-tour>
 </template>
@@ -278,6 +290,9 @@ export default {
   #app{
     padding-top:200px
   }
+  .nut-tabbar-item_icon-box_nav-word{
+  font-size: 14px;
+}
 </style>
 
 ```
@@ -295,15 +310,15 @@ export default {
 | offset       | 镂空遮罩相对于目标元素的偏移量  | [number, number]   | `[8, 10]`  |
 | current      | 类型为 `step` 时，默认展示第几步  | number  | `0`  |
 | custom-class       | 自定义 class 值  | string  | ''  |
-| location      | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)  |  String  | 'bottom'  |
+| location      | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)  |  string  | 'bottom'  |
 | next-step-Txt       | 下一步按钮文案  | string   | `'下一步'`  |
 | prev-step-Txt        | 上一步按钮文案  | string   | `'上一步' ` |
 | complete-txt       | 完成按钮文案  | string   | `'完成'`  |
-| mask       | 是否显示镂空遮罩  | Boolean  | `true` |
-| bg-color       | 自定义背景色  | Boolean  | `''` |
-| theme       | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | String  | `'light'` |
-| mask-width       | 镂空遮罩层宽度  | Number、String  | '' |
-| mask-height       | 镂空遮罩层高度  | Number、String  | '' |
+| mask       | 是否显示镂空遮罩  | boolean  | `true` |
+| bg-color       | 自定义背景色  | boolean  | `''` |
+| theme       | 气泡遮罩层主题,同 Popopver 的[theme 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | string  | `'light'` |
+| mask-width       | 镂空遮罩层宽度  | number \| string  | '' |
+| mask-height       | 镂空遮罩层高度  | number \| string  | '' |
 | close-on-click-overlay      | 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/#/zh-CN/component/popover)  | Boolean  | `true` |
 | show-prev-step       | 是否展示上一步按钮  | boolean  | `true` |
 | show-title-bar       | 是否展示标题栏  |  boolean  | `false` |
@@ -313,9 +328,9 @@ export default {
 | 键名            | 说明                 | 类型      | 默认值  |
 |----------------|----------------------|----------|--------|
 | target           | 目标对象               | Element   | -      |
-| content           | 气泡层内容     | String   | ''     |
-| location       | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | String  | `'bottom'`  |
-| popover-offset      | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover)             | string/Array/object  | -  | 
+| content           | 气泡层内容     | string   | ''     |
+| location       | 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | string  | `'bottom'`  |
+| popover-offset      | 气泡层偏移量，同 Popopver 的[offset 属性](https://nutui.jd.com/#/zh-CN/component/popover)             | [number, number]   | `[0, 12]`  | 
 | arrow-offset      | 小箭头的偏移量，同 Popopver 的[arrowOffset 属性](https://nutui.jd.com/#/zh-CN/component/popover)           | number  | `0`  |