@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
116 lines (115 loc) • 5.3 kB
JavaScript
import { toRefs, inject, ref, reactive, onMounted, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot, createCommentVNode, Fragment, createTextVNode, toDisplayString } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("avatar");
const _sfc_main = create({
props: {
size: {
type: String,
default: ""
},
shape: {
type: String,
default: "round"
},
bgColor: {
type: String,
default: "#eee"
},
color: {
type: String,
default: "#666"
}
},
setup(props) {
const { size, shape, bgColor, color } = toRefs(props);
const sizeValue = ["large", "normal", "small"];
const avatarGroup = inject("avatarGroup", null);
const avatarRef = ref(null);
const visible = reactive({
lightTheme: false
});
const state = reactive({
index: 1,
showMax: false,
// 是否显示的最大头像个数
maxIndex: 0
// avatarGroup里的avatar的个数
});
onMounted(() => {
var _a, _b;
const children = (_b = (_a = avatarGroup == null ? void 0 : avatarGroup.avatarGroupRef) == null ? void 0 : _a.value) == null ? void 0 : _b.children;
if (children) {
avatarLength(children);
}
});
const classes = computed(() => {
var _a, _b;
const prefixCls = componentName;
return {
[prefixCls]: true,
[`cqmc-avatar-${size.value || ((_a = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _a.size) || "normal"}`]: true,
[`cqmc-avatar-${shape.value || ((_b = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _b.shape) || "normal"}`]: true
};
});
const styles = computed(() => {
var _a, _b, _c;
return {
width: sizeValue.indexOf(size.value) > -1 ? "" : `${size.value}px`,
height: sizeValue.indexOf(size.value) > -1 ? "" : `${size.value}px`,
backgroundColor: `${bgColor.value}`,
color: `${color.value}`,
marginLeft: state.index != 1 && (((_a = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _a.span) ? `${(_b = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _b.span}px` : ""),
zIndex: ((_c = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _c.zIndex) == "right" ? `${Math.abs(state.maxIndex - state.index)}` : ""
};
});
const maxStyles = computed(() => {
var _a, _b;
return {
backgroundColor: `${(_a = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _a.maxBgColor}`,
color: `${(_b = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _b.maxColor}`
};
});
const avatarLength = (children) => {
var _a, _b, _c;
state.maxIndex = children.length;
for (let i = 0; i < children.length; i++) {
if (children[i] && children[i].classList && children[i].classList[0] == "cqmc-avatar") {
children[i].setAttribute("data-index", i + 1);
}
}
state.index = (_b = (_a = avatarRef == null ? void 0 : avatarRef.value) == null ? void 0 : _a.dataset) == null ? void 0 : _b.index;
if (state.index == state.maxIndex && state.index != ((_c = avatarGroup == null ? void 0 : avatarGroup.props) == null ? void 0 : _c.maxCount)) {
state.showMax = true;
}
};
return {
classes,
styles,
maxStyles,
avatarGroup,
visible,
avatarRef,
...toRefs(state)
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
return _ctx.showMax || !((_b = (_a = _ctx.avatarGroup) == null ? void 0 : _a.props) == null ? void 0 : _b.maxCount) || _ctx.index <= ((_d = (_c = _ctx.avatarGroup) == null ? void 0 : _c.props) == null ? void 0 : _d.maxCount) ? (openBlock(), createElementBlock("view", {
key: 0,
style: normalizeStyle(!_ctx.showMax ? _ctx.styles : _ctx.maxStyles),
class: normalizeClass(_ctx.classes),
ref: "avatarRef"
}, [
!((_f = (_e = _ctx.avatarGroup) == null ? void 0 : _e.props) == null ? void 0 : _f.maxCount) || _ctx.index <= ((_h = (_g = _ctx.avatarGroup) == null ? void 0 : _g.props) == null ? void 0 : _h.maxCount) ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true),
_ctx.showMax && ((_j = (_i = _ctx.avatarGroup) == null ? void 0 : _i.props) == null ? void 0 : _j.maxCount) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createTextVNode(toDisplayString(((_l = (_k = _ctx.avatarGroup) == null ? void 0 : _k.props) == null ? void 0 : _l.maxContent) ? (_n = (_m = _ctx.avatarGroup) == null ? void 0 : _m.props) == null ? void 0 : _n.maxContent : `+ ${_ctx.maxIndex - ((_p = (_o = _ctx.avatarGroup) == null ? void 0 : _o.props) == null ? void 0 : _p.maxCount)}`), 1)
], 64)) : createCommentVNode("", true)
], 6)) : createCommentVNode("", true);
}
const Avatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
Avatar as default
};