更新:登录功能
This commit is contained in:
61
uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
Normal file
61
uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<view :class="['wd-badge', customClass]" :style="customStyle">
|
||||
<slot></slot>
|
||||
<view
|
||||
v-if="shouldShowBadge"
|
||||
:class="['wd-badge__content', 'is-fixed', type ? 'wd-badge__content--' + type : '', isDot ? 'is-dot' : '']"
|
||||
:style="contentStyle"
|
||||
>
|
||||
{{ content }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-badge',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { computed, type CSSProperties } from 'vue'
|
||||
import { badgeProps } from './types'
|
||||
import { addUnit, isDef, isNumber, objToStyle } from '../common/util'
|
||||
|
||||
const props = defineProps(badgeProps)
|
||||
const content = computed(() => {
|
||||
const { modelValue, max, isDot } = props
|
||||
if (isDot) return ''
|
||||
let value = modelValue
|
||||
if (value && max && isNumber(value) && !Number.isNaN(value) && !Number.isNaN(max)) {
|
||||
value = max < value ? `${max}+` : value
|
||||
}
|
||||
return value
|
||||
})
|
||||
|
||||
const contentStyle = computed(() => {
|
||||
const style: CSSProperties = {}
|
||||
if (isDef(props.bgColor)) {
|
||||
style.backgroundColor = props.bgColor
|
||||
}
|
||||
|
||||
if (isDef(props.top)) {
|
||||
style.top = addUnit(props.top)
|
||||
}
|
||||
|
||||
if (isDef(props.right)) {
|
||||
style.right = addUnit(props.right)
|
||||
}
|
||||
return objToStyle(style)
|
||||
})
|
||||
|
||||
// 是否展示徽标数字
|
||||
const shouldShowBadge = computed(() => !props.hidden && (content.value || (content.value === 0 && props.showZero) || props.isDot))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user