fix: popover/badge组件review修改 (#694)

* fix: tag/badge/popover组件提交

* fix: tag/popover/badge组件优化

* fix: popover/badge组件review修改

* fix: popover组件review修改

src/packages/__VUE/badge/demo.vue

@@ -3,61 +3,53 @@
     <h2>默认用法</h2>
     <view class="demo-w">
       <nut-badge :value="8" class="item">
-        <view class="demo-svg"></view>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="76" class="item">
-        <view class="demo-svg"></view>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge value="NEW" class="item">
-        <view class="demo-svg"></view>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge isDot class="item">
-        <view class="demo-svg"></view>
+      <nut-badge dot class="item">
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
     </view>
     <h2>最大值</h2>
     <view class="demo-w">
       <nut-badge :value="200" :max="9" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge :value="200" :max="20" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge :value="200" :max="99" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
     </view>
 
     <h2>自定义颜色</h2>
     <view class="demo-w">
-      <nut-badge
-        :value="8"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-        <view class="demo-svg"></view
-      ></nut-badge>
+      <nut-badge :value="8" class="item" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge
         :value="76"
         class="item"
         color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       >
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge
         value="NEW"
         class="item"
         color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       >
-        <view class="demo-svg"></view
-      ></nut-badge>
-      <nut-badge
-        isDot
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge dot class="item" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
     </view>
 
     <h2>自定义徽标内容</h2>
@@ -66,7 +58,7 @@
         <template #icons>
           <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
         </template>
-        <view class="demo-svg"></view>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge class="item">
         <template #icons>
@@ -84,15 +76,9 @@
 
     <h2>自定义位置</h2>
     <view class="demo-w">
-      <nut-badge :value="8" top="5" right="5" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
-      <nut-badge :value="76" top="10" right="10" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
-      <nut-badge value="NEW" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
+      <nut-badge :value="8" top="5" right="5" class="item"> <view class="demo-svg"></view></nut-badge>
+      <nut-badge :value="76" top="10" right="10" class="item"> <view class="demo-svg"></view></nut-badge>
+      <nut-badge value="NEW" class="item"> <view class="demo-svg"></view></nut-badge>
     </view>
 
     <h2>独立展示</h2>
@@ -126,5 +112,6 @@ export default createDemo({
   height: 40px;
   background: rgba(229, 232, 232);
   border-radius: 3px;
+  margin-right: 0;
 }
 </style>

src/packages/__VUE/badge/doc.md

@@ -25,16 +25,16 @@ app.use(Badge);
 
 ```html
   <nut-badge :value="8" class="item">
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge :value="76" class="item">
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge value="NEW" class="item">
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
-  <nut-badge isDot class="item">
-    <div class="demo-svg"></div>
+  <nut-badge dot class="item">
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
 ```
 
@@ -42,13 +42,13 @@ app.use(Badge);
 
 ```html
   <nut-badge :value="200" :max="9" class="item">
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge :value="200" :max="20" class="item">
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge :value="200" :max="99" class="item">
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
 ```
 
@@ -60,28 +60,28 @@ app.use(Badge);
         class="item"
         color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       >
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge
         :value="76"
         class="item"
         color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       >
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge
         value="NEW"
         class="item"
         color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       >
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge
-        isDot
+        dot
         class="item"
         color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       >
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
 ```
 
@@ -92,18 +92,18 @@ app.use(Badge);
     <template #icons>
       <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
     </template>
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge class="item">
     <template #icons>
       <nut-icon name="link" color="#ffffff" size="12"></nut-icon>
     </template>
-    <div class="demo-svg"></div></nut-badge>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar></nut-badge>
   <nut-badge class="item">
     <template #icons>
       <nut-icon name="download" color="#ffffff" size="12"></nut-icon>
     </template>
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
 ```
 
@@ -114,10 +114,10 @@ app.use(Badge);
     <div class="demo-svg"></div >
   </nut-badge>
   <nut-badge :value="76" top="10" right="10" class="item">
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
   <nut-badge value="NEW" class="item">
-    <div class="demo-svg"></div>
+    <nut-avatar class="demo-svg" shape="square"></nut-avatar>
   </nut-badge>
 ```
 
@@ -132,13 +132,13 @@ app.use(Badge);
 
 ### Prop  
 
-| 字段            | 说明                 | 类型    | 默认值  |
-|-----------------|------------------------------------------|---------|---------|
-| value           | 显示的内容         | String | -       |
-| max         | value 为数值时，最大值    | Number  | `10000`       |
-| z-index        | 徽标的 z-index 值      | Number |  `10`  |
-| isDot     | 是否为小点   | Boolean  | `false`      |
-| hidden         | 是否隐藏   | Boolean  | `false`       |  
-| top         | 上下偏移量，支持单位设置，可设置为：5px 等   | Number  | `0`       |  
-| right         | 左右偏移量，支持单位设置，可设置为：5px 等   | Number  | `0`       |                                          
+| 字段             | 说明                                 | 类型      | 默认值   |
+|-----------------|--------------------------------------|----------|---------|
+| value           | 显示的内容                             | String   | -       |
+| max             | value 为数值时，最大值                  | Number   | `10000` |
+| z-index         | 徽标的 z-index 值                      | Number   |  `10`   |
+| dot             | 是否为小点                             | Boolean  | `false` |
+| hidden          | 是否隐藏                               | Boolean  | `false` |  
+| top             | 上下偏移量，支持单位设置，可设置为：5px 等  | Number   | `0`     |  
+| right           | 左右偏移量，支持单位设置，可设置为：5px 等  | Number   | `0`     |                                          
 

src/packages/__VUE/badge/index.scss

@@ -10,6 +10,7 @@
     padding: 0 5px;
     text-align: center;
     border-radius: 14px;
+    z-index: 1;
   }
   sup {
     position: absolute;

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

@@ -3,10 +3,10 @@
     <view class="slot-icons"> <slot name="icons"></slot></view>
     <slot></slot>
     <sup
-      v-show="!hidden && (content || isDot)"
+      v-show="!hidden && (content || dot)"
       v-text="content"
       class="nut-badge__content"
-      :class="{ 'is-dot': isDot }"
+      :class="{ 'is-dot': dot }"
       :style="stl"
     >
     </sup>
@@ -14,14 +14,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  onActivated,
-  onDeactivated,
-  reactive
-} from 'vue';
+import { computed, onMounted, onUnmounted, onActivated, onDeactivated, reactive } from 'vue';
 import { createComponent } from '../../utils/create';
 const { componentName, create } = createComponent('badge');
 export default create({
@@ -33,7 +26,7 @@ export default create({
       type: Number,
       default: 10000
     },
-    isDot: {
+    dot: {
       type: Boolean,
       default: false
     },
@@ -73,7 +66,7 @@ export default create({
     });
 
     const content = computed(() => {
-      if (props.isDot) return;
+      if (props.dot) return;
       const value = props.value;
       const max = props.max;
       if (typeof value === 'number' && typeof max === 'number') {

src/packages/__VUE/badge/index.vue

@@ -3,10 +3,10 @@
     <view class="slot-icons"> <slot name="icons"></slot></view>
     <slot></slot>
     <sup
-      v-show="!hidden && (content || isDot)"
+      v-show="!hidden && (content || dot)"
       v-text="content"
       class="nut-badge__content"
-      :class="{ 'is-dot': isDot }"
+      :class="{ 'is-dot': dot }"
       :style="stl"
     >
     </sup>
@@ -26,7 +26,7 @@ export default create({
       type: Number,
       default: 10000
     },
-    isDot: {
+    dot: {
       type: Boolean,
       default: false
     },
@@ -66,7 +66,7 @@ export default create({
     });
 
     const content = computed(() => {
-      if (props.isDot) return;
+      if (props.dot) return;
       const value = props.value;
       const max = props.max;
       if (typeof value === 'number' && typeof max === 'number') {

src/packages/__VUE/popover/demo.vue

@@ -1,40 +1,26 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-popover
-      v-model:visible="visible.lightTheme"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.lightTheme" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">明朗风格</nut-button>
       </template>
     </nut-popover>
 
-    <nut-popover
-      v-model:visible="visible.darkTheme"
-      theme="dark"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.darkTheme" theme="dark" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">暗黑风格</nut-button>
       </template>
     </nut-popover>
 
     <h2>选项配置</h2>
-    <nut-popover
-      v-model:visible="visible.showIcon"
-      theme="dark"
-      :iconItemList="itemList"
-    >
+    <nut-popover v-model:visible="visible.showIcon" theme="dark" :lists="itemList">
       <template #reference>
         <nut-button type="primary" shape="square">展示图标</nut-button>
       </template>
     </nut-popover>
 
-    <nut-popover
-      v-model:visible="visible.disableAction"
-      :iconItemList="itemListDisabled"
-    >
+    <nut-popover v-model:visible="visible.disableAction" :lists="itemListDisabled">
       <template #reference>
         <nut-button type="primary" shape="square">禁用选项</nut-button>
       </template>
@@ -48,11 +34,7 @@
 
       <template #content>
         <div class="self-content">
-          <div
-            class="self-content-item"
-            v-for="(item, index) in selfContent"
-            :key="index"
-          >
+          <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
             <nut-icon :name="item.name" size="15"></nut-icon>
             <div class="self-content-desc">{{ item.desc }}</div>
           </div>
@@ -61,34 +43,19 @@
     </nut-popover>
 
     <h2>位置自定义</h2>
-    <nut-popover
-      v-model:visible="visible.topLocation"
-      location="top"
-      theme="dark"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.topLocation" location="top" theme="dark" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">向上弹出</nut-button>
       </template>
     </nut-popover>
 
     <h2></h2>
-    <nut-popover
-      v-model:visible="visible.rightLocation"
-      location="right"
-      theme="dark"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.rightLocation" location="right" theme="dark" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">向右弹出</nut-button>
       </template>
     </nut-popover>
-    <nut-popover
-      v-model:visible="visible.leftLocation"
-      location="left"
-      theme="dark"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.leftLocation" location="left" theme="dark" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">向左弹出</nut-button>
       </template>

src/packages/__VUE/popover/doc.md

@@ -28,7 +28,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
 ```html
   <nut-popover
       v-model:visible="visible"
-      :itemList="itemList"
+      :lists="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">明朗风格</nut-button>
@@ -38,7 +38,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
   <nut-popover
       v-model:visible="visible"
       theme="dark"
-      :itemList="itemList"
+      :lists="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">暗黑风格</nut-button>
@@ -46,13 +46,26 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
     </nut-popover>
 ```
 
+```javascript
+
+      export default {
+        data() {
+          return {
+            showPopover: false,
+            List: [{name: '选项一'},{name: '选项二'},{name: '选项三'}],
+          };
+        },
+      };
+
+```
+
 ### 选项配置
 
 ```html
   <nut-popover
       v-model:visible="visible"
       theme="dark"
-      :itemList="itemList"
+      :lists="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">展示图标</nut-button>
@@ -61,12 +74,30 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
 
 ```
 
-在 itemList 数组中，可以通过 disabled 字段来禁用某个选项。
+
+```javascript
+
+      export default {
+        data() {
+          return {
+            List: [
+              {name: '选项一',icon: 'my2'},
+              {name: '选项二',icon: 'cart2'},
+              {name: '选项三',icon: 'location2'}
+            ],
+          };
+        },
+      };
+
+```
+
+
+在 lists 数组中，可以通过 disabled 字段来禁用某个选项。
 
 ```html
   <nut-popover
       v-model:visible="visible"
-      :itemList="itemListDisabled"
+      :lists="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">禁用选项</nut-button>
@@ -74,6 +105,30 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
     </nut-popover>
 ```
 
+
+```javascript
+
+      export default {
+        data() {
+          return {
+            showPopover: false,
+            List:[{
+              name: '选项一',
+              disabled: true
+            },
+            {
+              name: '选项二',
+              disabled: true
+            },
+            {
+              name: '选项三'
+            }],
+          };
+        },
+      };
+
+```
+
 ### 自定义内容
 
 在名为 content 插槽中自定义内容。
@@ -108,54 +163,32 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
       v-model:visible="visible"
       location="top"
       theme="dark"
-      :itemList="itemList"
+      :lists="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">向上弹出</nut-button>
       </template>
-    </nut-popover>
-
-  <nut-popover
-      v-model:visible="visible"
-      location="right"
-      theme="dark"
-      :itemList="itemList"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">向右弹出</nut-button>
-      </template>
-    </nut-popover>
+  </nut-popover>
 
-  <nut-popover
-      v-model:visible="visible"
-      location="left"
-      theme="dark"
-      :itemList="itemList"
-    >
-      <template #reference>
-        <nut-button type="primary" shape="square">向左弹出</nut-button>
-      </template>
-    </nut-popover>
 ```
 
 
 
 ### Prop  
 
-| 字段            | 说明                 | 类型    | 默认值  |
-|-----------------|------------------------------------------|---------|---------|
-| itemList           | 选项列表         | Action[] | []       |
-| v-model         | 是否展示气泡弹出层    | boolean  | false       |
-| theme        | 主题风格，可选值为 dark      | string |  `light`  |
-| location     | 弹出位置，可选值为 top,left,right  | string  | `bottom`      |                                       
-
-### iconItemList 数据结构  
+| 字段            | 说明                            | 类型     | 默认值      |
+|----------------|---------------------------------|---------|------------|
+| lists          | 选项列表                         | List[]   | []        |
+| v-model        | 是否展示气泡弹出层                 | boolean  | false     |
+| theme          | 主题风格，可选值为 dark            | string   | `light`   |
+| location       | 弹出位置，可选值为 top,left,right  | string   | `bottom`  |                                       
 
-iconItemList 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
+### List 数据结构  
 
+List 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
 
 | 键名            | 说明                 | 类型      | 默认值  |
-|-----------------|------------------------------------------|---------|---------|
-| name           | 选项文字         | string | -       |
-| icon         | nut-icon 图标名称    | string  | -       |
-| disabled        | 是否为禁用状态      | boolean |  false  | 
+|----------------|----------------------|----------|--------|
+| name           | 选项文字               | string   | -      |
+| icon           | nut-icon 图标名称      | string   | -      |
+| disabled       | 是否为禁用状态          | boolean  | false  | 

src/packages/__VUE/popover/index.scss

@@ -30,13 +30,13 @@
     .popoverArrow {
       position: absolute;
       left: 10px;
-      top: -10px;
+      top: -18px;
       width: 0;
       height: 0;
-      border-left: 7px solid transparent;
-      border-right: 7px solid transparent;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid $popover-white-background-color;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid $popover-white-background-color;
     }
     .title-item {
       display: flex;
@@ -59,16 +59,16 @@
     }
   }
   .popoverContent--top {
-    top: -120px;
+    top: -126px;
     .popoverArrow--top {
       position: absolute;
       left: 10px;
-      bottom: -10px;
+      bottom: -15px;
       top: auto;
-      border-left: 7px solid transparent;
-      border-right: 7px solid transparent;
-      border-top: 5px solid $popover-white-background-color;
-      border-bottom: 5px solid transparent;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 10px solid $popover-white-background-color;
+      border-bottom: 10px solid transparent;
     }
   }
   .popoverContent--left {
@@ -78,10 +78,10 @@
       position: absolute;
       right: -13px;
       top: 49px;
-      border-left: 5px solid $popover-white-background-color;
-      border-right: 5px solid transparent;
-      border-top: 7px solid transparent;
-      border-bottom: 7px solid transparent;
+      border-left: 10px solid $popover-white-background-color;
+      border-right: 10px solid transparent;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
     }
   }
   .popoverContent--right {
@@ -91,10 +91,10 @@
       position: absolute;
       left: -10px;
       top: 49px;
-      border-left: 5px solid transparent;
-      border-right: 5px solid $popover-white-background-color;
-      border-top: 7px solid transparent;
-      border-bottom: 7px solid transparent;
+      border-left: 10px solid transparent;
+      border-right: 10px solid $popover-white-background-color;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
     }
   }
 
