fix: badge、popover 优化 (#696)

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

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

* fix: popover/badge组件review修改

* fix: popover组件review修改

* fix: badge/popover组件代码优化

* fix: badge组件代码修改

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

@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts">
-import { computed, onMounted, onUnmounted, onActivated, onDeactivated, reactive } from 'vue';
+import { computed, reactive } from 'vue';
 import { createComponent } from '../../utils/create';
-const { componentName, create } = createComponent('badge');
+const { create } = createComponent('badge');
 export default create({
   props: {
     value: {

src/packages/__VUE/badge/index.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { computed, reactive } from 'vue';
 import { createComponent } from '../../utils/create';
-const { componentName, create } = createComponent('badge');
+const { create } = createComponent('badge');
 export default create({
   props: {
     value: {

src/packages/__VUE/popover/demo.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-popover v-model:visible="visible.lightTheme" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.lightTheme" :list="iconItemList" @choose="chooseItem">
       <template #reference>
         <nut-button type="primary" shape="square">明朗风格</nut-button>
       </template>
     </nut-popover>
 
-    <nut-popover v-model:visible="visible.darkTheme" theme="dark" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.darkTheme" theme="dark" :list="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" :lists="itemList">
+    <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
       <template #reference>
         <nut-button type="primary" shape="square">展示图标</nut-button>
       </template>
     </nut-popover>
 
-    <nut-popover v-model:visible="visible.disableAction" :lists="itemListDisabled">
+    <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled">
       <template #reference>
         <nut-button type="primary" shape="square">禁用选项</nut-button>
       </template>
@@ -43,19 +43,19 @@
     </nut-popover>
 
     <h2>位置自定义</h2>
-    <nut-popover v-model:visible="visible.topLocation" location="top" theme="dark" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.topLocation" location="top" theme="dark" :list="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" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.rightLocation" location="right" theme="dark" :list="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" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.leftLocation" location="left" theme="dark" :list="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">向左弹出</nut-button>
       </template>
@@ -149,12 +149,17 @@ export default createDemo({
       }
     ]);
 
+    const chooseItem = () => {
+      alert('选择项');
+    };
+
     return {
       iconItemList,
       itemList,
       visible,
       itemListDisabled,
-      selfContent
+      selfContent,
+      chooseItem
     };
   }
 });

src/packages/__VUE/popover/doc.md

@@ -28,7 +28,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
 ```html
   <nut-popover
       v-model:visible="visible"
-      :lists="List"
+      :list="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"
-      :lists="List"
+      :list="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">暗黑风格</nut-button>
@@ -65,7 +65,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
   <nut-popover
       v-model:visible="visible"
       theme="dark"
-      :lists="List"
+      :list="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">展示图标</nut-button>
@@ -92,12 +92,12 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
 ```
 
 
-在 lists 数组中，可以通过 disabled 字段来禁用某个选项。
+在 list 数组中，可以通过 disabled 字段来禁用某个选项。
 
 ```html
   <nut-popover
       v-model:visible="visible"
-      :lists="List"
+      :list="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">禁用选项</nut-button>
@@ -163,7 +163,7 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
       v-model:visible="visible"
       location="top"
       theme="dark"
-      :lists="List"
+      :list="List"
     >
       <template #reference>
         <nut-button type="primary" shape="square">向上弹出</nut-button>
@@ -178,10 +178,10 @@ Popover 支持明朗和暗黑两种风格，默认为明朗风格，将 theme
 
 | 字段            | 说明                            | 类型     | 默认值      |
 |----------------|---------------------------------|---------|------------|
-| lists          | 选项列表                         | List[]   | []        |
+| list          | 选项列表                          | List[]   | []        |
 | v-model        | 是否展示气泡弹出层                 | boolean  | false     |
 | theme          | 主题风格，可选值为 dark            | string   | `light`   |
-| location       | 弹出位置，可选值为 top,left,right  | string   | `bottom`  |                                       
+| location       | 弹出位置，可选值为 top,left,right  | string   | `bottom`  |
 
 ### List 数据结构  
 
@@ -191,4 +191,20 @@ List 属性是一个由对象构成的数组，数组中的每个对象配置一
 |----------------|----------------------|----------|--------|
 | name           | 选项文字               | string   | -      |
 | icon           | nut-icon 图标名称      | string   | -      |
-| disabled       | 是否为禁用状态          | boolean  | false  | 
+| disabled       | 是否为禁用状态          | boolean  | false  | 
+
+
+### Slots
+
+| 名称    | 说明         |
+|---------|--------------|
+| default | 自定义气泡组件菜单内容 |
+| reference | 触发 Popover 显示的元素内容 |
+
+### Events
+
+| 名称    | 说明         |
+|---------|--------------|
+| choose | 点击选项时触发 |
+| open   | 打开菜单时触发 |
+| close  | 关闭菜单时触发 |

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

@@ -1,15 +1,20 @@
 <template>
-  <view @click="openPopover()" :class="classes">
+  <view @click="openPopover" :class="classes">
     <slot name="reference"></slot>
 
     <template v-if="showPopup">
-      <view class="more-background" @click="closePopover()"> </view>
+      <view class="more-background" @click="closePopover"> </view>
       <view :class="popoverContent">
         <view :class="popoverArrow"> </view>
 
         <slot name="content"></slot>
 
-        <view v-for="item in lists" :key="item.name" :class="{ 'title-item': true, disabled: item.disabled }">
+        <view
+          v-for="item in list"
+          :key="item.name"
+          :class="{ 'title-item': true, disabled: item.disabled }"
+          @click="chooseItem"
+        >
           <slot v-if="item.icon"> <nut-icon class="item-img" :name="item.icon"></nut-icon></slot>
           <view class="title-name">{{ item.name }}</view>
         </view>
@@ -30,14 +35,13 @@ export type PopoverLocation = 'bottom' | 'top' | 'left' | 'right';
 
 export default create({
   inheritAttrs: false,
-  children: [Popup, Button],
   components: {
-    'nut-popup': Popup,
-    'nut-button': Button
+    [Popup.name]: Popup,
+    [Button.name]: Button
   },
   props: {
     ...popupProps,
-    lists: {
+    list: {
       type: Array,
       default: []
     },
@@ -52,7 +56,7 @@ export default create({
       default: 'bottom'
     }
   },
-  emits: ['update', 'update:visible', 'close'],
+  emits: ['update', 'update:visible', 'close', 'choose', 'openPopover'],
   setup(props, { emit }) {
     const showPopup = ref(props.visible);
 
@@ -96,23 +100,34 @@ export default create({
       emit('update:visible', val);
     };
 
-    const openPopover = () => {
+    const openPopover = (event: Event) => {
+      event.stopPropagation();
+      event.preventDefault();
       update(!props.visible);
+      emit('open');
     };
 
-    const closePopover = (e) => {
-      e.stopPropagation();
+    const closePopover = (event: Event) => {
+      event.stopPropagation();
+      event.preventDefault();
       emit('close');
       emit('update:visible', false);
     };
 
+    const chooseItem = (event: Event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      emit('choose');
+    };
+
     return {
       classes,
       showPopup,
       openPopover,
       popoverContent,
       popoverArrow,
-      closePopover
+      closePopover,
+      chooseItem
     };
   }
 });

src/packages/__VUE/popover/index.vue

@@ -1,15 +1,20 @@
 <template>
-  <view @click="openPopover()" :class="classes">
+  <view @click="openPopover" :class="classes">
     <slot name="reference"></slot>
 
     <template v-if="showPopup">
-      <view class="more-background" @click="closePopover()"> </view>
+      <view class="more-background" @click="closePopover"> </view>
       <view :class="popoverContent">
         <view :class="popoverArrow"> </view>
 
         <slot name="content"></slot>
 
-        <view v-for="item in lists" :key="item.name" :class="{ 'title-item': true, disabled: item.disabled }">
+        <view
+          v-for="item in list"
+          :key="item.name"
+          :class="{ 'title-item': true, disabled: item.disabled }"
+          @click="chooseItem(e, item)"
+        >
           <slot v-if="item.icon"> <nut-icon class="item-img" :name="item.icon"></nut-icon></slot>
           <view class="title-name">{{ item.name }}</view>
         </view>
@@ -36,7 +41,7 @@ export default create({
   },
   props: {
     ...popupProps,
-    lists: {
+    list: {
       type: Array,
       default: []
     },
@@ -51,7 +56,7 @@ export default create({
       default: 'bottom'
     }
   },
-  emits: ['update', 'update:visible', 'close'],
+  emits: ['update', 'update:visible', 'close', 'choose', 'openPopover'],
   setup(props, { emit }) {
     const showPopup = ref(props.visible);
 
@@ -95,23 +100,34 @@ export default create({
       emit('update:visible', val);
     };
 
-    const openPopover = () => {
+    const openPopover = (event: Event) => {
+      event.stopPropagation();
+      event.preventDefault();
       update(!props.visible);
+      emit('open');
     };
 
-    const closePopover = (e) => {
-      e.stopPropagation();
+    const closePopover = (event: Event) => {
+      event.stopPropagation();
+      event.preventDefault();
       emit('close');
       emit('update:visible', false);
     };
 
+    const chooseItem = (event: Event, item: any) => {
+      event.stopPropagation();
+      event.preventDefault();
+      emit('choose');
+    };
+
     return {
       classes,
       showPopup,
       openPopover,
       popoverContent,
       popoverArrow,
-      closePopover
+      closePopover,
+      chooseItem
     };
   }
 });

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

@@ -1,26 +1,26 @@
 <template>
   <div class="demo">
     <h2>基础用法</h2>
-    <nut-popover v-model:visible="visible.lightTheme" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.lightTheme" :list="iconItemList" @choose="chooseItem">
       <template #reference>
         <nut-button type="primary" shape="square">明朗风格</nut-button>
       </template>
     </nut-popover>
 
-    <nut-popover v-model:visible="visible.darkTheme" theme="dark" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.darkTheme" theme="dark" :list="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" :lists="itemList">
+    <nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
       <template #reference>
         <nut-button type="primary" shape="square">展示图标</nut-button>
       </template>
     </nut-popover>
 
-    <nut-popover v-model:visible="visible.disableAction" :lists="itemListDisabled">
+    <nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled">
       <template #reference>
         <nut-button type="primary" shape="square">禁用选项</nut-button>
       </template>
@@ -43,19 +43,19 @@
     </nut-popover>
 
     <h2>位置自定义</h2>
-    <nut-popover v-model:visible="visible.topLocation" location="top" theme="dark" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.topLocation" location="top" theme="dark" :list="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" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.rightLocation" location="right" theme="dark" :list="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" :lists="iconItemList">
+    <nut-popover v-model:visible="visible.leftLocation" location="left" theme="dark" :list="iconItemList">
       <template #reference>
         <nut-button type="primary" shape="square">向左弹出</nut-button>
       </template>
@@ -147,12 +147,17 @@ export default {
       }
     ]);
 
+    const chooseItem = () => {
+      console.log('选择项');
+    };
+
     return {
       iconItemList,
       itemList,
       visible,
       itemListDisabled,
-      selfContent
+      selfContent,
+      chooseItem
     };
   }
 };