Vue封装组件-显示值-LjShowValue

效果图：

 

 使用组件：

          <LjShowValue
            title="面积"
            :value="70.13"
            unit="亩"
            :isShowIcon="true"
            valueColor="#3fc8bd"
            valueSize="35px"
            iconColor="#1DCBF3"
            height="50px"
            width="200px"
            align="start"
          ></LjShowValue>

LjShowValue.vue:

<!--LjShowValue-->
<template>
  <div class="LjShowValue" :style="{ height: height, width: width }">
    <slot v-if="isShowIcon">
      <i
        class="el-icon-platform-eleme theIcon"
        :style="{ color: iconColor }"
      ></i>
    </slot>

    <div class="content" :style="{ alignItems: align }">
      <p>{{ title }}</p>
      <div>
        <span :style="valueStyle">{{ value }}</span>
        <span>{{ unit | filter_unit }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LjShowValue",
  components: {},
  props: {
    title: {
      type: String,
      required: true,
    },
    value: {
      type: [String, Number],
      required: true,
    },
    valueColor: {
      type: String,
      default: "#1DCBF3",
    },
    valueSize: {
      type: String,
      default: "35px",
    },
    iconColor: {
      type: String,
      default: "#1DCBF3",
    },
    height: {
      type: String,
      default: "50px",
    },
    width: {
      type: String,
    },
    // 单位
    unit: {
      type: String,
    },
    isShowIcon: {
      type: Boolean,
      default: true,
    },
    align: {
      type: String,
      default: "start", //start|center
    },
  },
  data() {
    return {
      valueStyle: {
        fontSize: this.valueSize,
        color: this.valueColor,
      },
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {
    filter_unit(value) {
      if (value) {
        return "(" + value + ")";
      }
    },
  },
  methods: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.LjShowValue {
  display: flex;
  align-items: center;
  .theIcon {
    font-size: 60px;
    margin-right: 7px;
  }
  .content {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }
}
</style>