@@ -114,20 +114,20 @@
     background: $popover-dark-background-color;
     color: $popover-white-background-color;
     .popoverArrow {
-      border-bottom: 5px solid $popover-dark-background-color;
+      border-bottom: 10px solid $popover-dark-background-color;
     }
   }
   .popoverContent--top {
-    top: -120px;
+    top: -126px;
     .popoverArrow--top {
       position: absolute;
       left: 10px;
-      bottom: -10px;
+      bottom: -20px;
       top: auto;
-      border-left: 7px solid transparent;
-      border-right: 7px solid transparent;
-      border-top: 5px solid $popover-dark-background-color;
-      border-bottom: 5px solid transparent;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 10px solid $popover-dark-background-color;
+      border-bottom: 10px solid transparent;
     }
   }
   .popoverContent--left {
@@ -135,12 +135,12 @@
     left: -90px;
     .popoverArrow--left {
       position: absolute;
-      left: 78px;
+      left: 75px;
       top: 49px;
-      border-left: 5px solid $popover-dark-background-color;
-      border-right: 5px solid transparent;
-      border-top: 7px solid transparent;
-      border-bottom: 7px solid transparent;
+      border-left: 10px solid $popover-dark-background-color;
+      border-right: 10px solid transparent;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
     }
   }
   .popoverContent--right {
@@ -148,12 +148,12 @@
     right: -90px;
     .popoverArrow--right {
       position: absolute;
-      left: -10px;
+      left: -19px;
       top: 49px;
-      border-left: 5px solid transparent;
-      border-right: 5px solid $popover-dark-background-color;
-      border-top: 7px solid transparent;
-      border-bottom: 7px solid transparent;
+      border-left: 10px solid transparent;
+      border-right: 10px solid $popover-dark-background-color;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
     }
   }
 }

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

