@cqmcui/cqmcui/dist/packages/_es/TrendArrow.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode, renderSlot, createVNode } from "vue";
import { m as myFixed, c as createComponent } from "./component-81a4c1d0.js";
import { TriangleUp, TriangleDown } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("trend-arrow");
const _sfc_main = create({
  components: { TriangleUp, TriangleDown },
  props: {
    rate: {
      type: Number,
      default: 0
    },
    digits: {
      type: Number,
      default: 2
    },
    showSign: {
      type: Boolean,
      default: false
    },
    showZero: {
      type: Boolean,
      default: false
    },
    arrowLeft: {
      type: Boolean,
      default: false
    },
    syncTextColor: {
      type: Boolean,
      default: true
    },
    textColor: {
      type: String,
      default: "#333"
    },
    riseColor: {
      type: String,
      default: "#fa2c19"
    },
    dropColor: {
      type: String,
      default: "#64b578"
    }
  },
  setup(props) {
    const state = reactive({
      rateTrend: props.rate > 0 ? true : false
    });
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true
      };
    });
    const calcRate = computed(() => {
      const { rate, digits, showSign, showZero } = props;
      state.rateTrend = rate > 0 ? true : false;
      const absRate = Math.abs(rate);
      if (!showZero && rate === 0) {
        return "--";
      }
      let resultRate = `${showSign && rate !== 0 ? state.rateTrend ? "+" : "-" : ""}${myFixed(
        Number(absRate),
        digits
      )}%`;
      return resultRate;
    });
    const calcStyle = computed(() => {
      const { dropColor, riseColor, syncTextColor, textColor, rate } = props;
      let style = {
        color: rate === 0 ? textColor : syncTextColor ? state.rateTrend ? riseColor : dropColor : textColor
      };
      return style;
    });
    return { ...toRefs(state), classes, calcRate, calcStyle };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_TriangleUp = resolveComponent("TriangleUp");
  const _component_TriangleDown = resolveComponent("TriangleDown");
  return openBlock(), createElementBlock("view", {
    class: normalizeClass(_ctx.classes)
  }, [
    !_ctx.arrowLeft ? (openBlock(), createElementBlock("span", {
      key: 0,
      class: "cqmc-trend-arrow-icon-before cqmc-trend-arrow-rate",
      style: normalizeStyle(_ctx.calcStyle)
    }, toDisplayString(_ctx.calcRate), 5)) : createCommentVNode("", true),
    Number(_ctx.rate) !== 0 && _ctx.rateTrend ? renderSlot(_ctx.$slots, "up-icon", { key: 1 }, () => [
      createVNode(_component_TriangleUp, { color: _ctx.riseColor }, null, 8, ["color"])
    ]) : createCommentVNode("", true),
    Number(_ctx.rate) !== 0 && !_ctx.rateTrend ? renderSlot(_ctx.$slots, "down-icon", { key: 2 }, () => [
      createVNode(_component_TriangleDown, { color: _ctx.dropColor }, null, 8, ["color"])
    ]) : createCommentVNode("", true),
    _ctx.arrowLeft ? (openBlock(), createElementBlock("span", {
      key: 3,
      class: "cqmc-trend-arrow-icon-after cqmc-trend-arrow-rate",
      style: normalizeStyle(_ctx.calcStyle)
    }, toDisplayString(_ctx.calcRate), 5)) : createCommentVNode("", true)
  ], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};