@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
130 lines (127 loc) • 4.4 kB
JavaScript
import { defineComponent, ref, reactive, onMounted, nextTick, withDirectives, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode, normalizeClass, vShow } from 'vue';
const _hoisted_1 = { class: "notice-bar-warp-text-box" };
const _hoisted_2 = ["innerHTML"];
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "FmNoticeBar"
},
__name: "index",
props: {
mode: { type: String, default: "" },
// 通知栏模式，可选值为 closeable link
text: { type: String, default: "" },
// 通知文本内容
color: { type: String, default: "var(--el-color-warning)" },
// 通知文本颜色
background: { type: String, default: "var(--el-color-warning-light-9)" },
// 通知背景色
size: { type: [Number, String], default: 14 },
// 字体大小，单位px
height: { type: Number, default: 40 },
// 通知栏高度，单位px
delay: { type: Number, default: 1 },
// 动画延迟时间 (s)
speed: { type: Number, default: 100 },
// 滚动速率 (px/s)
scrollable: { type: Boolean, default: false },
// 是否开启垂直滚动
leftIcon: { type: String, default: "iconfont icon-tongzhi2" },
// 自定义左侧图标
rightIcon: { type: String, default: "" }
// 自定义右侧图标
},
emits: ["close", "link"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const noticeBarWarpRef = ref(null);
const noticeBarTextRef = ref(null);
const state = reactive({
isMode: false,
warpOWidth: 0,
textOWidth: 0,
animationDuration: 0
});
onMounted(async () => {
if (!props.scrollable) initAnimation();
});
const initAnimation = () => {
nextTick(() => {
if (noticeBarWarpRef.value && noticeBarTextRef.value) {
state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
state.textOWidth = noticeBarTextRef.value.scrollWidth;
state.animationDuration = (state.textOWidth + state.warpOWidth) / props.speed;
noticeBarTextRef.value.style.animation = "none";
noticeBarTextRef.value.offsetHeight;
noticeBarTextRef.value.style.animation = `marquee ${state.animationDuration}s linear infinite`;
const keyframes = `
@keyframes marquee {
0% { transform: translateX(${state.warpOWidth}px); }
100% { transform: translateX(-${state.textOWidth}px); }
}
`;
const styleSheet = document.createElement("style");
styleSheet.innerText = keyframes;
document.head.appendChild(styleSheet);
}
});
};
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock(
"div",
{
class: "fm-notice-bar",
style: normalizeStyle({ background: __props.background, height: `${__props.height}px` })
},
[
createElementVNode(
"div",
{
class: "notice-bar-warp",
style: normalizeStyle({ color: __props.color, fontSize: `${__props.size}px` }),
ref_key: "noticeBarWarpRef",
ref: noticeBarWarpRef
},
[
__props.leftIcon ? (openBlock(), createElementBlock(
"i",
{
key: 0,
class: normalizeClass(["notice-bar-warp-left-icon", __props.leftIcon])
},
null,
2
/* CLASS */
)) : createCommentVNode("v-if", true),
createElementVNode("div", _hoisted_1, [
createElementVNode(
"div",
{
class: "notice-bar-warp-text",
ref_key: "noticeBarTextRef",
ref: noticeBarTextRef
},
[
createElementVNode("div", {
innerHTML: props.text,
"data-slate-editor": ""
}, null, 8, _hoisted_2)
],
512
/* NEED_PATCH */
)
])
],
4
/* STYLE */
)
],
4
/* STYLE */
)), [
[vShow, !state.isMode]
]);
};
}
});
export { _sfc_main as default };