From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 20 Oct 2023 15:21:35 +0800 Subject: [PATCH] fix:立行立改Uniapp小程序新建项目 --- uni_modules/uview-ui/components/u-badge/u-badge.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 171 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-badge/u-badge.vue b/uni_modules/uview-ui/components/u-badge/u-badge.vue new file mode 100644 index 0000000..53cfc81 --- /dev/null +++ b/uni_modules/uview-ui/components/u-badge/u-badge.vue @@ -0,0 +1,171 @@ +<template> + <text + v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)" + :class="[isDot ? 'u-badge--dot' : 'u-badge--not-dot', inverted && 'u-badge--inverted', shape === 'horn' && 'u-badge--horn', `u-badge--${type}${inverted ? '--inverted' : ''}`]" + :style="[$u.addStyle(customStyle), badgeStyle]" + class="u-badge" + >{{ isDot ? '' :showValue }}</text> +</template> + +<script> + import props from './props.js'; + /** + * badge ��������� + * @description ��������������������������������������������������������������������������������������������������������������������������������� + * @tutorial https://uviewui.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 <u-badge :type="type" :count="count"></u-badge> + */ + export default { + name: 'u-badge', + mixins: [uni.$u.mpMixin, props, uni.$u.mixin], + computed: { + // ���������badge��������������������������������� + boxStyle() { + let style = {}; + return style; + }, + // ��������������������� + badgeStyle() { + const style = {} + if(this.color) { + style.color = this.color + } + if (this.bgColor && !this.inverted) { + style.backgroundColor = this.bgColor + } + if (this.absolute) { + style.position = 'absolute' + // ���������������offset������ + if(this.offset.length) { + // top���right���������offset������������������������������������������������������������right������top + const top = this.offset[0] + const right = this.offset[1] || top + style.top = uni.$u.addUnit(top) + style.right = uni.$u.addUnit(right) + } + } + return style + }, + showValue() { + switch (this.numberType) { + case "overflow": + return Number(this.value) > Number(this.max) ? this.max + "+" : this.value + break; + case "ellipsis": + return Number(this.value) > Number(this.max) ? "..." : this.value + break; + case "limit": + return Number(this.value) > 999 ? Number(this.value) >= 9999 ? + Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value / + 1e3 * 100) / 100 + "k" : this.value + break; + default: + return Number(this.value) + } + }, + } + } +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + $u-badge-primary: $u-primary !default; + $u-badge-error: $u-error !default; + $u-badge-success: $u-success !default; + $u-badge-info: $u-info !default; + $u-badge-warning: $u-warning !default; + $u-badge-dot-radius: 100px !default; + $u-badge-dot-size: 8px !default; + $u-badge-dot-right: 4px !default; + $u-badge-dot-top: 0 !default; + $u-badge-text-font-size: 11px !default; + $u-badge-text-right: 10px !default; + $u-badge-text-padding: 2px 5px !default; + $u-badge-text-align: center !default; + $u-badge-text-color: #FFFFFF !default; + + .u-badge { + border-top-right-radius: $u-badge-dot-radius; + border-top-left-radius: $u-badge-dot-radius; + border-bottom-left-radius: $u-badge-dot-radius; + border-bottom-right-radius: $u-badge-dot-radius; + @include flex; + line-height: $u-badge-text-font-size; + text-align: $u-badge-text-align; + font-size: $u-badge-text-font-size; + color: $u-badge-text-color; + + &--dot { + height: $u-badge-dot-size; + width: $u-badge-dot-size; + } + + &--inverted { + font-size: 13px; + } + + &--not-dot { + padding: $u-badge-text-padding; + } + + &--horn { + border-bottom-left-radius: 0; + } + + &--primary { + background-color: $u-badge-primary; + } + + &--primary--inverted { + color: $u-badge-primary; + } + + &--error { + background-color: $u-badge-error; + } + + &--error--inverted { + color: $u-badge-error; + } + + &--success { + background-color: $u-badge-success; + } + + &--success--inverted { + color: $u-badge-success; + } + + &--info { + background-color: $u-badge-info; + } + + &--info--inverted { + color: $u-badge-info; + } + + &--warning { + background-color: $u-badge-warning; + } + + &--warning--inverted { + color: $u-badge-warning; + } + } +</style> -- Gitblit v1.8.0