yshop意向点餐系统v1.2.2
This commit is contained in:
hupeng committed
1 parent
d03982bf66
commit
fc575265c3
4685 files changed
+518513
-182051
No files matched your search
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user