Skip to content

Commit

Permalink
feat: up-badge组件支持uni-app-x
Browse files Browse the repository at this point in the history
  • Loading branch information
jry committed Aug 28, 2024
1 parent 81ced03 commit 9cf6498
Show file tree
Hide file tree
Showing 7 changed files with 318 additions and 11 deletions.
27 changes: 27 additions & 0 deletions src/uni_modules/uview-plus/components/up-badge/badge.uts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* @Author : LQ,jry
* @Description :
* @version : 3.0
* @Date : 2021-08-20 16:44:21
* @LastAuthor : jry
* @lastTime : 2024-08-20 14:20:58
* @FilePath : /uview-plus/libs/config/props/badge.js
*/
export default {
// 徽标数组件
badge: {
isDot: false,
value: '',
show: true,
max: 999,
type: 'error',
showZero: false,
bgColor: '',
color: '',
shape: 'circle',
numberType: 'overflow',
offset: [] as number[],
inverted: false,
absolute: false
}
} as UTSJSONObject
81 changes: 81 additions & 0 deletions src/uni_modules/uview-plus/components/up-badge/props.uts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { defineMixin } from '../../libs/vue'
import defProps from './badge'
let crtProp = defProps['badge'] as UTSJSONObject

export const propsBadge = defineMixin({
props: {
// 是否显示圆点
isDot: {
type: Boolean,
default: crtProp['isDot']
},
// 显示的内容
value: {
type: [Number, String],
default: crtProp['value']
},
// 显示的内容
modelValue: {
type: [Number, String],
default: crtProp['modelValue']
},
// 是否显示
show: {
type: Boolean,
default: crtProp['show']
},
// 最大值，超过最大值会显示 '{max}+'
max: {
type: [Number, String],
default: crtProp['max']
},
// 主题类型，error|warning|success|primary
type: {
type: String,
default: crtProp['type']
},
// 当数值为 0 时，是否展示 Badge
showZero: {
type: Boolean,
default: crtProp['showZero']
},
// 背景颜色，优先级比type高，如设置，type参数会失效
bgColor: {
type: [String],
default: crtProp['bgColor']
},
// 字体颜色
color: {
type: [String],
default: crtProp['color']
},
// 徽标形状，circle-四角均为圆角，horn-左下角为直角
shape: {
type: String,
default: crtProp['shape']
},
// 设置数字的显示方式，overflow|ellipsis|limit
// overflow会根据max字段判断，超出显示`${max}+`
// ellipsis会根据max判断，超出显示`${max}...`
// limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
numberType: {
type: String,
default: crtProp['numberType']
},
// 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
offset: {
type: Array,
default: crtProp['offset']
},
// 是否反转背景和字体颜色
inverted: {
type: Boolean,
default: crtProp['inverted']
},
// 是否绝对定位
absolute: {
type: Boolean,
default: crtProp['absolute']
}
}
})
190 changes: 190 additions & 0 deletions src/uni_modules/uview-plus/components/up-badge/up-badge.uvue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<template>
<text class="up-badge"
v-if="show && ((parseInt(value.toString()) === 0 ? showZero : true) || isDot)"
:class="[isDot ? 'up-badge--dot' : 'up-badge--not-dot',
inverted ? 'up-badge--inverted' : '',
shape === 'horn' ? 'up-badge--horn' : '',
inverted ? `up-badge--${type}--inverted` : `up-badge--${type}`]"
:style="[addStyle(customStyle), badgeStyle]"
>{{ isDot ? '' : showValue }}</text>
</template>

