You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
4.8 KiB
142 lines
4.8 KiB
import { openBlock, createElementBlock, renderSlot, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode } from "vue";
|
|
import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
|
|
var _style_0 = { "uni-badge--x": { "": { "position": "relative" } }, "uni-badge--absolute": { "": { "position": "absolute" } }, "uni-badge--small": { "": { "transform": "scale(0.8)", "transformOrigin": "center center" } }, "uni-badge": { "": { "justifyContent": "center", "flexDirection": "row", "height": 20, "lineHeight": 18, "color": "#ffffff", "borderRadius": 100, "backgroundColor": "rgba(0,0,0,0)", "borderWidth": 1, "borderStyle": "solid", "borderColor": "#ffffff", "textAlign": "center", "fontFamily": '"Helvetica Neue", Helvetica, sans-serif', "fontSize": 12 } }, "uni-badge--info": { "": { "color": "#ffffff", "backgroundColor": "#909399" } }, "uni-badge--primary": { "": { "backgroundColor": "#2979ff" } }, "uni-badge--success": { "": { "backgroundColor": "#4cd964" } }, "uni-badge--warning": { "": { "backgroundColor": "#f0ad4e" } }, "uni-badge--error": { "": { "backgroundColor": "#dd524d" } }, "uni-badge--inverted": { "": { "paddingTop": 0, "paddingRight": 5, "paddingBottom": 0, "paddingLeft": 0, "color": "#909399" } }, "uni-badge--info-inverted": { "": { "color": "#909399", "backgroundColor": "rgba(0,0,0,0)" } }, "uni-badge--primary-inverted": { "": { "color": "#2979ff", "backgroundColor": "rgba(0,0,0,0)" } }, "uni-badge--success-inverted": { "": { "color": "#4cd964", "backgroundColor": "rgba(0,0,0,0)" } }, "uni-badge--warning-inverted": { "": { "color": "#f0ad4e", "backgroundColor": "rgba(0,0,0,0)" } }, "uni-badge--error-inverted": { "": { "color": "#dd524d", "backgroundColor": "rgba(0,0,0,0)" } } };
|
|
const _sfc_main = {
|
|
name: "UniBadge",
|
|
emits: ["click"],
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: "error"
|
|
},
|
|
inverted: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isDot: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxNum: {
|
|
type: Number,
|
|
default: 99
|
|
},
|
|
absolute: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
offset: {
|
|
type: Array,
|
|
default() {
|
|
return [0, 0];
|
|
}
|
|
},
|
|
text: {
|
|
type: [String, Number],
|
|
default: ""
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: "small"
|
|
},
|
|
customStyle: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
width() {
|
|
return String(this.text).length * 8 + 12;
|
|
},
|
|
classNames() {
|
|
const {
|
|
inverted,
|
|
type,
|
|
size,
|
|
absolute
|
|
} = this;
|
|
return [
|
|
inverted ? "uni-badge--" + type + "-inverted" : "",
|
|
"uni-badge--" + type,
|
|
"uni-badge--" + size,
|
|
absolute ? "uni-badge--absolute" : ""
|
|
].join(" ");
|
|
},
|
|
positionStyle() {
|
|
if (!this.absolute)
|
|
return {};
|
|
let w = this.width / 2, h = 10;
|
|
if (this.isDot) {
|
|
w = 5;
|
|
h = 5;
|
|
}
|
|
const x = `${-w + this.offset[0]}px`;
|
|
const y = `${-h + this.offset[1]}px`;
|
|
const whiteList = {
|
|
rightTop: {
|
|
right: x,
|
|
top: y
|
|
},
|
|
rightBottom: {
|
|
right: x,
|
|
bottom: y
|
|
},
|
|
leftBottom: {
|
|
left: x,
|
|
bottom: y
|
|
},
|
|
leftTop: {
|
|
left: x,
|
|
top: y
|
|
}
|
|
};
|
|
const match = whiteList[this.absolute];
|
|
return match ? match : whiteList["rightTop"];
|
|
},
|
|
badgeWidth() {
|
|
return {
|
|
width: `${this.width}px`
|
|
};
|
|
},
|
|
dotStyle() {
|
|
if (!this.isDot)
|
|
return {};
|
|
return {
|
|
width: "10px",
|
|
height: "10px",
|
|
borderRadius: "10px"
|
|
};
|
|
},
|
|
displayValue() {
|
|
const {
|
|
isDot,
|
|
text,
|
|
maxNum
|
|
} = this;
|
|
return isDot ? "" : Number(text) > maxNum ? `${maxNum}+` : text;
|
|
}
|
|
},
|
|
methods: {
|
|
onClick() {
|
|
this.$emit("click");
|
|
}
|
|
}
|
|
};
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return openBlock(), createElementBlock("view", { class: "uni-badge--x" }, [
|
|
renderSlot(_ctx.$slots, "default"),
|
|
$props.text ? (openBlock(), createElementBlock("u-text", {
|
|
key: 0,
|
|
class: normalizeClass([$options.classNames, "uni-badge"]),
|
|
style: normalizeStyle([$options.badgeWidth, $options.positionStyle, $props.customStyle, $options.dotStyle]),
|
|
onClick: _cache[0] || (_cache[0] = ($event) => $options.onClick())
|
|
}, toDisplayString($options.displayValue), 7)) : createCommentVNode("v-if", true)
|
|
]);
|
|
}
|
|
var __easycom_5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["styles", [_style_0]], ["__file", "E:/20220718_wenyin/uni-app/WMS_PDA_3.0/uni_modules/uni-badge/components/uni-badge/uni-badge.vue"]]);
|
|
export { __easycom_5 as _ };
|
|
|