@fmdevui/fm-dev/lib/packages/core/ui/components/noticeBar/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');

const _hoisted_1 = { class: "notice-bar-warp-text-box" };
const _hoisted_2 = ["innerHTML"];
var _sfc_main = /* @__PURE__ */ vue.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 = vue.ref(null);
    const noticeBarTextRef = vue.ref(null);
    const state = vue.reactive({
      isMode: false,
      warpOWidth: 0,
      textOWidth: 0,
      animationDuration: 0
    });
    vue.onMounted(async () => {
      if (!props.scrollable) initAnimation();
    });
    const initAnimation = () => {
      vue.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 vue.withDirectives((vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: "fm-notice-bar",
          style: vue.normalizeStyle({ background: __props.background, height: `${__props.height}px` })
        },
        [
          vue.createElementVNode(
            "div",
            {
              class: "notice-bar-warp",
              style: vue.normalizeStyle({ color: __props.color, fontSize: `${__props.size}px` }),
              ref_key: "noticeBarWarpRef",
              ref: noticeBarWarpRef
            },
            [
              __props.leftIcon ? (vue.openBlock(), vue.createElementBlock(
                "i",
                {
                  key: 0,
                  class: vue.normalizeClass(["notice-bar-warp-left-icon", __props.leftIcon])
                },
                null,
                2
                /* CLASS */
              )) : vue.createCommentVNode("v-if", true),
              vue.createElementVNode("div", _hoisted_1, [
                vue.createElementVNode(
                  "div",
                  {
                    class: "notice-bar-warp-text",
                    ref_key: "noticeBarTextRef",
                    ref: noticeBarTextRef
                  },
                  [
                    vue.createElementVNode("div", {
                      innerHTML: props.text,
                      "data-slate-editor": ""
                    }, null, 8, _hoisted_2)
                  ],
                  512
                  /* NEED_PATCH */
                )
              ])
            ],
            4
            /* STYLE */
          )
        ],
        4
        /* STYLE */
      )), [
        [vue.vShow, !state.isMode]
      ]);
    };
  }
});

exports.default = _sfc_main;