first commit
This commit is contained in:
lingxiao865
129
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.js
vendored
Normal file
129
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.js
vendored
Normal file
@@ -0,0 +1,129 @@
|
||||
"use strict";
|
||||
const uni_modules_tdesignUniapp_components_common_src_instantiationDecorator = require("../common/src/instantiationDecorator.js");
|
||||
const uni_modules_tdesignUniapp_components_common_config = require("../common/config.js");
|
||||
const uni_modules_tdesignUniapp_components_badge_props = require("./props.js");
|
||||
const uni_modules_tdesignUniapp_components_common_utils = require("../common/utils.js");
|
||||
const uni_modules_tdesignUniapp_components_common_utils_wxs = require("../common/utils.wxs.js");
|
||||
const uni_modules_tdesignUniapp_components_badge_computed = require("./computed.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const name = `${uni_modules_tdesignUniapp_components_common_config.prefix}-badge`;
|
||||
const getUniqueID = uni_modules_tdesignUniapp_components_common_utils.uniqueFactory("badge");
|
||||
const _sfc_main = uni_modules_tdesignUniapp_components_common_src_instantiationDecorator.uniComponent({
|
||||
name,
|
||||
options: {
|
||||
styleIsolation: "shared"
|
||||
},
|
||||
externalClasses: [
|
||||
`${uni_modules_tdesignUniapp_components_common_config.prefix}-class`,
|
||||
`${uni_modules_tdesignUniapp_components_common_config.prefix}-class-count`,
|
||||
`${uni_modules_tdesignUniapp_components_common_config.prefix}-class-content`
|
||||
],
|
||||
props: {
|
||||
...uni_modules_tdesignUniapp_components_badge_props.props
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix: uni_modules_tdesignUniapp_components_common_config.prefix,
|
||||
classPrefix: name,
|
||||
value: "",
|
||||
labelID: "",
|
||||
descriptionID: "",
|
||||
tools: uni_modules_tdesignUniapp_components_common_utils_wxs.tools,
|
||||
useOuterClass: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hasChild() {
|
||||
var _a;
|
||||
return !!((_a = this.$slots) == null ? void 0 : _a.default);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const e = getUniqueID();
|
||||
this.labelID = `${e}_label`;
|
||||
this.descriptionID = `${e}_description`;
|
||||
this.checkForActualContent();
|
||||
},
|
||||
methods: {
|
||||
getBadgeValue: uni_modules_tdesignUniapp_components_badge_computed.getBadgeValue,
|
||||
getBadgeStyles: uni_modules_tdesignUniapp_components_badge_computed.getBadgeStyles,
|
||||
getBadgeInnerClass: uni_modules_tdesignUniapp_components_badge_computed.getBadgeInnerClass,
|
||||
isShowBadge: uni_modules_tdesignUniapp_components_badge_computed.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 uni_modules_tdesignUniapp_components_common_utils.getRect(this, `.${name}__content`).then((rect) => {
|
||||
const hasSlotContent = rect.width > 0 || rect.height > 0;
|
||||
this.useOuterClass = !hasSlotContent;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: !_ctx.content
|
||||
}, !_ctx.content ? {} : {
|
||||
b: common_vendor.t(_ctx.content),
|
||||
c: common_vendor.n(_ctx.classPrefix + "__content-text")
|
||||
}, {
|
||||
d: _ctx.labelID,
|
||||
e: common_vendor.n(_ctx.tools.cls(_ctx.classPrefix + "__content", [["empty", !_ctx.content && !_ctx.hasChild]]) + " " + _ctx.tClassContent),
|
||||
f: _ctx.isShowBadge({
|
||||
dot: _ctx.dot,
|
||||
count: _ctx.count,
|
||||
showZero: _ctx.showZero
|
||||
}) || _ctx.count === null
|
||||
}, _ctx.isShowBadge({
|
||||
dot: _ctx.dot,
|
||||
count: _ctx.count,
|
||||
showZero: _ctx.showZero
|
||||
}) || _ctx.count === null ? common_vendor.e({
|
||||
g: _ctx.isShowBadge({
|
||||
dot: _ctx.dot,
|
||||
count: _ctx.count,
|
||||
showZero: _ctx.showZero
|
||||
})
|
||||
}, _ctx.isShowBadge({
|
||||
dot: _ctx.dot,
|
||||
count: _ctx.count,
|
||||
showZero: _ctx.showZero
|
||||
}) ? {
|
||||
h: common_vendor.t(_ctx.getBadgeValue({
|
||||
dot: _ctx.dot,
|
||||
count: _ctx.count,
|
||||
maxCount: _ctx.maxCount
|
||||
}))
|
||||
} : {}, {
|
||||
i: common_vendor.n(_ctx.classPrefix + "__count"),
|
||||
j: _ctx.descriptionID,
|
||||
k: _ctx.ariaLabel || _ctx.tools.getBadgeAriaLabel({
|
||||
dot: _ctx.dot,
|
||||
count: _ctx.count,
|
||||
maxCount: _ctx.maxCount
|
||||
}),
|
||||
l: common_vendor.n(_ctx.getBadgeInnerClass({
|
||||
classPrefix: _ctx.classPrefix,
|
||||
dot: _ctx.dot,
|
||||
size: _ctx.size,
|
||||
shape: _ctx.shape,
|
||||
count: _ctx.count
|
||||
}) + " " + _ctx.prefix + "-has-count "),
|
||||
m: common_vendor.n(_ctx.tClassCount),
|
||||
n: common_vendor.s(_ctx.tools._style([_ctx.getBadgeStyles({
|
||||
color: _ctx.color,
|
||||
offset: _ctx.offset
|
||||
})]))
|
||||
}) : {}, {
|
||||
o: common_vendor.s(_ctx.tools._style([_ctx.customStyle])),
|
||||
p: common_vendor.n(_ctx.classPrefix + " " + (_ctx.useOuterClass ? _ctx.classPrefix + "__" + _ctx.shape + "-outer" : "") + _ctx.tClass),
|
||||
q: _ctx.labelID,
|
||||
r: _ctx.descriptionID,
|
||||
s: _ctx.ariaRole || "option"
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3b9e0753"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.js.map
|
||||
4
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.json
vendored
Normal file
4
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view style="{{o}}" class="{{['data-v-3b9e0753', p]}}" aria-labelledby="{{q}}" aria-describedby="{{r}}" aria-role="{{s}}"><view id="{{d}}" class="{{['data-v-3b9e0753', e]}}" aria-hidden="{{true}}"><slot wx:if="{{a}}"/><text wx:else class="{{['data-v-3b9e0753', c]}}">{{b}}</text></view><view wx:if="{{f}}" id="{{j}}" aria-hidden="{{true}}" aria-label="{{k}}" class="{{['data-v-3b9e0753', l, m]}}" style="{{n}}"><view class="{{['data-v-3b9e0753', i]}}"><block wx:if="{{g}}">{{h}}</block><slot name="count"/></view></view></view>
|
||||
140
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.wxss
vendored
Normal file
140
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/badge.wxss
vendored
Normal file
@@ -0,0 +1,140 @@
|
||||
.t-badge.data-v-3b9e0753 {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: start;
|
||||
}
|
||||
.t-badge--basic.data-v-3b9e0753 {
|
||||
z-index: 100;
|
||||
padding: 0 var(--td-badge-basic-padding, 8rpx);
|
||||
font: var(--td-badge-font, var(--td-font-mark-extraSmall, 600 20rpx / 32rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
color: var(--td-badge-text-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
||||
background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
text-align: center;
|
||||
height: var(--td-badge-basic-height, 32rpx);
|
||||
border-radius: var(--td-badge-border-radius, 4rpx);
|
||||
}
|
||||
.t-badge--dot.data-v-3b9e0753 {
|
||||
height: var(--td-badge-dot-size, 16rpx);
|
||||
border-radius: 50%;
|
||||
min-width: var(--td-badge-dot-size, 16rpx);
|
||||
padding: 0;
|
||||
}
|
||||
.t-badge--count.data-v-3b9e0753 {
|
||||
min-width: var(--td-badge-basic-width, 32rpx);
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.t-badge--circle.data-v-3b9e0753 {
|
||||
border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2);
|
||||
}
|
||||
.t-badge__ribbon-outer.data-v-3b9e0753,
|
||||
.t-badge__ribbon-right-outer.data-v-3b9e0753,
|
||||
.t-badge__triangle-right-outer.data-v-3b9e0753,
|
||||
.t-badge__ribbon-left-outer.data-v-3b9e0753,
|
||||
.t-badge__triangle-left-outer.data-v-3b9e0753 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.t-badge__ribbon-outer.data-v-3b9e0753,
|
||||
.t-badge__ribbon-right-outer.data-v-3b9e0753,
|
||||
.t-badge__triangle-right-outer.data-v-3b9e0753 {
|
||||
right: 0;
|
||||
}
|
||||
.t-badge__ribbon-left-outer.data-v-3b9e0753,
|
||||
.t-badge__triangle-left-outer.data-v-3b9e0753 {
|
||||
left: 0;
|
||||
}
|
||||
.t-badge--bubble.data-v-3b9e0753 {
|
||||
border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
|
||||
}
|
||||
.t-badge--ribbon.data-v-3b9e0753,
|
||||
.t-badge--ribbon-right.data-v-3b9e0753,
|
||||
.t-badge--ribbon-left.data-v-3b9e0753,
|
||||
.t-badge--triangle-left.data-v-3b9e0753,
|
||||
.t-badge--triangle-right.data-v-3b9e0753 {
|
||||
width: calc(var(--td-badge-basic-height, 32rpx) * 2);
|
||||
height: calc(var(--td-badge-basic-height, 32rpx) * 2);
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-badge--ribbon.data-v-3b9e0753,
|
||||
.t-badge--ribbon-right.data-v-3b9e0753 {
|
||||
background: linear-gradient(45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 85%, transparent 85%);
|
||||
}
|
||||
.t-badge--triangle-right.data-v-3b9e0753 {
|
||||
background: linear-gradient(45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%);
|
||||
}
|
||||
.t-badge--ribbon.data-v-3b9e0753,
|
||||
.t-badge--ribbon-right.data-v-3b9e0753,
|
||||
.t-badge--triangle-right.data-v-3b9e0753 {
|
||||
right: 0;
|
||||
}
|
||||
.t-badge--ribbon .t-badge__count.data-v-3b9e0753,
|
||||
.t-badge--ribbon-right .t-badge__count.data-v-3b9e0753,
|
||||
.t-badge--triangle-right .t-badge__count.data-v-3b9e0753 {
|
||||
transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
|
||||
}
|
||||
.t-badge--ribbon-left.data-v-3b9e0753 {
|
||||
background: linear-gradient(-45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 85%, transparent 85%);
|
||||
}
|
||||
.t-badge--triangle-left.data-v-3b9e0753 {
|
||||
background: linear-gradient(-45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%);
|
||||
}
|
||||
.t-badge--ribbon-left.data-v-3b9e0753,
|
||||
.t-badge--triangle-left.data-v-3b9e0753 {
|
||||
left: 0;
|
||||
}
|
||||
.t-badge--ribbon-left .t-badge__count.data-v-3b9e0753,
|
||||
.t-badge--triangle-left .t-badge__count.data-v-3b9e0753 {
|
||||
transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
|
||||
}
|
||||
.t-badge--large.data-v-3b9e0753 {
|
||||
font: var(--td-badge-large-font, var(--td-font-mark-small, 600 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
height: var(--td-badge-large-height, 40rpx);
|
||||
min-width: var(--td-badge-large-height, 40rpx);
|
||||
padding: 0 var(--td-badge-large-padding, 10rpx);
|
||||
}
|
||||
.t-badge--large.t-badge--circle.data-v-3b9e0753 {
|
||||
border-radius: calc(var(--td-badge-large-height, 40rpx) / 2);
|
||||
}
|
||||
.t-badge--large.t-badge--ribbon.data-v-3b9e0753,
|
||||
.t-badge--large.t-badge--ribbon-right.data-v-3b9e0753,
|
||||
.t-badge--large.t-badge--ribbon-left.data-v-3b9e0753,
|
||||
.t-badge--large.t-badge--triangle-right.data-v-3b9e0753,
|
||||
.t-badge--large.t-badge--triangle-left.data-v-3b9e0753 {
|
||||
width: calc(var(--td-badge-large-height, 40rpx) * 2);
|
||||
height: calc(var(--td-badge-large-height, 40rpx) * 2);
|
||||
padding: 0;
|
||||
}
|
||||
.t-badge--large.t-badge--ribbon .t-badge__count.data-v-3b9e0753,
|
||||
.t-badge--large.t-badge--ribbon-right .t-badge__count.data-v-3b9e0753,
|
||||
.t-badge--large.t-badge--triangle-right .t-badge__count.data-v-3b9e0753 {
|
||||
transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
|
||||
}
|
||||
.t-badge--large.t-badge--ribbon-left .t-badge__count.data-v-3b9e0753,
|
||||
.t-badge--large.t-badge--triangle-left .t-badge__count.data-v-3b9e0753 {
|
||||
transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
|
||||
}
|
||||
.t-badge__content:not(:empty) + .t-badge--bubble.t-has-count.data-v-3b9e0753,
|
||||
.t-badge__content:not(:empty) + .t-badge--circle.t-has-count.data-v-3b9e0753,
|
||||
.t-badge__content:not(:empty) + .t-badge--square.t-has-count.data-v-3b9e0753 {
|
||||
transform-origin: center center;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.t-badge__content-text.data-v-3b9e0753 {
|
||||
display: block;
|
||||
font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
|
||||
color: var(--td-badge-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.t-badge__count.data-v-3b9e0753:empty {
|
||||
display: none;
|
||||
}
|
||||
54
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/computed.js
vendored
Normal file
54
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/computed.js
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
"use strict";
|
||||
const getBadgeValue = function(props) {
|
||||
if (props.dot) {
|
||||
return "";
|
||||
}
|
||||
if (isNaN(props.count) || isNaN(props.maxCount)) {
|
||||
return props.count;
|
||||
}
|
||||
return parseInt(props.count, 10) > props.maxCount ? `${props.maxCount}+` : props.count;
|
||||
};
|
||||
const hasUnit = function(unit) {
|
||||
return unit.indexOf("px") > 0 || unit.indexOf("rpx") > 0 || unit.indexOf("em") > 0 || unit.indexOf("rem") > 0 || unit.indexOf("%") > 0 || unit.indexOf("vh") > 0 || unit.indexOf("vm") > 0;
|
||||
};
|
||||
const getBadgeStyles = function(props) {
|
||||
var _a, _b;
|
||||
let styleStr = "";
|
||||
if (props.color) {
|
||||
styleStr += `background:${props.color};`;
|
||||
}
|
||||
if ((_a = props.offset) == null ? void 0 : _a[0]) {
|
||||
styleStr += `left: calc(100% + ${hasUnit(props.offset[0].toString()) ? props.offset[0] : `${props.offset[0]}px`});`;
|
||||
}
|
||||
if ((_b = props.offset) == null ? void 0 : _b[1]) {
|
||||
styleStr += `top:${hasUnit(props.offset[1].toString()) ? props.offset[1] : `${props.offset[1]}px`};`;
|
||||
}
|
||||
return styleStr;
|
||||
};
|
||||
const getBadgeInnerClass = function(props) {
|
||||
const baseClass = props.classPrefix;
|
||||
const classNames = [
|
||||
`${baseClass}--basic`,
|
||||
props.dot ? `${baseClass}--dot` : "",
|
||||
`${baseClass}--${props.size}`,
|
||||
`${baseClass}--${props.shape}`,
|
||||
!props.dot ? `${baseClass}--count` : ""
|
||||
];
|
||||
return classNames.join(" ");
|
||||
};
|
||||
const isShowBadge = function(props) {
|
||||
if (props.dot) {
|
||||
return true;
|
||||
}
|
||||
if (!props.showZero && !isNaN(props.count) && parseInt(props.count, 10) === 0) {
|
||||
return false;
|
||||
}
|
||||
if (props.count == null)
|
||||
return false;
|
||||
return true;
|
||||
};
|
||||
exports.getBadgeInnerClass = getBadgeInnerClass;
|
||||
exports.getBadgeStyles = getBadgeStyles;
|
||||
exports.getBadgeValue = getBadgeValue;
|
||||
exports.isShowBadge = isShowBadge;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/tdesign-uniapp/components/badge/computed.js.map
|
||||
53
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/props.js
vendored
Normal file
53
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/badge/props.js
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
"use strict";
|
||||
const props = {
|
||||
/** 颜色 */
|
||||
color: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/** 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 */
|
||||
content: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/** 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染 */
|
||||
count: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
/** 是否为红点 */
|
||||
dot: Boolean,
|
||||
/** 封顶的数字值 */
|
||||
maxCount: {
|
||||
type: Number,
|
||||
default: 99
|
||||
},
|
||||
/** 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem'] */
|
||||
offset: {
|
||||
type: Array
|
||||
},
|
||||
/** 徽标形状，其中 ribbon 和 ribbon-right 等效 */
|
||||
shape: {
|
||||
type: String,
|
||||
default: "circle",
|
||||
validator(val) {
|
||||
if (!val)
|
||||
return true;
|
||||
return ["circle", "square", "bubble", "ribbon", "ribbon-right", "ribbon-left", "triangle-right", "triangle-left"].includes(val);
|
||||
}
|
||||
},
|
||||
/** 当数值为 0 时，是否展示徽标 */
|
||||
showZero: Boolean,
|
||||
/** 尺寸 */
|
||||
size: {
|
||||
type: String,
|
||||
default: "medium",
|
||||
validator(val) {
|
||||
if (!val)
|
||||
return true;
|
||||
return ["medium", "large"].includes(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.props = props;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/tdesign-uniapp/components/badge/props.js.map
|
||||
Reference in New Issue
Block a user