cione-comp-lib/es/packages/co-label-text/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, computed, watch, onMounted, onUnmounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, withDirectives, vShow } from "vue";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoLabelText",
  props: {
    value: {
      type: String,
      required: true
    },
    fontSize: {
      type: [Number, String],
      default: 16
    },
    fontWeight: {
      type: String,
      default: "normal"
    },
    fontFamily: {
      type: String,
      default: "\u5FAE\u8F6F\u96C5\u9ED1"
    },
    letterSpacing: {
      type: Number,
      defalt: 2
    },
    lineHeight: {
      type: Number,
      default: 16
    },
    textAlign: {
      type: String,
      default: "center"
    },
    justifyContent: {
      type: String,
      default: "center"
    },
    color: {
      type: String,
      default: "#fff"
    },
    backgroundColor: {
      type: String,
      default: ""
    },
    opacity: {
      type: Number,
      default: 1
    },
    style: {
      type: Object,
      defalut: {}
    },
    showScoll: {
      type: Boolean,
      default: false
    },
    showLink: {
      type: Boolean,
      default: true
    },
    link: {
      type: String,
      default: ""
    },
    currentPage: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: "left"
    },
    runTime: {
      type: Number,
      default: 10
    },
    textOneWidth: {
      type: Number
    },
    singleLineText: {
      type: Boolean
    },
    linearGradientShow: {
      type: Boolean
    },
    linearGradient: {
      type: String
    },
    linearGradientColorOne: {
      type: String
    },
    linearGradientColorTwo: {
      type: String
    },
    moreText: {
      type: Boolean
    },
    titleText: {
      type: Boolean
    },
    highText: {
      type: Boolean
    },
    linkText: {
      type: Boolean
    },
    scollText: {
      type: Boolean
    }
  },
  setup(props) {
    const textRef = ref();
    const textChildRef = ref();
    const textContentChildOneRef = ref();
    const textContentChildTowRef = ref();
    const contentBoxRef = ref();
    const timer = ref();
    const leftMove = ref(0);
    const rightMove = ref(0);
    const topMove = ref(0);
    const bottomMove = ref(0);
    const speedTime = ref(0);
    const contentWidth = ref(40);
    const contentHeight = ref(40);
    const scollTime = ref(props.runTime * 1e3);
    const overflowView = ref(false);
    const overflowFirstView = ref(true);
    const jsutifyText = ref(props.justifyContent);
    const attrs = computed(() => {
      return {
        fontSize: props.fontSize + "px",
        fontWeight: props.fontWeight,
        fontFamily: props.fontFamily,
        letterSpacing: props.letterSpacing + "px",
        textAlign: props.textAlign,
        backgroundColor: props.backgroundColor,
        lineHeight: props.lineHeight + "px",
        width: props.textOneWidth + "px",
        height: props.direction === "top" || props.direction === "bottom" ? overflowView.value || overflowFirstView.value ? "unset" : "100%" : "100%",
        color: props.color,
        backgroundClip: "text",
        opacity: props.opacity,
        justifyContent: props.justifyContent,
        ...props.style
      };
    });
    const styleMove = computed(() => {
      let attrs2 = {
        whiteSpace: "unset"
      };
      let texts = {
        color: "unset",
        borderBottom: "unset",
        backgroundImage: "unset"
      };
      if (props.singleLineText) {
        texts.color = props.color;
        attrs2.whiteSpace = "nowrap";
      }
      switch (props.direction) {
        case "left":
          return {
            left: leftMove.value + "px",
            top: "unset",
            right: "unset",
            bottom: "unset",
            ...attrs2,
            ...texts
          };
        case "right":
          return {
            right: rightMove.value + "px",
            top: "unset",
            left: "unset",
            bottom: "unset",
            ...attrs2,
            ...texts
          };
        case "top":
          return {
            top: topMove.value + "px",
            left: "unset",
            right: "unset",
            bottom: "unset",
            ...attrs2,
            ...texts
          };
        case "bottom":
          return {
            bottom: bottomMove.value + "px",
            left: "unset",
            right: "unset",
            top: "unset",
            ...attrs2,
            ...texts
          };
      }
    });
    const spanContent = computed(() => {
      let texts = {
        color: "unset",
        borderBottom: "unset",
        backgroundImage: "unset",
        "-webkit-background-clip": "unset",
        cursor: "defualt"
      };
      if (props.linearGradientShow) {
        texts.backgroundImage = `linear-gradient(to ${props.linearGradient},${props.linearGradientColorOne},${props.linearGradientColorTwo})`;
        texts.color = "transparent";
        texts["-webkit-background-clip"] = "text";
      } else {
        texts.color = props.color;
      }
      if (props.link != "") {
        texts.color = props.color;
        texts.cursor = "pointer";
        if (props.showLink) {
          texts.borderBottom = `1px solid ${props.color}`;
        }
        if (props.linearGradientShow) {
          texts.backgroundImage = `linear-gradient(to ${props.linearGradient},${props.linearGradientColorOne},${props.linearGradientColorTwo})`;
          texts.color = "transparent";
          texts["-webkit-background-clip"] = "text";
        }
      }
      if (props.moreText || props.highText || props.linkText || props.scollText) {
        texts.color = props.color;
      }
      return {
        ...texts
      };
    });
    watch(
      () => props.showScoll,
      () => {
        timer.value && clearInterval(timer.value);
        leftMove.value = 0;
        rightMove.value = 0;
        topMove.value = 0;
        bottomMove.value = 0;
        if (props.showScoll && props.runTime != 0) {
          scollTime.value = props.runTime * 1e3;
          textScroll();
        }
      }
    );
    watch(
      () => props.runTime,
      () => {
        timer.value && clearInterval(timer.value);
        if (props.runTime != 0) {
          scollTime.value = props.runTime * 1e3;
          textScroll();
        }
      }
    );
    watch(
      () => props.value,
      () => {
        timer.value && clearInterval(timer.value);
        if (props.highText) {
          jsutifyText.value = props.justifyContent;
        }
      }
    );
    watch(
      () => props.justifyContent,
      () => {
        timer.value && clearInterval(timer.value);
        if (props.highText) {
          jsutifyText.value = props.justifyContent;
        }
      }
    );
    const clickText = () => {
      if (props.link === "" || !(props.link.indexOf("http://") === 0 || props.link.indexOf("https://") === 0)) {
        return;
      }
      if (props.currentPage == true) {
        window.location.href = props.link;
      } else {
        window.open(props.link);
      }
    };
    const textScroll = () => {
      let textContent = textRef.value;
      textChildRef.value;
      let textContentChildOne = textContentChildOneRef.value;
      textContentChildTowRef.value;
      let contentBox = contentBoxRef.value;
      switch (props.direction) {
        case "left":
        case "right":
          if (textContentChildOne.offsetWidth < textContent.offsetWidth) {
            contentWidth.value = textContent.offsetWidth - textContentChildOne.offsetWidth;
            contentBox.style.width = contentWidth.value + "px";
            speedTime.value = scollTime.value / textContent.offsetWidth;
          } else {
            contentBox.style.width = contentWidth.value + "px";
            speedTime.value = scollTime.value / textContentChildOne.offsetWidth;
          }
          break;
        case "top":
        case "bottom":
          overflowFirstView.value = false;
          if (textContentChildOne.offsetHeight < textContent.offsetHeight) {
            contentHeight.value = textContent.offsetHeight - textContentChildOne.offsetHeight;
            contentBox.style.height = contentHeight.value + "px";
            speedTime.value = scollTime.value / textContent.offsetHeight;
            overflowView.value = false;
          } else {
            contentBox.style.height = contentHeight.value + "px";
            speedTime.value = scollTime.value / (textContentChildOne.offsetHeight + contentHeight.value);
            overflowView.value = true;
          }
          if (props.direction == "bottom") {
            bottomMove.value = textContentChildOne.offsetHeight + contentHeight.value;
          }
          break;
      }
      timer.value = setInterval(() => {
        switch (props.direction) {
          case "left":
            leftMove.value--;
            if (Math.abs(leftMove.value) >= textContentChildOne.offsetWidth + contentWidth.value) {
              leftMove.value = 0;
            }
            break;
          case "right":
            rightMove.value--;
            if (Math.abs(rightMove.value) >= textContentChildOne.offsetWidth + contentWidth.value) {
              rightMove.value = 0;
            }
            break;
          case "top":
            topMove.value--;
            if (Math.abs(topMove.value) > textContentChildOne.offsetHeight + contentHeight.value) {
              topMove.value = 0;
            }
            break;
          case "bottom":
            bottomMove.value--;
            if (Math.abs(bottomMove.value) >= textContentChildOne.offsetHeight + contentHeight.value) {
              bottomMove.value = textContentChildOne.offsetHeight;
            }
            break;
          default:
            clearInterval(timer.value);
        }
      }, speedTime.value);
    };
    const singleLineTextSpanContent = computed(() => {
      let singTexs = {
        justifyContent: "unset"
      };
      singTexs.justifyContent = props.justifyContent;
      return {
        ...singTexs
      };
    });
    const highMoreTextSpanContent = computed(() => {
      let singTexs = {
        justifyContent: "unset"
      };
      singTexs.justifyContent = jsutifyText.value;
      return {
        ...singTexs
      };
    });
    onMounted(() => {
      scollTime.value = props.runTime * 1e3;
      if (props.showScoll) {
        textScroll();
      }
    }), onUnmounted(() => {
      clearInterval(timer.value);
    });
    return {
      textRef,
      textChildRef,
      textContentChildOneRef,
      textContentChildTowRef,
      contentBoxRef,
      attrs,
      styleMove,
      spanContent,
      contentWidth,
      contentHeight,
      singleLineTextSpanContent,
      highMoreTextSpanContent,
      clickText,
      textScroll,
      ...toRefs(props)
    };
  }
});
const _hoisted_1 = {
  ref: "contentBoxRef",
  style: { "{\r\n              width": "contentWidth", "height": "contentHeight" }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: "co-label-text",
    ref: "textRef",
    type: "text",
    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickText && _ctx.clickText(...args))
  }, [
    createElementVNode("div", {
      class: normalizeClass([
        "label-text__value",
        _ctx.showScoll ? (_ctx.direction == "left" || _ctx.direction == "right") && _ctx.showScoll ? "label-text__value__nowrap" : "label-text__value__wrap" : "label-text__value__aa"
      ]),
      ref: "textChildRef",
      style: normalizeStyle(_ctx.styleMove)
    }, [
      createElementVNode("div", {
        ref: "textContentChildOneRef",
        class: normalizeClass([
          "label-text__value__content",
          _ctx.showScoll ? (_ctx.direction == "left" || _ctx.direction == "right") && _ctx.showScoll ? "label-text__value__content" : "label-text__value__contentBlock" : "label-text__value__aa"
        ]),
        style: normalizeStyle({ ..._ctx.attrs, ..._ctx.spanContent })
      }, [
        createElementVNode("span", {
          class: normalizeClass([
            "label-text__value__spanContent",
            _ctx.moreText || _ctx.highText ? "label-text__value__wrapMore" : "label-text__value__nowrap"
          ]),
          style: normalizeStyle(_ctx.singleLineText || _ctx.titleText ? _ctx.singleLineTextSpanContent : _ctx.highMoreTextSpanContent)
        }, toDisplayString(_ctx.value), 7)
      ], 6),
      createElementVNode("div", {
        class: normalizeClass(
          _ctx.showScoll ? (_ctx.direction == "left" || _ctx.direction == "right") && _ctx.showScoll ? "contentBox__inlineBlock" : "contentBox__block" : "contentBox__none"
        )
      }, [
        createElementVNode("span", _hoisted_1, null, 512)
      ], 2),
      withDirectives(createElementVNode("div", {
        ref: "textContentChildTowRef",
        class: normalizeClass([
          "label-text__value__content",
          _ctx.showScoll ? (_ctx.direction == "left" || _ctx.direction == "right") && _ctx.showScoll ? "label-text__value__content" : "label-text__value__contentBlock" : "label-text__value__aa"
        ]),
        style: normalizeStyle({ ..._ctx.attrs, ..._ctx.spanContent })
      }, [
        createElementVNode("span", {
          class: normalizeClass([
            "label-text__value__spanContent",
            _ctx.moreText || _ctx.highText ? "label-text__value__wrapMore" : "label-text__value__nowrap"
          ]),
          style: normalizeStyle(_ctx.singleLineText || _ctx.titleText ? _ctx.singleLineTextSpanContent : _ctx.highMoreTextSpanContent)
        }, toDisplayString(_ctx.value), 7)
      ], 6), [
        [vShow, _ctx.showScoll]
      ])
    ], 6)
  ], 512);
}
var LabelText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-aab2e48c"]]);
export { LabelText as default };