135 lines
3.2 KiB
Vue
135 lines
3.2 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
:style="tools._style([customStyle])"
|
|||
|
|
:class="classPrefix + ' ' + (useOuterClass ? classPrefix + '__' + shape + '-outer' : '') + tClass"
|
|||
|
|
:aria-labelledby="labelID"
|
|||
|
|
:aria-describedby="descriptionID"
|
|||
|
|
:aria-role="ariaRole || 'option'"
|
|||
|
|
>
|
|||
|
|
<view
|
|||
|
|
:id="labelID"
|
|||
|
|
:class="tools.cls(classPrefix + '__content', [['empty', !content && !hasChild]]) + ' ' + tClassContent"
|
|||
|
|
:aria-hidden="true"
|
|||
|
|
>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
|
|||
|
|
<slot
|
|||
|
|
v-if="!content"
|
|||
|
|
:class="classPrefix + '__content-slot'"
|
|||
|
|
/>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
|
|||
|
|
<!-- 小程序下在 slot 下加 :class 属性，会导致渲染失败 -->
|
|||
|
|
<!-- #ifndef H5 -->
|
|||
|
|
<slot
|
|||
|
|
v-if="!content"
|
|||
|
|
/>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
|
|||
|
|
<text
|
|||
|
|
v-else
|
|||
|
|
:class="classPrefix + '__content-text'"
|
|||
|
|
>
|
|||
|
|
{{ content }}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
v-if="isShowBadge({ dot, count, showZero }) || count === null"
|
|||
|
|
:id="descriptionID"
|
|||
|
|
:aria-hidden="true"
|
|||
|
|
:aria-label="ariaLabel || tools.getBadgeAriaLabel({ dot, count, maxCount })"
|
|||
|
|
:class="[
|
|||
|
|
getBadgeInnerClass({ classPrefix, dot, size, shape, count }) + ' ' + prefix + '-has-count ',
|
|||
|
|
tClassCount
|
|||
|
|
]"
|
|||
|
|
:style="tools._style([getBadgeStyles({ color, offset })])"
|
|||
|
|
>
|
|||
|
|
<view :class="classPrefix + '__count'">
|
|||
|
|
<template v-if="isShowBadge({ dot, count, showZero })">
|
|||
|
|
{{ getBadgeValue({ dot, count, maxCount }) }}
|
|||
|
|
</template>
|
|||
|
|
<slot
|
|||
|
|
else
|
|||
|
|
name="count"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { uniComponent } from '../common/src/index';
|
|||
|
|
import { prefix } from '../common/config';
|
|||
|
|
import props from './props';
|
|||
|
|
import { uniqueFactory, getRect } from '../common/utils';
|
|||
|
|
import tools from '../common/utils.wxs';
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
getBadgeValue,
|
|||
|
|
getBadgeStyles,
|
|||
|
|
getBadgeInnerClass,
|
|||
|
|
isShowBadge,
|
|||
|
|
} from './computed.js';
|
|||
|
|
|
|||
|
|
|
|||
|
|
const name = `${prefix}-badge`;
|
|||
|
|
const getUniqueID = uniqueFactory('badge');
|
|||
|
|
|
|||
|
|
|
|||
|
|
export default uniComponent({
|
|||
|
|
name,
|
|||
|
|
options: {
|
|||
|
|
styleIsolation: 'shared',
|
|||
|
|
},
|
|||
|
|
externalClasses: [
|
|||
|
|
`${prefix}-class`,
|
|||
|
|
`${prefix}-class-count`,
|
|||
|
|
`${prefix}-class-content`,
|
|||
|
|
],
|
|||
|
|
props: {
|
|||
|
|
...props,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
prefix,
|
|||
|
|
classPrefix: name,
|
|||
|
|
value: '',
|
|||
|
|
labelID: '',
|
|||
|
|
descriptionID: '',
|
|||
|
|
tools,
|
|||
|
|
useOuterClass: false,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
hasChild() {
|
|||
|
|
return !!this.$slots?.default;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
const e = getUniqueID();
|
|||
|
|
this.labelID = `${e}_label`;
|
|||
|
|
this.descriptionID = `${e}_description`;
|
|||
|
|
this.checkForActualContent();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getBadgeValue,
|
|||
|
|
getBadgeStyles,
|
|||
|
|
getBadgeInnerClass,
|
|||
|
|
isShowBadge,
|
|||
|
|
checkForActualContent() {
|
|||
|
|
const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
|
|||
|
|
if (this.content || !target.includes(this.shape)) {
|
|||
|
|
this.useOuterClass = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
return getRect(this, `.${name}__content`).then((rect) => {
|
|||
|
|
const hasSlotContent = rect.width > 0 || rect.height > 0;
|
|||
|
|
this.useOuterClass = !hasSlotContent;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style scoped>
|
|||
|
|
@import './badge.css';
|
|||
|
|
</style>
|