@wfrog/vc
Version:
`自用` 的基于 `element-plus` 二次封装的 `vue3` 组件库。追求在业务场景中，尽可能使用更少的代码量来实现需求。 因此在组件封装上，以 `方便` 为主，打包仅 `esm` 模式。
127 lines (124 loc) • 5.69 kB
JavaScript
import './index.css'
// vue-script:D:\project\_my\vc\src\components\text-ellipsis\index.vue?type=script
import { defineComponent as _defineComponent } from "vue";
import { unref as _unref, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createElementBlock as _createElementBlock } from "vue";
import { ElTooltip } from "element-plus";
import { computed, nextTick, onMounted, ref, watch } from "vue";
var text_ellipsis_default = /* @__PURE__ */ _defineComponent({
__name: "index",
props: {
type: { type: String, default: "single" },
effect: { type: String, default: "dark" },
placement: { type: String, default: "top" },
content: { type: String, default: "" },
popperOptions: { type: Object, default: () => ({ boundariesElement: "body", gpuAcceleration: false }) },
popperClass: { type: String, default: "" },
enterable: { type: Boolean, default: true },
maxWidth: { type: Number, default: 0 },
showTooltip: { type: Boolean, default: true }
},
setup(__props, { expose }) {
const props = __props;
const tipsVisible = ref(false);
const textVisible = ref(false);
const realWidth = ref(0);
const eleMain = ref();
const eleText = ref();
const eleEllipsis = ref();
const mainStyle = computed(() => props.maxWidth ? { width: `${props.maxWidth}px` } : {});
const fixStyle = computed(() => ({ width: `${realWidth.value}px` }));
const isOverflow = () => new Promise((resolve) => {
tipsVisible.value = true;
textVisible.value = true;
nextTick(() => {
if (eleText.value && eleEllipsis.value) {
const originWidth = eleText.value?.offsetWidth;
const ellipsisWidth = props.maxWidth || eleEllipsis.value?.offsetWidth;
resolve(originWidth > ellipsisWidth);
} else {
resolve(false);
}
});
});
const update = async () => {
const isOverflowX = await isOverflow();
tipsVisible.value = isOverflowX;
textVisible.value = !isOverflowX;
realWidth.value = eleMain.value?.clientWidth || 0;
};
const watchData = computed(() => `${props.content}${props.maxWidth}${props.popperClass}`);
watch(watchData, () => update(), { immediate: true });
watch(realWidth, () => update());
onMounted(() => nextTick(() => update()));
expose({ tipsVisible });
return (_ctx, _cache) => {
return _openBlock(), _createElementBlock("div", {
ref_key: "eleMain",
ref: eleMain,
class: _normalizeClass(_ctx.$style.main),
style: _normalizeStyle(_unref(mainStyle))
}, [
_createCommentVNode(" \u663E\u793Atooltip\u5E76\u4E14tips\u53EF\u89C1\uFF0C\u4E0D\u7528disable\u53EF\u4EE5\u907F\u514D\u6E32\u67D3tooltip "),
tipsVisible.value && __props.showTooltip ? (_openBlock(), _createBlock(_unref(ElTooltip), {
key: 0,
effect: __props.effect,
placement: __props.placement,
"popper-class": __props.popperClass,
"popper-options": __props.popperOptions,
enterable: __props.enterable
}, {
content: _withCtx(() => [
_renderSlot(_ctx.$slots, "default", {}, () => [
_createTextVNode(_toDisplayString(__props.content), 1)
])
]),
default: _withCtx(() => [
_createElementVNode("div", {
ref_key: "eleEllipsis",
ref: eleEllipsis,
class: _normalizeClass(_ctx.$style.ellipsis),
style: _normalizeStyle(_unref(fixStyle))
}, [
_renderSlot(_ctx.$slots, "default", {}, () => [
_createTextVNode(_toDisplayString(__props.content), 1)
])
], 6)
]),
_: 3
}, 8, ["effect", "placement", "popper-class", "popper-options", "enterable"])) : _createCommentVNode("v-if", true),
_createCommentVNode(" \u663E\u793Atooltip\u5E76\u4E14tips\u4E0D\u53EF\u89C1\uFF0C\u4EC5\u663E\u793A\u6587\u6848 "),
tipsVisible.value && !__props.showTooltip ? (_openBlock(), _createElementBlock("div", {
key: 1,
ref_key: "eleEllipsis",
ref: eleEllipsis,
class: _normalizeClass(_ctx.$style.ellipsis),
style: _normalizeStyle(_unref(fixStyle))
}, [
_renderSlot(_ctx.$slots, "default", {}, () => [
_createTextVNode(_toDisplayString(__props.content), 1)
])
], 6)) : _createCommentVNode("v-if", true),
textVisible.value ? (_openBlock(), _createElementBlock("div", {
key: 2,
ref_key: "eleText",
ref: eleText,
class: _normalizeClass(_ctx.$style.text)
}, [
_renderSlot(_ctx.$slots, "default", {}, () => [
_createTextVNode(_toDisplayString(__props.content), 1)
])
], 2)) : _createCommentVNode("v-if", true)
], 6);
};
}
});
// vue-style:D:\project\_my\vc\src\components\text-ellipsis\index.vue?type=style&index=0&isModule=true&isNameImport=true
var text_ellipsis_default2 = { main: "_main_eqh40_1", ellipsis: "_ellipsis_eqh40_7", text: "_text_eqh40_13" };
// src/components/text-ellipsis/index.vue
var cssModules = {};
text_ellipsis_default.__cssModules = cssModules = {};
cssModules["$style"] = text_ellipsis_default2;
var text_ellipsis_default3 = text_ellipsis_default;
export {
text_ellipsis_default3 as default
};