cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

v1.0

Browse Source
This commit is contained in:
hupeng
2023-10-11 11:27:47 +08:00
commit d0b337c596
659 changed files with 67106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
uni_modules/uv-badge/changelog.md Normal file
View File

@ -0,0 +1,7 @@
## 1.0.2（2023-06-04）
1. 修复type等属性为null的时候不显示徽标的BUG
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-badge 徽标数，数字角标

73
uni_modules/uv-badge/components/uv-badge/props.js Normal file
View File

@ -0,0 +1,73 @@
export default {
props: {
// 是否显示圆点
isDot: {
type: Boolean,
default: false
},
// 显示的内容
value: {
type: [Number, String],
default: ''
},
// 是否显示
show: {
type: Boolean,
default: true
},
// 最大值，超过最大值会显示 '{max}+'
max: {
type: [Number, String],
default: 999
},
// 主题类型，error|warning|success|primary
type: {
type: [String,undefined,null],
default: 'error'
},
// 当数值为 0 时，是否展示 Badge
showZero: {
type: Boolean,
default: false
},
// 背景颜色，优先级比type高，如设置，type参数会失效
bgColor: {
type: [String, null],
default: null
},
// 字体颜色
color: {
type: [String, null],
default: null
},
// 徽标形状，circle-四角均为圆角，horn-左下角为直角
shape: {
type: [String,undefined,null],
default: 'circle'
},
// 设置数字的显示方式，overflow|ellipsis|limit
// overflow会根据max字段判断，超出显示`${max}+`
// ellipsis会根据max判断，超出显示`${max}...`
// limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
numberType: {
type: [String,undefined,null],
default: 'overflow'
},
// 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
offset: {
type: Array,
default: () => []
},
// 是否反转背景和字体颜色
inverted: {
type: Boolean,
default: false
},
// 是否绝对定位
absolute: {
type: Boolean,
default: false
},
...uni.$uv?.props?.badge
}
}

176
uni_modules/uv-badge/components/uv-badge/uv-badge.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<text
v-if="show && ((Number(value) === 0 ? showZero : true) || isDot)"
:class="[isDot ? 'uv-badge--dot' : 'uv-badge--not-dot', inverted && 'uv-badge--inverted', shape === 'horn' && 'uv-badge--horn', `uv-badge--${propsType}${inverted ? '--inverted' : ''}`]"
:style="[$uv.addStyle(customStyle), badgeStyle]"
class="uv-badge"
>{{ isDot ? '' :showValue }}</text>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* badge 徽标数
* @description 该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
* @tutorial https://www.uvui.cn/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 <uv-badge :type="type" :count="count"></uv-badge>
*/
export default {
name: 'uv-badge',
mixins: [mpMixin, mixin, props],
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 = this.$uv.addUnit(top)
style.right = this.$uv.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)
}
},
propsType(){
return this.type || 'error'
}
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-badge-primary: $uv-primary !default;
$uv-badge-error: $uv-error !default;
$uv-badge-success: $uv-success !default;
$uv-badge-info: $uv-info !default;
$uv-badge-warning: $uv-warning !default;
$uv-badge-dot-radius: 100px !default;
$uv-badge-dot-size: 8px !default;
$uv-badge-dot-right: 4px !default;
$uv-badge-dot-top: 0 !default;
$uv-badge-text-font-size: 11px !default;
$uv-badge-text-right: 10px !default;
$uv-badge-text-padding: 2px 5px !default;
$uv-badge-text-align: center !default;
$uv-badge-text-color: #FFFFFF !default;
.uv-badge {
border-top-right-radius: $uv-badge-dot-radius;
border-top-left-radius: $uv-badge-dot-radius;
border-bottom-left-radius: $uv-badge-dot-radius;
border-bottom-right-radius: $uv-badge-dot-radius;
@include flex;
line-height: $uv-badge-text-font-size;
text-align: $uv-badge-text-align;
font-size: $uv-badge-text-font-size;
color: $uv-badge-text-color;
&--dot {
height: $uv-badge-dot-size;
width: $uv-badge-dot-size;
}
&--inverted {
font-size: 13px;
}
&--not-dot {
padding: $uv-badge-text-padding;
}
&--horn {
border-bottom-left-radius: 0;
}
&--primary {
background-color: $uv-badge-primary;
}
&--primary--inverted {
color: $uv-badge-primary;
}
&--error {
background-color: $uv-badge-error;
}
&--error--inverted {
color: $uv-badge-error;
}
&--success {
background-color: $uv-badge-success;
}
&--success--inverted {
color: $uv-badge-success;
}
&--info {
background-color: $uv-badge-info;
}
&--info--inverted {
color: $uv-badge-info;
}
&--warning {
background-color: $uv-badge-warning;
}
&--warning--inverted {
color: $uv-badge-warning;
}
}
</style>

87
uni_modules/uv-badge/package.json Normal file
View File

@ -0,0 +1,87 @@
{
"id": "uv-badge",
"displayName": "uv-badge 徽标数，数字角标 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.2",
"description": "徽标数一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。",
"keywords": [
"uv-badge",
"uvui",
"uv-ui",
"徽标数",
"数字角标"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

11
uni_modules/uv-badge/readme.md Normal file
View File

@ -0,0 +1,11 @@
## Badge 徽标数
> **组件名：uv-badge**
该组件一般用于图标右上角显示未读的消息数量，提示用户点击，有圆点和圆包含文字两种形式。
### <a href="https://www.uvui.cn/components/badge.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>