Vue封装组件-显示值-LjShowValue

ゝ一纸荒年。 2022-09-02 15:55 50阅读 0赞

效果图：

![20210806112504802.png][]

使用组件：

LjShowValue.vue:

<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>

[20210806112504802.png]: /images/20220829/a531c43e1e6d4ee399bc5848734d9df9.png