uv-ui
Version:
基于vue3的移动端组件库
73 lines (72 loc) • 2.43 kB
JavaScript
import { ref as r, onMounted as k, watch as w, openBlock as N, createElementBlock as H, createTextVNode as b, toDisplayString as h, createElementVNode as A } from "vue";
import { pxToNum as x } from "../../utils/common.js";
import "./text-ellipsis.vue_vue_type_style_index_0_lang.js";
const C = {
name: "UvTextEllipsis"
}, M = /* @__PURE__ */ Object.assign(C, {
props: {
content: {
type: String,
default: ""
},
rows: {
type: [String, Number],
default: 1
},
expandText: {
type: String,
default: ""
},
collapseText: {
type: String,
default: ""
},
dots: {
type: String,
default: "..."
}
},
emits: ["clickAction"],
setup(s, { emit: v }) {
const l = s, p = r(), y = r(!1), i = r(!1), u = r(""), T = () => {
if (!p.value)
return;
const t = window.getComputedStyle(p.value), e = document.createElement("div");
return Array.prototype.slice.apply(t).forEach((n) => {
e.style.setProperty(n, t.getPropertyValue(n));
}), e.style.position = "fixed", e.style.zIndex = "-9999", e.style.top = "-9999px", e.style.height = "auto", e.style.minHeight = "auto", e.style.maxHeight = "auto", e.innerText = l.content, document.body.appendChild(e), e;
}, E = (t, e) => {
const { dots: o, content: n, expandText: c } = l;
let d = 0, f = n.length, g = -1;
for (; d <= f; ) {
const a = Math.floor((d + f) / 2);
t.innerText = n.slice(0, a) + o + c, t.offsetHeight <= e ? (d = a + 1, g = a) : f = a - 1;
}
return n.slice(0, g) + o;
}, m = () => {
const t = T();
if (!t)
return;
const { paddingBottom: e, paddingTop: o, lineHeight: n } = t.style, c = (Number(l.rows) + 0.5) * x(n) + x(o) + x(e);
c < t.offsetHeight ? (y.value = !0, u.value = E(t, c)) : (y.value = !1, u.value = l.content), document.body.removeChild(t);
}, S = (t) => {
i.value = !i.value, v("clickAction", t);
};
return k(() => {
m();
}), w(() => [l.content, l.rows], m), (t, e) => (N(), H("div", {
class: "uv-text-ellipsis",
ref_key: "textEllipsisRef",
ref: p
}, [
b(h(i.value ? s.content : u.value) + " ", 1),
A("span", {
onClick: S,
class: "uv-text-ellipsis-action-text"
}, h(i.value ? s.collapseText : s.expandText), 1)
], 512));
}
});
export {
M as default
};