docs: popover文档修改 (#2033)

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

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

@@ -59,6 +59,7 @@ The Picker is usually filled in as an auxiliary form, which can be paired with a
   <nut-cell title="Choose city" :desc="popupDesc" @click="show = true"></nut-cell>
     <nut-popup position="bottom"  v-model:visible="show">
       <nut-picker
+        v-model="popupValue"
         :columns="columns"
         title="Choose city"
         @confirm="popupConfirm"
@@ -76,6 +77,7 @@ The Picker is usually filled in as an auxiliary form, which can be paired with a
     setup(props) {
       const show = ref(false)
       const popupDesc = ref()
+      const popupValue = ref();
       const columns = ref([
         { text: 'NanJing', value: 'NanJing' },
         { text: 'WuXi', value: 'WuXi' },
@@ -91,7 +93,7 @@ The Picker is usually filled in as an auxiliary form, which can be paired with a
         show.value = false
       }
 
-      return {show,popupDesc,columns, confirm,popupConfirm};
+      return {popupValue,show,popupDesc,columns, confirm,popupConfirm};
     }
   };
 </script>

src/packages/__VUE/picker/doc.md

@@ -58,6 +58,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"
@@ -75,6 +76,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
     setup(props) {
       const show = ref(false)
       const popupDesc = ref()
+      const popupValue = ref();
       const columns = ref([
         { text: '南京市', value: 'NanJing' },
         { text: '无锡市', value: 'WuXi' },
@@ -90,7 +92,7 @@ Picker 通常作为用于辅助表单填写，可以搭配 Popup 实现效果。
         show.value = false
       }
 
-      return {show,popupDesc,columns, confirm,popupConfirm};
+      return {popupValue,show,popupDesc,columns, confirm,popupConfirm};
     }
   };
 </script>

src/packages/__VUE/popover/demo.vue

@@ -123,7 +123,7 @@ const initTranslate = () =>
       disableAction: '禁用选项',
       content: '自定义内容',
       contentColor: '自定义颜色',
-      contentTarget: '自定义对象'
+      contentTarget: '自定义目标元素'
     },
     'en-US': {
       title: 'Basic Usage',

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

@@ -166,7 +166,7 @@ Customize the content in the slot named content.
 <template>
   <nut-popover v-model:visible="visible.customized" location="top-start" custom-class="customClass">
      <template #reference>
-       <nut-button type="primary" shape="square">custom content</nut-button>
+       <nut-button type="primary" shape="square">自定义内容</nut-button>
      </template>
 
      <template #content>
@@ -191,27 +191,21 @@ export default {
    });
    const selfContent = reactive([
      {
-       name: Service,
        desc: 'option1'
      },
      {
-       name: Notice,
        desc: 'option2'
      },
      {
-       name: Location,
        desc: 'option3'
      },
      {
-       name: Category,
        desc: 'option4'
      },
      {
-       name: Scan2,
        desc: 'option5'
      },
      {
-       name: Message,
        desc: 'option6'
      }
    ]);
