song-ui-u
Version:
vue3 + js的PC前端组件库
221 lines (197 loc) • 7.65 kB
JavaScript
'use strict';
var vue = require('vue');
var index = require('../../../hook/use-namespace/index.cjs');
var icons = require('song-ui-pro-icon');
require('../../../hook/use-zindex/index.cjs');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
var index$1 = require('../../icon/index.cjs');
require('../../input/index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../../message/index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
var index$2 = require('../../image/index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../index.cjs');
require('../../progress/index.cjs');
require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../../tabs/index.cjs');
require('../../menu/index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../../select/index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../../tag/index.cjs');
require('../../result/index.cjs');
require('../../sender/index.cjs');
var Typewriter = require('typewriter-effect/dist/core');
var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.cjs');
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 = index.useNamespace("bubble");
const props = __props;
const isLoading = vue.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();
};
vue.onMounted(() => {
if (props.content) {
const element = document.querySelector(`.${ns.e("typing")}`);
startTyping(element, props.content);
}
});
vue.watch(
() => props.content,
(newVal) => {
if (newVal) {
const element = document.querySelector(`.${ns.e("typing")}`);
startTyping(element, newVal);
}
}
);
const __returned__ = { ns, props, isLoading, startTyping, ref: vue.ref, computed: vue.computed, onMounted: vue.onMounted, watch: vue.watch, get useNamespace() { return index.useNamespace }, get XIcon() { return index$1.XIcon }, get XImage() { return index$2.XImage }, get Loader() { return icons.Loader }, get Typewriter() { return Typewriter } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}
});
const _hoisted_1 = ["src"];
const _hoisted_2 = /*#__PURE__*/vue.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__*/vue.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__*/vue.createElementVNode("span", null, "加载中....", -1 /* HOISTED */);
const _hoisted_4 = { key: 1 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([$setup.ns.b(), $setup.ns.m('position', $props.placement)])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([$setup.ns.e('avatar')])
}, [
($props.avatar)
? (vue.openBlock(), vue.createElementBlock("img", {
key: 0,
class: vue.normalizeClass([$setup.ns.e('avatar-img')]),
src: $props.avatar,
alt: ""
}, null, 10 /* CLASS, PROPS */, _hoisted_1))
: (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass([$setup.ns.e('avatar-icon')])
}, [
vue.createVNode($setup["XIcon"], null, {
default: vue.withCtx(() => [
_hoisted_2
]),
_: 1 /* STABLE */
})
], 2 /* CLASS */))
], 2 /* CLASS */),
vue.createElementVNode("div", {
class: vue.normalizeClass([$setup.ns.e('content'), $setup.ns.m('content', $props.placement)])
}, [
($setup.isLoading && $props.placement == 'left')
? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
vue.createVNode($setup["XIcon"], {
class: vue.normalizeClass([$setup.ns.is('loading-transition', $props.loading)])
}, {
default: vue.withCtx(() => [
vue.createVNode($setup["Loader"])
]),
_: 1 /* STABLE */
}, 8 /* PROPS */, ["class"]),
_hoisted_3
], 64 /* STABLE_FRAGMENT */))
: (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
($props.placement == 'left' && $props.typing)
? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([$setup.ns.e('typing')])
}, null, 2 /* CLASS */))
: (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, vue.toDisplayString($props.content), 1 /* TEXT */))
], 64 /* STABLE_FRAGMENT */))
], 2 /* CLASS */)
], 2 /* CLASS */))
}
var bubble = /*#__PURE__*/_pluginVue_exportHelper(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\chat\\src\\bubble.vue"]]);
module.exports = bubble;
//# sourceMappingURL=bubble.vue.cjs.map