feat: ✨ SidebarItem、TabbarItem、GridItem组件增加徽标自定义属性badge-props

Moonofweisheng · Nov 6, 2023 · 7143098 · 7143098
1 parent 11d10b4
commit 7143098
Show file tree

Hide file tree

Showing 11 changed files with 76 additions and 24 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2023-11-05 21:37:15
+ * @LastEditTime: 2023-11-06 20:48:43
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\docs\.vitepress\config.ts
@@ -313,7 +313,7 @@ export default defineConfig({
           text: "数据展示",
           items: [{
             link: "/component/badge",
-            text: "Badge 角标"
+            text: "Badge 徽标"
           }, {
             link: "/component/card",
             text: "Card 卡片"

diff --git a/docs/component/badge.md b/docs/component/badge.md
@@ -1,6 +1,6 @@
 <frame/>
 
-# Badge 标记
+# Badge 徽标
 
 
 出现在按钮、图标旁的数字或状态标记。

diff --git a/docs/component/grid.md b/docs/component/grid.md
@@ -248,6 +248,7 @@
 | use-icon-slot | 是否开启 `GridItem` icon 插槽                                                                                             | boolean        | -                                           | false  | -        |
 | use-text-slot | 是否开启 `GridItem` text 内容插槽                                                                                         | boolean        | -                                           | false  | -        |
 | icon-size     | 图标大小                                                                                                                  | string         | -                                           | 26px   | -        |
+| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes)	| BadgeProps    | -      | -  | 0.1.50   |
 
 ## GridItem Events
 

diff --git a/docs/component/input.md b/docs/component/input.md
@@ -51,7 +51,7 @@ function handleChange(event) {
 
 ## 前后icon
 
-设置前置icon `prefix-icon`，设置后置icon `suffix-icon`，icon 为 [icon](/#/components/icon) 章节中的图标，如果没有你需要的图标，则使用 `prefix`、`suffix` 插槽进行自定义插入。
+设置前置icon `prefix-icon`，设置后置icon `suffix-icon`，icon 为 [icon](/component/icon) 章节中的图标，如果没有你需要的图标，则使用 `prefix`、`suffix` 插槽进行自定义插入。
 
 ```html
 <wd-input

diff --git a/docs/component/layout.md b/docs/component/layout.md
@@ -85,9 +85,6 @@
 </wd-row>
 ```
 
-<!-- ## flex 布局
-
-*注意：由于微信小程序使用插槽时，插槽会渲染到当前标签外部，因此在组件上设置flex布局属性，对插槽内部并不生效，因此flex布局效果需要用户参考[H5组件库 Layout](http://fant-mini-plus.top/wot-design/#/components/layout)自行实现。* -->
 
 ## Row Attributes
 

diff --git a/docs/component/sidebar.md b/docs/component/sidebar.md
@@ -461,11 +461,13 @@ function onScroll(e) {
 | -------- | ---------------------- | -------------------------- | ------ | ------ | -------- |
 | label    | 当前选项标题           | string                     | -      | -      | 0.1.49   |
 | value    | 当前选项的值，唯一标识 | `number \| string`         | -      | -      | 0.1.49   |
-| badge    | 徽标显示值             | `number \| string \| null` | -      | -      | 0.1.49   |
 | icon     | 图标                   | string                     | -      | -      | 0.1.49   |
-| isDot    | 是否点状徽标           | boolean                    | -      | false  | 0.1.49   |
-| max      | 徽标最大值             | number                     | -      | 99     | 0.1.49   |
+| badge    | 徽标属性，徽标显示值             | `number \| string \| null` | -      | -      | 0.1.49   |
+| isDot    | 徽标属性，是否点状徽标           | boolean                    | -      | false  | 0.1.49   |
+| max      | 徽标属性，徽标最大值             | number                     | -      | 99     | 0.1.49   |
 | disabled | 是否禁用               | boolean                    | -      | false  | 0.1.49   |
+| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes)	| BadgeProps    | -      | -  | 0.1.50   |
+
 
 ## SidebarItem Slots
 

diff --git a/docs/component/tabbar.md b/docs/component/tabbar.md
@@ -168,7 +168,7 @@ function handleChange1({ value }: { value: string }) {
 | value        | 徽标显示值     | number / string         | -              | -        | 0.1.27     |
 | isDot        | 是否点状徽标   | boolean                 | -              | false    | 0.1.27     |
 | max          | 徽标最大值     | number                  | -              | 99       | 0.1.27     |
-
+| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes)	| BadgeProps    | -      | -  | 0.1.50   |
 ## TabbarItem Slots
 | name   | 说明                 | 参数                    | 最低版本 |
 | ------ | -------------------- | ----------------------- | -------- |

diff --git a/src/pages/sidebar/Index.vue b/src/pages/sidebar/Index.vue
@@ -1,3 +1,12 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-11-06 20:08:34
+ * @LastEditTime: 2023-11-06 20:32:06
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\pages\sidebar\Index.vue
+ * 记得注释
+-->
 <template>
   <page-wraper>
     <demo-block title="基础用法" transparent>
@@ -10,7 +19,7 @@
         <wd-sidebar v-model="active2">
           <wd-sidebar-item :value="0" label="标签名称" is-dot />
           <wd-sidebar-item :value="1" label="标签名称" badge="5" />
-          <wd-sidebar-item :value="2" label="标签名称" />
+          <wd-sidebar-item :value="2" label="标签名称" badge="2" :badge-props="{ type: 'warning', modelValue: 55, max: 99 }" />
         </wd-sidebar>
         <wd-sidebar v-model="active3">
           <wd-sidebar-item :value="0" label="标签名称" />

diff --git a/src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue b/src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue
@@ -4,7 +4,7 @@
       <slot v-if="useSlot" />
       <block v-else>
         <view :style="'width:' + iconSize + '; height: ' + iconSize" class="wd-grid-item__wrapper">
-          <wd-badge custom-class="badge" :is-dot="isDot" :modelValue="value" :max="max" :type="type">
+          <wd-badge custom-class="badge" :is-dot="isDot" :modelValue="value" :max="max" :type="type" v-bind="badgeProps">
             <template v-if="useIconSlot">
               <slot name="icon" />
             </template>
@@ -32,6 +32,18 @@ export default {
 import { getCurrentInstance, inject, onBeforeMount, onMounted, ref, type Ref, watch } from 'vue'
 
 type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+interface BadgeProps {
+  modelValue?: number | string | null
+  bgColor?: string
+  max?: number
+  isDot?: boolean
+  hidden?: boolean
+  type?: BadgeType
+  top?: number
+  right?: number
+  customClass?: string
+  customStyle?: string
+}
 type LinkType = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'
 interface Props {
   customText?: string
@@ -50,6 +62,8 @@ interface Props {
   type?: BadgeType
   value?: number
   max?: number
+  // 徽标属性，透传给 Badge 组件
+  badgeProps?: BadgeProps
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -61,9 +75,7 @@ const props = withDefaults(defineProps<Props>(), {
   linkType: 'navigateTo',
   useSlot: false,
   useIconSlot: false,
-  useTextSlot: false,
-  // badge属性
-  isDot: false
+  useTextSlot: false
 })
 
 const style = ref<string>('')

diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue b/src/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue
@@ -10,7 +10,7 @@
     <template v-if="!$slots.icon && icon">
       <wd-icon custom-class="wd-sidebar-item__icon" :name="icon" size="20px"></wd-icon>
     </template>
-    <wd-badge :model-value="badge" :is-dot="isDot" :max="max" custom-class="wd-sidebar-item__badge">
+    <wd-badge :model-value="badge" :is-dot="isDot" :max="max" v-bind="badgeProps" custom-class="wd-sidebar-item__badge">
       {{ label }}
     </wd-badge>
   </view>
@@ -31,13 +31,29 @@ export default {
 import { computed, getCurrentInstance } from 'vue'
 import { inject, onBeforeUnmount, onMounted } from 'vue'
 
+type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+interface BadgeProps {
+  modelValue?: number | string | null
+  bgColor?: string
+  max?: number
+  isDot?: boolean
+  hidden?: boolean
+  type?: BadgeType
+  top?: number
+  right?: number
+  customClass?: string
+  customStyle?: string
+}
+
 interface Props {
   // 当前选项标题
   label: string
   // 当前选项的值，唯一标识
   value: number | string
   // 徽标显示值
   badge?: number | string | null
+  // 徽标属性，透传给 Badge 组件
+  badgeProps?: BadgeProps
   // 图标
   icon?: string
   // 是否点状徽标
@@ -54,10 +70,9 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   modelValue: 0,
   disabled: false,
-  isDot: false,
+  max: 99,
   customStyle: '',
-  customClass: '',
-  max: 99
+  customClass: ''
 })
 
 const parent = inject<any>('wdSidebar', null) // 父组件

diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="wd-tabbar-item" :style="customStyle" @click="handleClick">
-    <wd-badge :modelValue="value" :isDot="isDot" :max="max" type="danger">
+    <wd-badge :modelValue="value" v-bind="badgeProps" :is-dot="isDot" :max="max">
       <view class="wd-tabbar-item__body">
         <slot name="icon" :active="active"></slot>
         <template v-if="!$slots.icon && icon">
@@ -26,6 +26,21 @@ export default {
 <script lang="ts" setup>
 import { type CSSProperties, computed, inject, onMounted, ref, watch, getCurrentInstance } from 'vue'
 import { isDef, objToStyle } from '../common/util'
+import { badgeProps } from 'element-plus'
+
+type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+interface BadgeProps {
+  modelValue?: number | string | null
+  bgColor?: string
+  max?: number
+  isDot?: boolean
+  hidden?: boolean
+  type?: BadgeType
+  top?: number
+  right?: number
+  customClass?: string
+  customStyle?: string
+}
 
 interface Props {
   // 自定义样式类
@@ -44,13 +59,14 @@ interface Props {
   isDot?: boolean
   // 徽标最大值
   max?: number
+  // 徽标属性，透传给 Badge 组件
+  badgeProps?: BadgeProps
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  max: 99,
   customClass: '',
-  customStyle: '',
-  isDot: false,
-  max: 99
+  customStyle: ''
 })
 const { proxy } = getCurrentInstance() as any