@@ -274,34 +268,113 @@ bottom-end    # Bottom right
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible" location="top" theme="dark" :list="iconItemList">
-    <template #reference>
-      <div class="brick"></div>
-    </template>
-  </nut-popover>
+  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
+  <nut-popup position="bottom" v-model:visible="showPicker">
+      <nut-picker
+        :columns="columns"
+        title=""
+        @change="change"
+        :swipe-duration="500"
+        @confirm="closePicker"
+        @close="closePicker"
+      >
+        <template #top>
+          <div class="brickBox">
+            <div class="brick" id="pickerTarget"></div>
+          </div>
+        </template>
+      </nut-picker>
+    </nut-popup>
+
+    <nut-popover
+      v-model:visible="customPositon"
+      targetId="pickerTarget"
+      :location="curPostion"
+      theme="dark"
+      :list="positionList"
+    >
+    </nut-popover>
 </template>
 
 <script lang="ts">
 import { reactive, ref } from 'vue';
 export default {
   setup() {
-    const visible = ref(false);
+    const showPicker = ref(false);
+    const customPositon = ref(false);
+    const curPostion = ref('top');
+    const positionList = reactive([
+      {
+        name: 'option1'
+      },
+      {
+        name: 'option2'
+      }
+    ]);
+    const closePicker = () => {
+      customPositon.value = false;
+      showPicker.value = false;
+    };
 
-    const iconItemList = reactive([
-        {
-          name: 'option1'
-        },
-        {
-          name: 'option2'
-        }]);
+    const change = ({ selectedValue }) => {
+      curPostion.value = selectedValue[0];
+      if (showPicker.value) customPositon.value = true;
+    };
+
+    const handlePicker = () => {
+      showPicker.value= true;
+      setTimeout(() => {
+        customPositon.value = true;
+      }, 0);
+    };
+
+     const columns = ref([
+      { text: 'top', value: 'top' },
+      { text: 'top-start', value: 'top-start' },
+      { text: 'top-end', value: 'top-end' },
+      { text: 'right', value: 'right' },
+      { text: 'right-start', value: 'right-start' },
+      { text: 'right-end', value: 'right-end' },
+      { text: 'bottom', value: 'bottom' },
+      { text: 'bottom-start', value: 'bottom-start' },
+      { text: 'bottom-end', value: 'bottom-end' },
+      { text: 'left', value: 'left' },
+      { text: 'left-start', value: 'left-start' },
+      { text: 'left-end', value: 'left-end' }
+    ]);
 
       return {
-        iconItemList,
-        visible,
+        positionList,
+        showPicker,
+        customPositon,
+        curPostion,
+        closePicker,
+        change,
+        handlePicker,
+        columns
       };
     }
 };
 </script>