@@ -1,27 +1,21 @@
 <template>
-  <div @click="openPopover()" :class="classes">
+  <view @click="openPopover()" :class="classes">
     <slot name="reference"></slot>
 
     <template v-if="showPopup">
-      <div class="more-background" @click="closePopover()"> </div>
-      <div :class="popoverContent">
-        <div :class="popoverArrow"> </div>
+      <view class="more-background" @click="closePopover()"> </view>
+      <view :class="popoverContent">
+        <view :class="popoverArrow"> </view>
 
         <slot name="content"></slot>
 
-        <div
-          v-for="item in iconItemList"
-          :key="item.name"
-          :class="{ 'title-item': true, disabled: item.disabled }"
-        >
-          <slot v-if="item.icon">
-            <nut-icon class="item-img" :name="item.icon"></nut-icon
-          ></slot>
-          <div class="title-name">{{ item.name }}</div>
-        </div>
-      </div>
+        <view v-for="item in lists" :key="item.name" :class="{ 'title-item': true, disabled: item.disabled }">
+          <slot v-if="item.icon"> <nut-icon class="item-img" :name="item.icon"></nut-icon></slot>
+          <view class="title-name">{{ item.name }}</view>
+        </view>
+      </view>
     </template>
-  </div>
+  </view>
 </template>
 <script lang="ts">
 import { onMounted, computed, watch, ref, PropType, toRefs } from 'vue';