<script>
import { propsBadge } from './props';
import { mpMixin } from '../../libs/mixin/mpMixin';
import { mixin } from '../../libs/mixin/mixin';
import { addStyle, addUnit } from '../../libs/function/index';
/**
* badge 徽标数
* @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
* @tutorial https://uview-plus.jiangruyi.com/components/badge.html
*
* @property {Boolean} isDot 是否显示圆点 （默认 false ）
* @property {String | Number} value 显示的内容
* @property {Boolean} show 是否显示 （默认 true ）
* @property {String | Number} max 最大值，超过最大值会显示 '{max}+' （默认999）
* @property {String} type 主题类型，error|warning|success|primary （默认 'error' ）
* @property {Boolean} showZero 当数值为 0 时，是否展示 Badge （默认 false ）
* @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
* @property {String} color 字体颜色 （默认 '#ffffff' ）
* @property {String} shape 徽标形状，circle-四角均为圆角，horn-左下角为直角 （默认 'circle' ）
* @property {String} numberType 设置数字的显示方式，overflow|ellipsis|limit （默认 'overflow' ）
* @property {Array}} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
* @property {Boolean} inverted 是否反转背景和字体颜色（默认 false ）
* @property {Boolean} absolute 是否绝对定位（默认 false ）
* @property {Object} customStyle 定义需要用到的外部样式
* @example <up-badge :type="type" :count="count"></up-badge>
*/
export default {
name: 'up-badge',
mixins: [mpMixin, mixin, propsBadge],
computed: {
// 是否将badge中心与父组件右上角重合
boxStyle(): any {
let style = {};
return style;
},
// 整个组件的样式
badgeStyle(): any {
const style = {}
if(this.color != '') {
style['color'] = this.color
}
if (this.bgColor != '' && !this.inverted) {
style['backgroundColor'] = this.bgColor
}
if (this.absolute) {
style['position'] = 'absolute'
let offsetArray:number[] = this.offset as number[]
// 如果有设置offset参数
if(offsetArray.length > 0) {
// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
const top = offsetArray[0]
style['top'] = addUnit(top)
if (offsetArray.length == 2) {
style['right'] = addUnit(offsetArray[1])
} else {
style['right'] = addUnit(top)
}
}
}
return style
},
showValue(): string {
let valueReturn = ''
switch (this.numberType.toString()) {
case "overflow":
valueReturn = parseInt(this.value.toString()) > parseInt(this.max.toString()) ? this.max.toString() + "+" : this.value.toString()
break;
case "ellipsis":
valueReturn = parseInt(this.value.toString()) > parseInt(this.max.toString()) ? "..." : this.value.toString()
break;
case "limit":
valueReturn = parseInt(this.value.toString()) > 999
?
parseInt(this.value.toString()) >= 9999 ?
(Math.floor(parseInt(this.value.toString()) / 1e4 * 100) / 100).toString() + "w"
: (Math.floor(parseInt(this.value.toString()) / 1e3 * 100) / 100).toString() + "k"
: this.value.toString()
break;
default:
valueReturn = this.value.toString()
}
return valueReturn
},
},
methods: {
addStyle(str: any): any {
return addStyle(str)
}
}
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

$up-badge-primary: $up-primary !default;
$up-badge-error: $up-error !default;
$up-badge-success: $up-success !default;
$up-badge-info: $up-info !default;
$up-badge-warning: $up-warning !default;
$up-badge-dot-radius: 100px !default;
$up-badge-dot-size: 8px !default;
$up-badge-dot-right: 4px !default;
$up-badge-dot-top: 0 !default;
$up-badge-text-font-size: 11px !default;
$up-badge-text-right: 10px !default;
$up-badge-text-padding: 2px 5px !default;
$up-badge-text-align: center !default;
$up-badge-text-color: #FFFFFF !default;

.up-badge {
border-top-right-radius: $up-badge-dot-radius;
border-top-left-radius: $up-badge-dot-radius;
border-bottom-left-radius: $up-badge-dot-radius;
border-bottom-right-radius: $up-badge-dot-radius;
@include flex;
line-height: $up-badge-text-font-size;
text-align: $up-badge-text-align;
font-size: $up-badge-text-font-size;
color: $up-badge-text-color;

&--dot {
height: $up-badge-dot-size;
width: $up-badge-dot-size;
}

&--inverted {
font-size: 13px;
}

&--not-dot {
padding: $up-badge-text-padding;
}

&--horn {
border-bottom-left-radius: 0;
}

&--primary {
background-color: $up-badge-primary;
}

&--primary--inverted {
color: $up-badge-primary;
}

&--error {
background-color: $up-badge-error;
}

&--error--inverted {
color: $up-badge-error;
}

&--success {
background-color: $up-badge-success;
}

&--success--inverted {
color: $up-badge-success;
}

&--info {
background-color: $up-badge-info;
}

&--info--inverted {
color: $up-badge-info;
}

&--warning {
background-color: $up-badge-warning;
}

&--warning--inverted {
color: $up-badge-warning;
}
}
</style>
10 changes: 6 additions & 4 deletions src/uni_modules/uview-plus/components/up-badge/up-badge.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<template>
<text
<text class="up-badge"
v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
:class="[isDot ? 'up-badge--dot' : 'up-badge--not-dot', inverted && 'up-badge--inverted', shape === 'horn' && 'up-badge--horn', `up-badge--${type}${inverted ? '--inverted' : ''}`]"
:class="[isDot ? 'up-badge--dot' : 'up-badge--not-dot',
inverted && 'up-badge--inverted',
shape === 'horn' && 'up-badge--horn',
inverted ? `up-badge--${type}--inverted` : `up-badge--${type}`]"
:style="[addStyle(customStyle), badgeStyle]"
class="up-badge"
>{{ isDot ? '' :showValue }}</text>
</template>

Expand Down Expand Up @@ -115,7 +117,7 @@
line-height: $up-badge-text-font-size;
text-align: $up-badge-text-align;
font-size: $up-badge-text-font-size;
color: $up-badge-text-color;
// color: $up-badge-text-color;
&--dot {
height: $up-badge-dot-size;
Expand Down
2 changes: 1 addition & 1 deletion src/uni_modules/uview-plus/libs/function/test.uts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ export function func(value: any): boolean {
* @param {Object} value
*/
export function promise(value: any): boolean {
return value instanceof Promise<T>
return value instanceof Promise
// return object(value) && func(value.then) && func(value.catch)
}

Expand Down
13 changes: 7 additions & 6 deletions uni-app-x/pages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,12 +231,13 @@
// "style": {
// "navigationBarTitleText": "搜索"
// }
// }, {
// "path": "badge/badge",
// "style": {
// "navigationBarTitleText": "徽标数"
// }
// }
// }
, {
"path": "badge/badge",
"style": {
"navigationBarTitleText": "徽标数"
}
}
,{
"path": "tag/tag",
"style": {
Expand Down
6 changes: 6 additions & 0 deletions uni-app-x/pages/componentsB/badge/badge.nvue → uni-app-x/pages/componentsB/badge/badge.uvue
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">直角边形状</text>
Expand Down Expand Up @@ -125,6 +128,9 @@
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>

<script>
Expand Down

0 comments on commit 9cf6498

Please sign in to comment.