docs: 文档修改 (#2024)

* 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: 文档修改

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/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/doc.en-US.md

@@ -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

@@ -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/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'
         },
         {