+
+<style lang="scss">
+
+.nut-popover-content {
+    width: 120px;
+}
+
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+  .brick {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+    border-radius: 10px;
+  }
+}
+</style>
 ```
 :::
 
@@ -408,10 +481,10 @@ 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, number]   | `[0, 12]`  |
+| offset        | the offset of the occurrence position  | number \| string   | `[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`  |
+| duration        | Transition duration，Unit second  |  number \| string  | `0.3`  |
 | overlay        | Whether to show overlay  | boolean  | `false`  |
 | overlay-class        | Custom overlay class | string  | `''`  |
 | overlay-style        | Custom overlay style  | string  | `''`  |
@@ -429,7 +502,7 @@ The List property is an array of objects, each object in the array is configured
 | Key            | Description                 | Type      | Default  |
 |----------------|----------------------|----------|--------|
 | name           | option text               | string   | `-`      |
-| icon           | @nutui/icons-vue name      | string   | `-`      |
+| icon           | @nutui/icons-vue name      | VNode   | `-`      |
 | disabled       | whether to disable          | boolean  | `false`  | 
 | className       | Add extra class names for corresponding options          | string \| Array \| object  | `-`  | 
 

src/packages/__VUE/popover/doc.md

@@ -191,27 +191,21 @@ export default {
    });
    const selfContent = reactive([
      {
-       name: Service,
        desc: 'option1'
      },
      {
-       name: Notice,
        desc: 'option2'
      },
      {
-       name: Location,
        desc: 'option3'
      },
      {
-       name: Category,
        desc: 'option4'
      },
      {
-       name: Scan2,
        desc: 'option5'
      },
      {
-       name: Message,
        desc: 'option6'
      }
    ]);
@@ -273,34 +267,113 @@ bottom-end    # 底部右侧位置
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible" location="top" theme="dark" :list="iconItemList">
-    <template #reference>
-      <div class="brick"></div>
-    </template>
-  </nut-popover>
+  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
+  <nut-popup position="bottom" v-model:visible="showPicker">
+      <nut-picker
+        :columns="columns"
+        title=""
+        @change="change"
+        :swipe-duration="500"
+        @confirm="closePicker"
+        @close="closePicker"
+      >
+        <template #top>
+          <div class="brickBox">
+            <div class="brick" id="pickerTarget"></div>
+          </div>
+        </template>
+      </nut-picker>
+    </nut-popup>
+
+    <nut-popover
+      v-model:visible="customPositon"
+      targetId="pickerTarget"
+      :location="curPostion"
+      theme="dark"
+      :list="positionList"
+    >
+    </nut-popover>
 </template>
 
 <script lang="ts">
 import { reactive, ref } from 'vue';
 export default {
   setup() {
-    const visible = ref(false);
+    const showPicker = ref(false);
+    const customPositon = ref(false);
+    const curPostion = ref('top');
+    const positionList = reactive([
+      {
+        name: 'option1'
+      },
+      {
+        name: 'option2'
+      }
+    ]);
+    const closePicker = () => {
+      customPositon.value = false;
+      showPicker.value = false;
+    };
 
-    const iconItemList = reactive([
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        }]);
+    const change = ({ selectedValue }) => {
+      curPostion.value = selectedValue[0];
+      if (showPicker.value) customPositon.value = true;
+    };
+
+    const handlePicker = () => {
+      showPicker.value= true;
+      setTimeout(() => {
+        customPositon.value = true;
+      }, 0);
+    };
+
+     const columns = ref([
+      { text: 'top', value: 'top' },
+      { text: 'top-start', value: 'top-start' },
+      { text: 'top-end', value: 'top-end' },
+      { text: 'right', value: 'right' },
+      { text: 'right-start', value: 'right-start' },
+      { text: 'right-end', value: 'right-end' },
+      { text: 'bottom', value: 'bottom' },
+      { text: 'bottom-start', value: 'bottom-start' },
+      { text: 'bottom-end', value: 'bottom-end' },
+      { text: 'left', value: 'left' },
+      { text: 'left-start', value: 'left-start' },
+      { text: 'left-end', value: 'left-end' }
+    ]);
 
       return {
-        iconItemList,
-        visible,
+        positionList,
+        showPicker,
+        customPositon,
+        curPostion,
+        closePicker,
+        change,
+        handlePicker,
+        columns
       };
     }
 };
 </script>
+
+<style lang="scss">
+
+.nut-popover-content {
+    width: 120px;
+}
+
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+  .brick {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+    border-radius: 10px;
+  }
+}
+</style>
 ```
 :::
 
@@ -408,10 +481,10 @@ export default {
 | visible      | 是否展示气泡弹出层                 | boolean  | `false`     |
 | theme          | 主题风格，可选值为 `dark`            | string   | `light`   |
 | location       | 弹出位置  | string   | `bottom`  |
-| offset        | 出现位置的偏移量  | [number, number]   | `[0, 12]`  |
+| offset        | 出现位置的偏移量  | number \| string   | `[0, 12]`  |
 | show-arrow        | 是否显示小箭头  | boolean  | `true`  |
 | custom-class        | 自定义 class 值  | string  | `''`  |
-| duration        | 动画时长，单位秒  |  [number, string]  | `0.3`  |
+| duration        | 动画时长，单位秒  |  number \| string  | `0.3`  |
 | overlay        | 是否显示遮罩层  | boolean  | `false`  |
 | overlay-class        | 自定义遮罩层类名 | string  | `''`  |
 | overlay-style        | 自定义遮罩层样式  | string  | `''`  |

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

@@ -95,7 +95,7 @@ export default {
 </template>
 
 <script>
-import { reactive, ref,h, h } from 'vue';
+import { reactive, ref,h } from 'vue';
 import { Location,Cart2, My2 } from '@nutui/icons-vue-taro';
 export default {
   setup() {
@@ -191,27 +191,21 @@ export default {
    });
    const selfContent = reactive([
      {
-       name: Service,
        desc: 'option1'
      },
      {
-       name: Notice,
        desc: 'option2'
      },
      {
-       name: Location,
        desc: 'option3'
      },
      {
-       name: Category,
        desc: 'option4'
      },
      {
-       name: Scan2,
        desc: 'option5'
      },
      {
-       name: Message,
        desc: 'option6'
      }
    ]);
@@ -225,7 +219,7 @@ export default {
 </script>
 
 <style lang="scss">
-#app{
+page{
   padding-top: 200px;
 }
 .self-content {
@@ -273,34 +267,113 @@ bottom-end    # 底部右侧位置
 :::demo
 ```html
 <template>
-  <nut-popover v-model:visible="visible" location="top" theme="dark" :list="iconItemList">
-    <template #reference>
-      <div class="brick"></div>
-    </template>
-  </nut-popover>
+  <nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
+  <nut-popup position="bottom" v-model:visible="showPicker">
+      <nut-picker
+        :columns="columns"
+        title=""
+        @change="change"
+        :swipe-duration="500"
+        @confirm="closePicker"
+        @close="closePicker"
+      >
+        <template #top>
+          <div class="brickBox">
+            <div class="brick" id="pickerTarget"></div>
+          </div>
+        </template>
+      </nut-picker>
+    </nut-popup>
+
+    <nut-popover
+      v-model:visible="customPositon"
+      targetId="pickerTarget"
+      :location="curPostion"
+      theme="dark"
+      :list="positionList"
+    >
+    </nut-popover>
 </template>
 
 <script lang="ts">
 import { reactive, ref } from 'vue';
 export default {
   setup() {
-    const visible = ref(false);
+    const showPicker = ref(false);
+    const customPositon = ref(false);
+    const curPostion = ref('top');
+    const positionList = reactive([
+      {
+        name: 'option1'
+      },
+      {
+        name: 'option2'
+      }
+    ]);
+    const closePicker = () => {
+      customPositon.value = false;
+      showPicker.value = false;
+    };
 
-    const iconItemList = reactive([
-        {
-          name: '选项一'
-        },
-        {
-          name: '选项二'
-        }]);
+    const change = ({ selectedValue }) => {
+      curPostion.value = selectedValue[0];
+      if (showPicker.value) customPositon.value = true;
+    };
+
+    const handlePicker = () => {
+      showPicker.value= true;
+      setTimeout(() => {
+        customPositon.value = true;
+      }, 1000);
+    };
+
+     const columns = ref([
+      { text: 'top', value: 'top' },
+      { text: 'top-start', value: 'top-start' },
+      { text: 'top-end', value: 'top-end' },
+      { text: 'right', value: 'right' },
+      { text: 'right-start', value: 'right-start' },
+      { text: 'right-end', value: 'right-end' },
+      { text: 'bottom', value: 'bottom' },
+      { text: 'bottom-start', value: 'bottom-start' },
+      { text: 'bottom-end', value: 'bottom-end' },
+      { text: 'left', value: 'left' },
+      { text: 'left-start', value: 'left-start' },
+      { text: 'left-end', value: 'left-end' }
+    ]);
 
       return {
-        iconItemList,
-        visible,
+        positionList,
+        showPicker,
+        customPositon,
+        curPostion,
+        closePicker,
+        change,
+        handlePicker,
+        columns
       };
     }
 };
 </script>
+
+<style lang="scss">
+
+.nut-popover-content {
+    width: 120px;
+}
+
+.brickBox {
+  margin: 80px 0;
+  display: flex;
+  justify-content: center;
+  .brick {
+    width: 60px;
+    height: 60px;
+    background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
+    border-radius: 10px;
+  }
+}
+</style>
 ```
 :::
 
@@ -342,7 +415,7 @@ export default {
 }
 </script>
 <style>
-#app{
+page{
   margin-top:300px
 }
 .nut-popover-content {
@@ -389,7 +462,7 @@ export default {
 
 </script>
 <style>
-#app{
+page{
   margin-top:300px
 }
 .nut-popover-content {
@@ -408,10 +481,10 @@ export default {
 | visible      | 是否展示气泡弹出层                 | boolean  | `false`     |
 | theme          | 主题风格，可选值为 dark            | string   | `light`   |
 | location       | 弹出位置  | string   | `bottom`  |
-| offset        | 出现位置的偏移量  | [number, number]   | `[0, 12]`  |
+| offset        | 出现位置的偏移量  | number \| string   | `[0, 12]`  |
 | show-arrow        | 是否显示小箭头  | boolean  | `true`  |
 | custom-class        | 自定义 class 值  | string  | `''`  |
-| duration        | 动画时长，单位秒  |  [number, string]  | `0.3`  |
+| duration        | 动画时长，单位秒  |  number \| string  | `0.3`  |
 | overlay        | 是否显示遮罩层  | boolean  | `false`  |
 | overlay-class        | 自定义遮罩层类名 | string  | `''`  |
 | overlay-style        | 自定义遮罩层样式  | string  | `''`  |
@@ -429,7 +502,7 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 | 键名            | 说明                 | 类型      | 默认值  |
 |----------------|----------------------|----------|--------|
 | name           | 选项文字               | string   | `-`      |
-| icon           | `@nutui/icons-vue-taro` 图标       | string   | `-`      |
+| icon           | `@nutui/icons-vue-taro` 图标       | VNode   | `-`      |
 | disabled       | 是否为禁用状态          | boolean  | `false`  | 
 | className       | 为对应选项添加额外的类名          | string \| Array \| object  | `-`  |