添加bar组件
This commit is contained in:
25
QXTfront/uni_modules/lime-badge/changelog.md
Normal file
25
QXTfront/uni_modules/lime-badge/changelog.md
Normal file
@@ -0,0 +1,25 @@
|
||||
## 0.1.2(2025-08-31)
|
||||
- chore: 更新文档
|
||||
## 0.1.1(2025-05-09)
|
||||
- feat: 组件增加提示
|
||||
- fix: 修复uniapp vue3 type问题
|
||||
## 0.1.0(2025-04-21)
|
||||
- feat: 兼容uniappx 鸿蒙next
|
||||
## 0.0.9(2025-04-05)
|
||||
- fix: 修复opacity书写错误
|
||||
## 0.0.8(2025-04-05)
|
||||
- fix: 修复安卓离屏节点出现的问题
|
||||
## 0.0.7(2025-02-10)
|
||||
- fix: uniappx 安卓 text宽度受限[bug](https://issues.dcloud.net.cn/pages/issues/detail?id=11847)
|
||||
## 0.0.6(2024-12-15)
|
||||
- feat: 兼容uniappx 微信小程序
|
||||
## 0.0.5(2024-10-06)
|
||||
- fix: 修复vue2类型问题
|
||||
## 0.0.4(2024-10-02)
|
||||
- fix: 修复单独使用时位置不对
|
||||
## 0.0.3(2024-10-02)
|
||||
- fix: 修复单独使用时位置不对
|
||||
## 0.0.2(2024-09-24)
|
||||
- feat: 兼容uniappx
|
||||
## 0.0.1(2023-07-17)
|
||||
- 首次上传,可能存在BUG
|
||||
112
QXTfront/uni_modules/lime-badge/components/l-badge/index-u.scss
Normal file
112
QXTfront/uni_modules/lime-badge/components/l-badge/index-u.scss
Normal 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 */
|
||||
}
|
||||
}
|
||||
@@ -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 */
|
||||
}
|
||||
}
|
||||
148
QXTfront/uni_modules/lime-badge/components/l-badge/l-badge.uvue
Normal file
148
QXTfront/uni_modules/lime-badge/components/l-badge/l-badge.uvue
Normal 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>
|
||||
117
QXTfront/uni_modules/lime-badge/components/l-badge/l-badge.vue
Normal file
117
QXTfront/uni_modules/lime-badge/components/l-badge/l-badge.vue
Normal 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>
|
||||
20
QXTfront/uni_modules/lime-badge/components/l-badge/props.ts
Normal file
20
QXTfront/uni_modules/lime-badge/components/l-badge/props.ts
Normal 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'
|
||||
}
|
||||
}
|
||||
50
QXTfront/uni_modules/lime-badge/components/l-badge/type.ts
Normal file
50
QXTfront/uni_modules/lime-badge/components/l-badge/type.ts
Normal 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';
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export function getOffsetWithMinusString(val : string):string {
|
||||
return val.startsWith('-') ? val.replace('-', '') : `-${val}`
|
||||
};
|
||||
@@ -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>
|
||||
107
QXTfront/uni_modules/lime-badge/package.json
Normal file
107
QXTfront/uni_modules/lime-badge/package.json
Normal 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": "√"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
198
QXTfront/uni_modules/lime-badge/readme - 副本.md
Normal file
198
QXTfront/uni_modules/lime-badge/readme - 副本.md
Normal 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_ | - |
|
||||
|
||||
|
||||
## 打赏
|
||||
|
||||
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。
|
||||

|
||||

|
||||
174
QXTfront/uni_modules/lime-badge/readme.md
Normal file
174
QXTfront/uni_modules/lime-badge/readme.md
Normal 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` | 徽标圆角大小 |
|
||||
|
||||
## 支持与赞赏
|
||||
|
||||
如果你觉得本插件解决了你的问题,可以考虑支持作者:
|
||||
|
||||
| 支付宝赞助 | 微信赞助 |
|
||||
|------------|------------|
|
||||
|  |  |
|
||||
Reference in New Issue
Block a user