@@ -43,7 +37,7 @@ export default create({
   },
   props: {
     ...popupProps,
-    iconItemList: {
+    lists: {
       type: Array,
       default: []
     },

src/packages/__VUE/popover/index.vue

@@ -1,27 +1,21 @@
 <template>
-  <div @click="openPopover()" :class="classes">
+  <view @click="openPopover()" :class="classes">
     <slot name="reference"></slot>
 
     <template v-if="showPopup">
-      <div class="more-background" @click="closePopover()"> </div>
-      <div :class="popoverContent">
-        <div :class="popoverArrow"> </div>
+      <view class="more-background" @click="closePopover()"> </view>
+      <view :class="popoverContent">
+        <view :class="popoverArrow"> </view>
 
         <slot name="content"></slot>
 
-        <div
-          v-for="item in iconItemList"
-          :key="item.name"
-          :class="{ 'title-item': true, disabled: item.disabled }"
-        >
-          <slot v-if="item.icon">
-            <nut-icon class="item-img" :name="item.icon"></nut-icon
-          ></slot>
-          <div class="title-name">{{ item.name }}</div>
-        </div>
-      </div>
+        <view v-for="item in lists" :key="item.name" :class="{ 'title-item': true, disabled: item.disabled }">
+          <slot v-if="item.icon"> <nut-icon class="item-img" :name="item.icon"></nut-icon></slot>
+          <view class="title-name">{{ item.name }}</view>
+        </view>
+      </view>
     </template>
-  </div>
+  </view>
 </template>
 <script lang="ts">
 import { onMounted, computed, watch, ref, PropType, toRefs } from 'vue';
@@ -42,7 +36,7 @@ export default create({
   },
   props: {
     ...popupProps,
-    iconItemList: {
+    lists: {
       type: Array,
       default: []
     },

src/packages/__VUE/tag/doc.md

@@ -91,4 +91,4 @@ app.use(Tag);
 
 | 事件名称 | 说明     | 回调参数 |
 |----------|----------|----------|
-| close    | 关闭事件 | event    |
+| close    | 关闭事件 | event    |

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

@@ -3,61 +3,53 @@
     <h2>默认用法</h2>
     <view class="demo-w">
       <nut-badge :value="8" class="item">
-        <view class="demo-svg"></view>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge :value="76" class="item">
-        <view class="demo-svg"></view>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge value="NEW" class="item">
-        <view class="demo-svg"></view>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
-      <nut-badge isDot class="item">
-        <view class="demo-svg"></view>
+      <nut-badge dot class="item">
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
     </view>
     <h2>最大值</h2>
     <view class="demo-w">
       <nut-badge :value="200" :max="9" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge :value="200" :max="20" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge :value="200" :max="99" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
     </view>
 
     <h2>自定义颜色</h2>
     <view class="demo-w">
-      <nut-badge
-        :value="8"
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-        <view class="demo-svg"></view
-      ></nut-badge>
+      <nut-badge :value="8" class="item" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge
         :value="76"
         class="item"
         color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       >
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
       <nut-badge
         value="NEW"
         class="item"
         color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
       >
-        <view class="demo-svg"></view
-      ></nut-badge>
-      <nut-badge
-        isDot
-        class="item"
-        color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)"
-      >
-        <view class="demo-svg"></view
-      ></nut-badge>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
+      <nut-badge dot class="item" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
+      </nut-badge>
     </view>
 
     <h2>自定义徽标内容</h2>
@@ -66,7 +58,7 @@
         <template #icons>
           <nut-icon name="Check" color="#ffffff" size="12"></nut-icon>
         </template>
-        <view class="demo-svg"></view>
+        <nut-avatar class="demo-svg" shape="square"></nut-avatar>
       </nut-badge>
       <nut-badge class="item">
         <template #icons>
@@ -84,15 +76,9 @@
 
     <h2>自定义位置</h2>
     <view class="demo-w">
-      <nut-badge :value="8" top="5" right="5" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
-      <nut-badge :value="76" top="10" right="10" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
-      <nut-badge value="NEW" class="item">
-        <view class="demo-svg"></view
-      ></nut-badge>
+      <nut-badge :value="8" top="5" right="5" class="item"> <view class="demo-svg"></view></nut-badge>
+      <nut-badge :value="76" top="10" right="10" class="item"> <view class="demo-svg"></view></nut-badge>
+      <nut-badge value="NEW" class="item"> <view class="demo-svg"></view></nut-badge>
     </view>
 
     <h2>独立展示</h2>
@@ -111,17 +97,18 @@ export default {
 </script>
 
 <style lang="scss">
+.item {
+  margin: 10px 20px;
+}
 .demo-w {
   margin: 20px 0;
-  .item {
-    margin: 10px 20px;
-    .demo-svg {
-      display: inline-block;
-      width: 40px;
-      height: 40px;
-      background: rgba(229, 232, 232);
-      border-radius: 3px;
-    }
-  }
+}
+.demo-svg {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  background: rgba(229, 232, 232);
+  border-radius: 3px;
+  margin-right: 0;
 }
 </style>

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

@@ -1,40 +1,26 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-popover
-      v-model:visible="visible.lightTheme"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.lightTheme" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">明朗风格</nut-button>
       </template>
     </nut-popover>
 
-    <nut-popover
-      v-model:visible="visible.darkTheme"
-      theme="dark"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.darkTheme" theme="dark" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">暗黑风格</nut-button>
       </template>
     </nut-popover>
 
     <h2>选项配置</h2>
-    <nut-popover
-      v-model:visible="visible.showIcon"
-      theme="dark"
-      :iconItemList="itemList"
-    >
+    <nut-popover v-model:visible="visible.showIcon" theme="dark" :lists="itemList">
       <template #reference>
         <nut-button type="primary" shape="square">展示图标</nut-button>
       </template>
     </nut-popover>
 
-    <nut-popover
-      v-model:visible="visible.disableAction"
-      :iconItemList="itemListDisabled"
-    >
+    <nut-popover v-model:visible="visible.disableAction" :lists="itemListDisabled">
       <template #reference>
         <nut-button type="primary" shape="square">禁用选项</nut-button>
       </template>
@@ -48,11 +34,7 @@
 
       <template #content>
         <div class="self-content">
-          <div
-            class="self-content-item"
-            v-for="(item, index) in selfContent"
-            :key="index"
-          >
+          <div class="self-content-item" v-for="(item, index) in selfContent" :key="index">
             <nut-icon :name="item.name" size="15"></nut-icon>
             <div class="self-content-desc">{{ item.desc }}</div>
           </div>
@@ -61,34 +43,19 @@
     </nut-popover>
 
     <h2>位置自定义</h2>
-    <nut-popover
-      v-model:visible="visible.topLocation"
-      location="top"
-      theme="dark"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.topLocation" location="top" theme="dark" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">向上弹出</nut-button>
       </template>
     </nut-popover>
 
     <h2></h2>
-    <nut-popover
-      v-model:visible="visible.rightLocation"
-      location="right"
-      theme="dark"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.rightLocation" location="right" theme="dark" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">向右弹出</nut-button>
       </template>
     </nut-popover>
-    <nut-popover
-      v-model:visible="visible.leftLocation"
-      location="left"
-      theme="dark"
-      :iconItemList="iconItemList"
-    >
+    <nut-popover v-model:visible="visible.leftLocation" location="left" theme="dark" :lists="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">向左弹出</nut-button>
       </template>