song-ui-u
Version:
vue3 + js的PC前端组件库
219 lines (196 loc) • 7.45 kB
JavaScript
import { computed, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, Fragment, toDisplayString, ref } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { Loader } from 'song-ui-pro-icon';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../../input/index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import { XImage } from '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';
import Typewriter from 'typewriter-effect/dist/core';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
const _sfc_main = /*#__PURE__*/Object.assign({
name: "x-bubble",
}, {
__name: 'bubble',
props: {
placement: {
type: String,
default: "left",
},
avatar: {
type: String,
default: "", // 头像信息，包括 icon 和 style
},
content: {
type: String,
default: "",
},
loading: {
type: Boolean,
default: false,
},
delay: {
type: Number,
default: 50,
},
// 打字效果
typing: {
type: Boolean,
default: false,
},
},
setup(__props, { expose: __expose }) {
__expose();
const ns = useNamespace("bubble");
const props = __props;
const isLoading = computed(() => props.loading);
const startTyping = (element, text) => {
if (!element) return;
// 清除之前的实例
element.innerHTML = "";
const typewriter = new Typewriter(element, {
delay: props.delay,
cursor: "|",
cursorClassName: ns.e("cursor"),
wrapperClassName: ns.e("wrapper"),
});
typewriter
.typeString(text)
.callFunction(() => {
// 打字完成后移除光标
const cursor = element.querySelector(`.${ns.e("cursor")}`);
if (cursor) cursor.style.display = "none";
})
.start();
};
onMounted(() => {
if (props.content) {
const element = document.querySelector(`.${ns.e("typing")}`);
startTyping(element, props.content);
}
});
watch(
() => props.content,
(newVal) => {
if (newVal) {
const element = document.querySelector(`.${ns.e("typing")}`);
startTyping(element, newVal);
}
}
);
const __returned__ = { ns, props, isLoading, startTyping, ref, computed, onMounted, watch, get useNamespace() { return useNamespace }, get XIcon() { return XIcon }, get XImage() { return XImage }, get Loader() { return Loader }, get Typewriter() { return Typewriter } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}
});
const _hoisted_1 = ["src"];
const _hoisted_2 = /*#__PURE__*/createElementVNode("svg", {
t: "1744267952053",
class: "icon",
viewBox: "0 0 1024 1024",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"p-id": "5220",
width: "200",
height: "200"
}, [
/*#__PURE__*/createElementVNode("path", {
d: "M959.68 921.024c-15.232-181.696-139.648-331.968-307.84-386.624 70.464-45.632 117.248-124.48 117.248-214.464C769.152 178.624 654.208 64 512.512 64 370.752 64 255.808 178.624 255.808 319.936c0 89.984 46.784 168.832 117.248 214.528-168.192 54.592-292.544 204.864-307.84 386.56-0.192 3.456-0.64 5.44 0 10.176C66.496 947.2 80.64 960 96.704 960c17.92 0 32.064-14.656 32.064-32 16.704-197.76 182.272-351.936 383.744-351.936 201.408 0 366.976 154.176 383.68 351.936 0 17.344 14.144 32 32.064 32 16.064 0 30.208-12.8 31.424-28.8C960.32 926.464 959.936 924.416 959.68 921.024zM320 319.936C320 213.952 406.208 128 512.512 128s192.448 85.952 192.448 191.936c0 106.048-86.144 192-192.448 192S320 425.984 320 319.936z",
"p-id": "5221"
})
], -1 /* HOISTED */);
const _hoisted_3 = /*#__PURE__*/createElementVNode("span", null, "加载中....", -1 /* HOISTED */);
const _hoisted_4 = { key: 1 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createElementBlock("div", {
class: normalizeClass([$setup.ns.b(), $setup.ns.m('position', $props.placement)])
}, [
createElementVNode("div", {
class: normalizeClass([$setup.ns.e('avatar')])
}, [
($props.avatar)
? (openBlock(), createElementBlock("img", {
key: 0,
class: normalizeClass([$setup.ns.e('avatar-img')]),
src: $props.avatar,
alt: ""
}, null, 10 /* CLASS, PROPS */, _hoisted_1))
: (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([$setup.ns.e('avatar-icon')])
}, [
createVNode($setup["XIcon"], null, {
default: withCtx(() => [
_hoisted_2
]),
_: 1 /* STABLE */
})
], 2 /* CLASS */))
], 2 /* CLASS */),
createElementVNode("div", {
class: normalizeClass([$setup.ns.e('content'), $setup.ns.m('content', $props.placement)])
}, [
($setup.isLoading && $props.placement == 'left')
? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
createVNode($setup["XIcon"], {
class: normalizeClass([$setup.ns.is('loading-transition', $props.loading)])
}, {
default: withCtx(() => [
createVNode($setup["Loader"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["class"]),
_hoisted_3
], 64 /* STABLE_FRAGMENT */))
: (openBlock(), createElementBlock(Fragment, { key: 1 }, [
($props.placement == 'left' && $props.typing)
? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([$setup.ns.e('typing')])
}, null, 2 /* CLASS */))
: (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString($props.content), 1 /* TEXT */))
], 64 /* STABLE_FRAGMENT */))
], 2 /* CLASS */)
], 2 /* CLASS */))
}
var bubble = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\chat\\src\\bubble.vue"]]);
export { bubble as default };
//# sourceMappingURL=bubble.vue.mjs.map