添加bar组件

This commit is contained in:
2025-11-05 17:34:23 +08:00
parent 7314f23529
commit 3cb63ffca7
223 changed files with 23185 additions and 2 deletions

View File

@@ -0,0 +1,25 @@
## 0.1.22025-08-31
- chore: 更新文档
## 0.1.12025-05-09
- feat: 组件增加提示
- fix: 修复uniapp vue3 type问题
## 0.1.02025-04-21
- feat: 兼容uniappx 鸿蒙next
## 0.0.92025-04-05
- fix: 修复opacity书写错误
## 0.0.82025-04-05
- fix: 修复安卓离屏节点出现的问题
## 0.0.72025-02-10
- fix: uniappx 安卓 text宽度受限[bug](https://issues.dcloud.net.cn/pages/issues/detail?id=11847)
## 0.0.62024-12-15
- feat: 兼容uniappx 微信小程序
## 0.0.52024-10-06
- fix: 修复vue2类型问题
## 0.0.42024-10-02
- fix: 修复单独使用时位置不对
## 0.0.32024-10-02
- fix: 修复单独使用时位置不对
## 0.0.22024-09-24
- feat: 兼容uniappx
## 0.0.12023-07-17
- 首次上传可能存在BUG

View File

@@ -0,0 +1,112 @@
@import '~@/uni_modules/lime-style/index.scss';
/* #ifdef uniVersion >= 4.75 */
$use-css-var: true;
/* #endif */
$badge-size: create-var(badge-size , $spacer);
$badge-color: create-var(badge-color , white);
// $badge-padding: create-var(badge-padding, 0 4px);
$badge-padding-x: create-var(badge-padding-x, $spacer-tn); // 水平方向(左右)
$badge-padding-y: create-var(badge-padding-y, 0); // 垂直方向(上下)
$badge-font-size: create-var(badge-font-size, $font-size-sm);
$badge-font-weight: create-var(badge-font-weight, bold);
$badge-border-width: create-var(badge-border-width, 1rpx);
$badge-border-color: create-var(badge-border-color, white);
$badge-bg-color: create-var(badge-bg-color, $error-color);
$badge-dot-color: create-var(badge-dot-color, $error-color);
$badge-dot-size: create-var(badge-dot-size, 8px);
$badge-font: create-var(badge-font, -apple-system-font, helvetica neue, arial, sans-serif);
$badge-border-radius: create-var(badge-border-radius, $border-radius-hg);
.l-badge {
/* #ifndef UNI-APP-X */
display: inline-block;
/* #endif */
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
min-width: $badge-size;
/* #endif */
box-sizing: border-box;
// padding: $badge-padding;
@include padding($badge-padding-y $badge-padding-x);
// box-sizing: content-box;
color: $badge-color;
font-weight: $badge-font-weight;
font-size: $badge-font-size;
font-family: $badge-font;
line-height: 1.2;
white-space: nowrap;
text-align: center;
background-color: $badge-bg-color;
// border: $badge-border-width solid $badge-border-color;
border-width: $badge-border-width;
border-style: solid;
border-color: $badge-border-color;
// border-radius: $badge-border-radius;
@include border-radius($badge-border-radius);
overflow: visible;
&--fixed {
position: absolute;
transform-origin: 100%;
z-index: 1
}
&--offscreen {
position: fixed !important;
opacity: 0;
}
&--top-left {
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
&--top-right {
top: 0;
right: 0;
transform: translate(50%, -50%);
}
&--bottom-left {
bottom: 0;
left: 0;
transform: translate(-50%, 50%);
}
&--bottom-right {
bottom: 0;
right: 0;
transform: translate(50%, 50%);
}
&--dot {
width: $badge-dot-size;
min-width: 0;
height: $badge-dot-size;
background: $badge-dot-color;
border-radius: 99px;
// border: none;
border-width: 0;
padding: 0;
overflow: visible;
}
&__wrapper {
position: relative;
overflow: visible;
/* #ifndef UNI-APP-X */
display: inline-block;
/* #endif */
/* #ifdef UNI-APP-X */
// align-self: flex-start;
/* #endif */
}
}

View File

@@ -0,0 +1,83 @@
@import '~@/uni_modules/lime-style/index.scss';
$badge-size: create-var(badge-size , 16px);
$badge-color: create-var(badge-color , white);
$badge-padding: create-var(badge-padding, 0 3px);
$badge-font-size: create-var(badge-font-size, 12px);
$badge-font-weight: create-var(badge-font-weight, bold);
$badge-border-width: create-var(badge-border-width, 1px);
$badge-border-color: create-var(badge-border-color, white);
$badge-background: create-var(badge-background, $error-color);
$badge-dot-color: create-var(badge-dot-color, $error-color);
$badge-dot-size: create-var(badge-dot-size, 8px);
$badge-font: create-var(badge-font, -apple-system-font, helvetica neue, arial, sans-serif);
$badge-border-radius: create-var(badge-border-radius, 999px);
.l-badge {
display: inline-block;
box-sizing: border-box;
min-width: $badge-size;
padding: $badge-padding;
color: $badge-color;
font-weight: $badge-font-weight;
font-size: $badge-font-size;
font-family: $badge-font;
line-height: 1.2;
text-align: center;
background-color: $badge-background;
border: $badge-border-width solid $badge-border-color;
border-radius: $badge-border-radius;
&--fixed {
position: absolute;
transform-origin: 100%;
}
&--top-left {
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
&--top-right {
top: 0;
right: 0;
transform: translate(50%, -50%);
}
&--bottom-left {
bottom: 0;
left: 0;
transform: translate(-50%, 50%);
}
&--bottom-right {
bottom: 0;
right: 0;
transform: translate(50%, 50%);
}
&--dot {
width: $badge-dot-size;
min-width: 0;
height: $badge-dot-size;
background: $badge-dot-color;
border-radius: 100%;
// border: none;
border-width: 0;
padding: 0;
}
&__wrapper {
position: relative;
/* #ifndef UNI-APP-X */
display: inline-block;
/* #endif */
/* #ifdef UNI-APP-X */
// display: inline-block;
width: fit-content;
align-items: flex-start;
/* #endif */
}
}

View File

@@ -0,0 +1,148 @@
<template>
<view class="l-badge__wrapper" v-if="$slots['default'] != null">
<slot></slot>
<text v-if="hasContent || dot" class="l-badge" ref="textRef" :class="classes" :style="[styles]">
<slot name="content">{{renderContent}}</slot>
</text>
<!-- #ifdef APP-HARMONY -->
<text v-if="hasContent || dot" class="l-badge l-badge--offscreen" ref="offscreenRef" >
<slot name="content">{{renderContent}}</slot>
</text>
<!-- #endif -->
</view>
<text v-else-if="hasContent || dot" class="l-badge" :class="classes" :style="[styles]">
<slot name="content">{{renderContent}}</slot>
</text>
</template>
<script lang="uts" setup>
/**
* Badge 徽标组件
* @description 用于展示状态标记、消息数量等提示信息,支持多种形态和定位方式
* <br> 插件类型LBadgeComponentPublicInstance
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-badge
*
* @property {string} [color] 徽标背景色支持CSS颜色值
* @property {number | string | any} content 显示内容(数字/文字)
* @property {boolean} dot 是否显示为小红点优先级高于content
* @property {number} max 数字最大值(超出显示为${max}+
* @property {Array<string | number> | any[]} offset 位置偏移量([x, y]
* @property {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'} position 定位位置
* @property {'circle' | 'square' | 'bubble' | 'ribbon'} [shape] 形状(当前版本未实现)
* @property {boolean} showZero 数值为0时是否显示
* @property {'medium' | 'large'} [size] 尺寸(当前版本未实现)
* @property {string | number} [content] 支持字符串模板(例:'${count}条'
* @property {Array<string | number>} offset 支持单位(例:['-10rpx', '20px']
*/
import { isNumeric } from '@/uni_modules/lime-shared/isNumeric'
import { isNumber } from '@/uni_modules/lime-shared/isNumber'
import { addUnit } from '@/uni_modules/lime-shared/addUnit'
import { toBoolean } from '@/uni_modules/lime-shared/toBoolean'
import { getOffsetWithMinusString } from './utils'
import { BadgeProps } from './type'
const name = 'l-badge'
const props = withDefaults(defineProps<BadgeProps>(), {
dot: false,
max: 99,
showZero: false,
// #ifdef APP-ANDROID
// offset: [] as any[],
// #endif
// #ifndef APP-ANDROID
// offset: [] as (string | number)[],
// #endif
position: 'top-right'
})
const context = getCurrentInstance()!
const classes = computed(():Map<string, boolean>=>{
const cls = new Map<string, boolean>()
cls.set(`${name}--fixed`, toBoolean(context.slots['default']));
cls.set(`${name}--dot`, props.dot);
cls.set(`${name}--${props.position}`, context.slots['default'] != null);
return cls
})
const styles = computed(():Map<string, any|null>=>{
const style = new Map<string, any|null>()
if(toBoolean(props.color)) {
style.set('background-color', props.color!)
}
const positions = props.position.split('-');
const offset = props.offset;
if(offset != null && offset.length == 2) {
const x = offset[0];
const y = offset[1];
if(context.slots['default'] != null) {
if(positions.length == 2) {
const offsetY = positions[0], offsetX = positions[1];
if(isNumber(y)) {
const _y = y as number
style.set(offsetY, addUnit(offsetY == 'top' ? _y : -_y))
} else {
style.set(offsetY, offsetY == 'top' ? addUnit(y) : getOffsetWithMinusString(`${y}`))
}
if(isNumber(x)) {
const _x = x as number
style.set(offsetX, addUnit(offsetX == 'left' ? _x : -_x))
} else {
style.set(offsetY, offsetY == 'left' ? addUnit(x) : getOffsetWithMinusString(`${x}`))
}
}
} else {
style.set('margin-top', addUnit(y))
style.set('margin-left', addUnit(x))
}
}
return style
});
const hasContent = computed<boolean>(():boolean => {
if(toBoolean(context.slots['content'])) {
return true
}
const content = props.content;
return (content != '' && content != null && (props.showZero || content !== '0'));
});
const renderContent = computed<string>(():string=>{
const dot = props.dot
const max = props.max
const content = props.content
if(!dot && hasContent.value) {
if(max != 0 && isNumeric(content) && parseFloat(content.toString()) > max) {
return `${max}+`
}
}
if(dot) {
return ''
}
return `${content ?? ""}`
})
// #ifdef APP-HARMONY
// 鸿蒙BUG 显示不存
// 暂时先绕一下
const textRef = ref<UniTextElement|null>(null)
const offscreenRef = ref<UniTextElement|null>(null)
const resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
offscreenRef.value?.getBoundingClientRectAsync()?.then(res=>{
// const width = entries[0].target.getBoundingClientRect().width
textRef.value!.style.setProperty('width', res.width*1.05)
})
})
const stopWatch = watch(offscreenRef, (el:UniElement|null) => {
if(el== null) return
resizeObserver.observe(el)
})
onUnmounted(()=>{
stopWatch()
resizeObserver.disconnect()
})
// #endif
</script>
<style lang="scss">
@import './index-u';
</style>

View File

@@ -0,0 +1,117 @@
<template>
<view class="l-badge__wrapper" v-if="$slots.default">
<slot></slot>
<view v-if="hasContent || props.dot" class="l-badge" :class="classes" :style="[styles]">
<slot v-if="$slots.content" name="content"></slot>
<block v-else-if="renderContent">{{ renderContent }}</block>
</view>
</view>
<view v-else-if="hasContent || props.dot" class="l-badge" :class="classes" :style="[styles]">
<slot v-if="$slots.content" name="content"></slot>
<block v-else-if="renderContent">{{ renderContent }}</block>
</view>
</template>
<script lang="ts">
// @ts-nocheck
/**
* Badge 徽标组件
* @description 用于展示状态标记、消息数量等提示信息,支持多种形态和定位方式
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-badge
*
* @property {string} [color] 徽标背景色支持CSS颜色值
* @property {number | string | any} content 显示内容(数字/文字)
* @property {boolean} dot 是否显示为小红点优先级高于content
* @property {number} max 数字最大值(超出显示为${max}+
* @property {Array<string | number> | any[]} offset 位置偏移量([x, y]
* @property {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'} position 定位位置
* @property {'circle' | 'square' | 'bubble' | 'ribbon'} [shape] 形状(当前版本未实现)
* @property {boolean} showZero 数值为0时是否显示
* @property {'medium' | 'large'} [size] 尺寸(当前版本未实现)
* @property {string | number} [content] 支持字符串模板(例:'${count}条'
* @property {Array<string | number>} offset 支持单位(例:['-10rpx', '20px']
*/
import { computed, defineComponent, getCurrentInstance, onMounted } from '@/uni_modules/lime-shared/vue'
import badgeProps from './props'
import { isNumeric } from '@/uni_modules/lime-shared/isNumeric'
import { isNumber } from '@/uni_modules/lime-shared/isNumber'
import { addUnit } from '@/uni_modules/lime-shared/addUnit'
import { isDef } from '@/uni_modules/lime-shared/isDef'
import { getClassStr } from '@/uni_modules/lime-shared/getClassStr'
import { getOffsetWithMinusString } from './utils'
const name = 'l-badge'
interface CSSProperties {
[key : string] : string | number | undefined;
}
export default defineComponent({
name,
props: badgeProps,
setup(props) {
const context = getCurrentInstance()
// vue2 setup 解构的 slots 为空
const classes = computed(() => {
return getClassStr({
[`${name}--fixed`]: context.slots.default,
[`${name}--dot`]: props.dot,
[`${name}--${props.position}`]: Boolean(context.slots['default'])
})
})
const styles = computed(() => {
const style : CSSProperties = {
background: props.color,
};
if (props.offset) {
const [x, y] = props.offset;
const { position } = props;
const [offsetY, offsetX] = `${position}`.split('-') as ['top' | 'bottom', 'left' | 'right'];
if (context.slots.default) {
if (isNumber(y)) {
style[offsetY] = addUnit(offsetY === 'top' ? y : -y);
} else {
style[offsetY] = offsetY === 'top' ? addUnit(y) : getOffsetWithMinusString(`${y}`);
}
if (isNumber(x)) {
style[offsetX] = addUnit(offsetX === 'left' ? x : -x);
} else {
style[offsetX] = offsetX === 'left' ? addUnit(x) : getOffsetWithMinusString(`${x}`);
}
} else {
style.marginTop = addUnit(y);
style.marginLeft = addUnit(x);
}
}
return style
})
const hasContent = computed(() => {
if (Boolean(context.slots.content)) {
return !0
}
const { content, showZero } = props;
return (isDef(content) && content !== '' && (showZero || (content !== 0 && content !== '0')));
})
const renderContent = computed(() => {
const { dot, max, content } = props;
if (!dot && hasContent.value) {
//@ts-ignore
if (isDef(max) && max != 0 && isDef(content) && isNumeric(content!) && +content > +max) {
return `${max}+`
}
}
return content
})
return {
props,
classes,
styles,
hasContent,
renderContent
}
}
})
</script>
<style lang="scss">
@import './index-u';
</style>

View File

@@ -0,0 +1,20 @@
// @ts-nocheck
import type {PropType} from '@/uni_modules/lime-shared/vue'
export type BadgePosition =
| 'top-left'
| 'top-right'
| 'bottom-left'
| 'bottom-right';
type Numeric = string | number
export default {
dot: Boolean,
max: Number,
color: String,
offset: Array as unknown as PropType<[Numeric, Numeric]>,
content: [Number , String],
showZero: Boolean,
position: {
type: String as PropType<BadgePosition>,
default: 'top-right'
}
}

View File

@@ -0,0 +1,50 @@
// @ts-nocheck
export interface BadgeProps {
/**
* 颜色
* @default ''
*/
color?: string;
/**
* 徽标内容
*/
// #ifndef APP-ANDROID
content?: string|number;
// #endif
// #ifdef APP-ANDROID
content?: any;
// #endif
/**
* 是否为红点
*/
dot: boolean;
/**
* 封顶的数字值
* @default 99
*/
max: number;
/**
* 设置状态点的位置偏移,示例:[-10, 20] 或 ['10rpx', '8rpx']
*/
// #ifndef APP-ANDROID
offset?: Array<string | number>;
// #endif
// #ifdef APP-ANDROID
offset?: any[];
// #endif
position: string;
/**
* 形状 未实现
* @default circle
*/
shape?: 'circle' | 'square' | 'bubble' | 'ribbon';
/**
* 当数值为 0 时,是否展示徽标
*/
showZero: boolean;
/**
* 尺寸 未实现
* @default medium
*/
size?: 'medium' | 'large';
}

View File

@@ -0,0 +1,3 @@
export function getOffsetWithMinusString(val : string):string {
return val.startsWith('-') ? val.replace('-', '') : `-${val}`
};

View File

@@ -0,0 +1,172 @@
<template>
<view class="demo-block">
<text class="demo-block__title-text ultra">Badge 徽标</text>
<text class="demo-block__desc-text">用于告知用户该区域的状态变化或者待处理任务的数量</text>
<view class="demo-block__body">
<view class="demo-block card">
<text class="demo-block__title-text large">基础</text>
<view class="demo-block__body">
<view class="preview" >
<l-badge content="500">
<view class="child"/>
</l-badge>
<l-badge :content="10">
<view class="child" />
</l-badge>
<l-badge content="Hot">
<view class="child" />
</l-badge>
<l-badge :dot="true">
<view class="child" />
</l-badge>
</view>
</view>
</view>
<view class="demo-block card">
<text class="demo-block__title-text large">最大值</text>
<view class="demo-block__body">
<view class="preview">
<l-badge content="20" :max="9">
<view class="child" />
</l-badge>
<l-badge content="50" :max="20">
<view class="child" />
</l-badge>
<l-badge content="200" :max="99">
<view class="child" />
</l-badge>
</view>
</view>
</view>
<view class="demo-block card">
<text class="demo-block__title-text large">徽标颜色</text>
<view class="demo-block__body">
<view class="preview">
<l-badge content="5" color="#1989fa">
<view class="child" />
</l-badge>
<l-badge content="10" color="#1989fa">
<view class="child" />
</l-badge>
<l-badge :dot="true" color="#1989fa">
<view class="child" />
</l-badge>
</view>
</view>
</view>
<view class="demo-block card">
<text class="demo-block__title-text large">徽标内容</text>
<view class="demo-block__body">
<view class="preview">
<l-badge>
<view class="child" />
<template #content>你好</template>
</l-badge>
<l-badge>
<view class="child" />
<template #content>999</template>
</l-badge>
</view>
</view>
</view>
<view class="demo-block card">
<text class="demo-block__title-text large">徽标位置</text>
<view class="demo-block__body">
<view class="preview">
<l-badge content="10" position="top-left">
<view class="child" />
</l-badge>
<l-badge content="10" position="bottom-left">
<view class="child" />
</l-badge>
<l-badge content="10" position="bottom-right">
<view class="child" />
</l-badge>
</view>
</view>
</view>
<view class="demo-block card">
<text class="demo-block__title-text large">独立展示</text>
<view class="demo-block__body">
<view class="preview">
<l-badge content="20" />
<l-badge content="200" :max="88" />
</view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss">
$card-bg-color: var(--doc-card-bg-color, white);
// $page-bg-color: var(--doc-page-bg-color, #f5f5f5);
$title-color: var(--doc-title-color, #000000E6);
$card-summary-color: var(--doc-card-summary-color, #0000000F);
$summary-color: var(--doc-summary-color, #00000099);
.preview {
padding-top: 20px;
flex-direction: row;
justify-content: space-around;
overflow: visible;
// padding-left: 20px;
}
.child {
width: 50px;
height: 50px;
background-color: $card-summary-color;
border-radius: 4px;
}
.demo-block {
margin: 32px 10px 0;
overflow: visible;
&.card{
padding: 30rpx;
background-color: $card-bg-color;
transition-property: background-color;
// transition-duration: 300ms;
margin-bottom: 20rpx !important;
}
&__title {
margin: 0;
margin-top: 8px;
&-text {
color: $summary-color;
font-weight: 400;
font-size: 14px;
line-height: 16px;
&.large {
color: $title-color;
font-size: 18px;
font-weight: 700;
line-height: 26px;
}
&.ultra {
color: $title-color;
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
}
}
&__desc-text {
color: $summary-color;
margin: 8px 16px 0 0;
font-size: 14px;
line-height: 22px;
}
&__body {
margin: 16px 0;
overflow: visible;
.demo-block {
// margin-top: 0px;
margin: 0;
}
}
}
</style>

View File

@@ -0,0 +1,107 @@
{
"id": "lime-badge",
"displayName": "lime-badge 徽标",
"version": "0.1.2",
"description": "lime-badge 实现的在右上角展示徽标数字或小红点兼容uniapp/uniappx",
"keywords": [
"badge",
"徽标"
],
"repository": "",
"engines": {
"HBuilderX": "^4.26",
"uni-app": "^4.74",
"uni-app-x": "^4.75"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "",
"darkmode": "√",
"i18n": "x",
"widescreen": "x"
},
"uni_modules": {
"dependencies": [
"lime-shared",
"lime-style"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "√",
"aliyun": "√",
"alipay": "x"
},
"client": {
"uni-app": {
"vue": {
"vue2": "√",
"vue3": "√"
},
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"vue": "√",
"nvue": "-",
"android": {
"extVersion": "",
"minVersion": "21"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√",
"alipay": "-",
"toutiao": "-",
"baidu": "-",
"kuaishou": "-",
"jd": "-",
"harmony": "-",
"qq": "-",
"lark": "-"
},
"quickapp": {
"huawei": "-",
"union": "-"
}
},
"uni-app-x": {
"web": {
"safari": "√",
"chrome": "√"
},
"app": {
"android": {
"extVersion": "",
"minVersion": "21"
},
"ios": "√",
"harmony": "√"
},
"mp": {
"weixin": "√"
}
}
}
}
}
}

View File

@@ -0,0 +1,198 @@
# lime-badge 徽标
- 在右上角展示徽标数字或小红点。
- 插件依赖`lime-shared`,`lime-style`不喜勿下
## 文档
[badge【站点1】](https://limex.qcoon.cn/components/badge.html)
[badge【站点2】](https://limeui.netlify.app/components/badge.html)
[badge【站点3】](https://limeui.familyzone.top/components/badge.html)
## 安装
插件市场导入即可,首次导入可能需要重新编译
## 代码演示
### 基础用法
设置 `content` 属性后Badge 会在子元素的右上角显示对应的徽标,也可以通过 `dot` 来显示小红点。
```html
<l-badge :content="5">
<view class="child" />
</l-badge>
<l-badge :content="10">
<view class="child" />
</l-badge>
<l-badge content="Hot">
<view class="child" />
</l-badge>
<l-badge dot>
<view class="child" />
</l-badge>
<style>
.child {
width: 40px;
height: 40px;
background: #f2f3f5;
border-radius: 4px;
}
</style>
```
### 最大值
设置 `max` 属性后,当 `content` 的数值超过最大值时,会自动显示为 `{max}+`
```html
<l-badge :content="20" max="9">
<view class="child" />
</l-badge>
<l-badge :content="50" max="20">
<view class="child" />
</l-badge>
<l-badge :content="200" max="99">
<view class="child" />
</l-badge>
```
### 自定义颜色
通过 `color` 属性来设置徽标的颜色。
```html
<l-badge :content="5" color="#1989fa">
<view class="child" />
</l-badge>
<l-badge :content="10" color="#1989fa">
<view class="child" />
</l-badge>
<l-badge dot color="#1989fa">
<view class="child" />
</l-badge>
```
### 自定义徽标内容
通过 `content` 插槽可以自定义徽标的内容,比如插入一个图标。
```html
<l-badge>
<view class="child" />
<template #content>
你好
</template>
</l-badge>
```
```css
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
```
### 自定义徽标位置
通过 `position` 属性来设置徽标的位置。
```html
<l-badge :content="10" position="top-left">
<view class="child" />
</l-badge>
<l-badge :content="10" position="bottom-left">
<view class="child" />
</l-badge>
<l-badge :content="10" position="bottom-right">
<view class="child" />
</l-badge>
```
### 独立展示
当 Badge 没有子元素时,会作为一个独立的元素进行展示。
```html
<l-badge :content="20" />
<l-badge :content="200" max="99" />
```
### 查看示例
- 导入后直接使用这个标签查看演示效果
```html
<!-- // 代码位于 uni_modules/lime-badge/compoents/lime-badge -->
<lime-badge />
```
### 插件标签
- 默认 l-badge 为 component
- 默认 lime-badge 为 demo
### Vue2使用
- 插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
- 关键代码是: 在main.js中 在vue2部分加上这一段即可
```js
// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 徽标内容 | _number \| string_ | - |
| color | 徽标背景颜色 | _string_ | `#ee0a24` |
| dot | 是否展示为小红点 | _boolean_ | `false` |
| max | 最大值,超过最大值会显示 `{max}+`,仅当 content 为数字时有效 | _number \| string_ | - |
| offset | 设置徽标的偏移量,数组的两项分别对应水平向右和垂直向下方向的偏移量,默认单位为 `px` | _[number \| string, number \| string]_ | - |
| show-zero | 当 content 为数字 0 或字符串 '0' 时,是否展示徽标 | _boolean_ | `true` |
| position | 徽标位置,可选值为 `top-left` `bottom-left` `bottom-right` | _string_ | `top-right` |
### Slots
| 名称 | 说明 |
| ------- | ---------------- |
| default | 徽标包裹的子元素 |
| content | 自定义徽标内容 |
## 主题定制
### 样式变量
组件提供了下列 CSS 变量,可用于自定义样式。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --l-badge-size | _16px_ | - |
| --l-badge-color | _white_ | - |
| --l-badge-padding | _0 3px_ | - |
| --l-badge-font-size | _12px_ | - |
| --l-badge-font-weight | _bold)_ | - |
| --l-badge-border-width | _1px_ | - |
| --l-badge-background | _#F53F3F_ | - |
| --l-badge-dot-color | _#F53F3F_ | - |
| --l-badge-dot-size | _8px_ | - |
| --l-badge-font | _-apple-system-font, Helvetica Neue, Arial, sans-serif_ | - |
| --l-badge-border-radius | _999px_ | - |
## 打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png)
![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png)

View File

@@ -0,0 +1,174 @@
# lime-badge 徽标组件
一个功能丰富的徽标组件,用于展示数字提示、红点提示等。支持自定义位置、颜色、内容等多种配置,可用于消息提醒、数量展示等多种场景。组件提供了丰富的自定义选项,可以满足各种徽标展示需求。
> 插件依赖:`lime-shared`、`lime-style`
## 文档链接
📚 组件详细文档请访问以下站点:
- [徽标组件文档 - 站点1](https://limex.qcoon.cn/components/badge.html)
- [徽标组件文档 - 站点2](https://limeui.netlify.app/components/badge.html)
- [徽标组件文档 - 站点3](https://limeui.familyzone.top/components/badge.html)
## 安装方法
1. 在uni-app插件市场中搜索并导入`lime-badge`
2. 导入后可能需要重新编译项目
3. 在页面中使用`l-badge`组件
## 代码演示
### 基础用法
最简单的徽标组件用法,只需要设置内容即可。
```html
<l-badge content="5">
<view class="box"></view>
</l-badge>
```
### 红点徽标
不需要显示具体数字,只显示一个小红点。
```html
<l-badge dot>
<view class="box"></view>
</l-badge>
```
### 最大值
当数值超过最大值时,会显示为最大值+。
```html
<l-badge content="99" :max="99">
<view class="box"></view>
</l-badge>
```
### 自定义颜色
设置徽标的背景颜色。
```html
<l-badge content="5" color="#1989fa">
<view class="box"></view>
</l-badge>
```
### 自定义位置
徽标支持四个不同的位置:左上角、右上角、左下角、右下角。
```html
<l-badge content="5" position="top-left">
<view class="box"></view>
</l-badge>
<l-badge content="5" position="top-right">
<view class="box"></view>
</l-badge>
<l-badge content="5" position="bottom-left">
<view class="box"></view>
</l-badge>
<l-badge content="5" position="bottom-right">
<view class="box"></view>
</l-badge>
```
### 自定义偏移
通过offset属性设置徽标的偏移量数组的两项分别代表水平和垂直方向的偏移量。
```html
<l-badge content="5" :offset="[10, 10]">
<view class="box"></view>
</l-badge>
```
### 独立展示
徽标可以不依附于其他元素,单独展示。
```html
<l-badge content="5" />
```
### 显示零值
默认情况下当content为0时不会显示徽标设置show-zero属性可以强制显示零值。
```html
<l-badge content="0" show-zero>
<view class="box"></view>
</l-badge>
```
## 快速预览
导入插件后,可以直接使用以下标签查看演示效果:
```html
<!-- 代码位于 uni_modules/lime-badge/components/lime-badge -->
<lime-badge />
```
## 插件标签说明
| 标签名 | 说明 |
| --- | --- |
| `l-badge` | 组件标签 |
| `lime-badge` | 演示标签 |
## Vue2使用说明
main.js中添加以下代码
```js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
```
详细配置请参考官方文档:[Vue Composition API](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)
## API文档
### Props 属性说明
| 属性名 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 徽标内容 | _number \| string_ | - |
| dot | 是否显示为小红点 | _boolean_ | `false` |
| max | 最大值,超过最大值会显示 {max}+ | _number_ | - |
| color | 徽标背景颜色 | _string_ | - |
| offset | 设置徽标的偏移量,数组的两项分别代表水平和垂直方向的偏移量 | _[number \| string, number \| string]_ | - |
| showZero | 当content为0时是否显示徽标 | _boolean_ | `false` |
| position | 徽标位置,可选值为 top-left、top-right、bottom-left、bottom-right | _string_ | `'top-right'` |
### Slots 插槽
| 名称 | 说明 |
| ------- | ---------------- |
| default | 徽标包裹的子元素 |
| content | 自定义徽标内容 |
## 主题定制
组件提供了以下CSS变量可用于自定义样式
| 变量名称 | 默认值 | 描述 |
|---------|--------|------|
| `--l-badge-size` | `16px` | 徽标大小 |
| `--l-badge-color` | `white` | 徽标文字颜色 |
| `--l-badge-padding` | `0 3px` | 徽标内边距 |
| `--l-badge-font-size` | `12px` | 徽标字体大小 |
| `--l-badge-font-weight` | `bold` | 徽标字体粗细 |
| `--l-badge-border-width` | `1px` | 徽标边框宽度 |
| `--l-badge-border-color` | `white` | 徽标边框颜色 |
| `--l-badge-bg-color` | `$error-color` | 徽标背景色 |
| `--l-badge-dot-color` | `$error-color` | 小红点颜色 |
| `--l-badge-dot-size` | `8px` | 小红点大小 |
| `--l-badge-font` | `-apple-system-font, helvetica neue, arial, sans-serif` | 徽标字体 |
| `--l-badge-border-radius` | `999px` | 徽标圆角大小 |
## 支持与赞赏
如果你觉得本插件解决了你的问题,可以考虑支持作者:
| 支付宝赞助 | 微信赞助 |
|------------|------------|
| ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/alipay.png) | ![](https://testingcf.jsdelivr.net/gh/liangei/image@1.9/wpay.png) |