Vue3 组件示例工程（二） —— AQI组件

目录

1.AQI组件 aqi-base 编写

2.AQI组件 aqi-base 使用

---

1.AQI组件 aqi-base 编写

• 效果展示：
• 

• ---

  组件名称：TAqiBase

• ---

  可供接受的参数（props）：

/**
 * t-aqi-base
 * @desc aqi组件
 * @param {object} [data] - 数据
 * @param {object} [cStyle] - 样式
 * @example
 * <t-aqi-base theme-style="dark" />
 */

  props: {
    // 用户自定义样式
    cStyle: {
      type: Object,
      default: {
        wrapper: {},
        value: {}, 
        lable: {}, // 优良
        title: {}, // 标题
        primaryPollutants: {}, // 首要污染物
        desc: {}, // 描述
        updateTime: {}, // 更新的时间
      },
    },
    // 数据
    data: {
      type: Object,
      default() {
        return {
          value: '',
          lable: '',
          title: '',
          primaryPollutants: '',
          desc: '',
          updateTime: '',
        };
      },
    },
    // 主题风格深浅
    themeStyle: {
      type: String as PropType<ThemeStyle.LIGHT | ThemeStyle.DARK>,
      default: ThemeStyle.DARK,
    },
  },

• 注意：此处 props 接受的 data，默认值也是写成了函数形式，不过不是箭头函数，而是直接写成了 default() { return { } }，这样也是 ok 的

• ---

  组件模板：

<template>
  <div v-if="data" class="ths-aqi-base">
    <!-- aqi组件外层容器 -->
    <div class="aqi-content" :style="{ ...cStyle.wrapper }">

      <!-- 第一层 - 卡片标题（eg:空气质量） + 更新时间（eg:更新至7-21） -->
      <div v-if="data.title || data.updateTime" class="aqi-content__top">
        <span v-if="data.title"
          class="aqi-content__top-title"
          :style="{ ...cStyle.title }"
        >
          {{ data.title }}
        </span>
        <span v-if="data.updateTime"
          class="aqi-content__top-updateTime"
          :style="{ ...cStyle.updateTime}"
        >
          {{ data.updateTime }}
        </span>
      </div>

      <!-- 第二层 - 污染物数值(90) + 当前等级(优良) -->
      <div v-if="data.value || data.lable" class="aqi-content__middle">
        <span v-if="data.value"
          class="aqi-content__middle-value"
          :style="{ ...cStyle.value }"
        >
          {{ data.value }}
        </span>
        <span v-if="data.lable"
          class="aqi-content__middle-lable"
          :style="{ ...cStyle.lable }"
        >
          {{ data.lable }}
        </span>
      </div>

      <!-- 第三层 - 污染物描述信息（当前首要污染物） + 污染物名（PM2.5） -->
      <div v-if="data.desc || data.primaryPollutants" class="aqi-content__footer">
        <span v-if="data.desc"
          class="aqi-content__footer-desc"
          :style="{ ...cStyle.desc }"
        >
          {{ data.desc }}
        </span>
        <span v-if="data.primaryPollutants"
          class="aqi-content__footer-primaryPollutants"
          :style="{ ...cStyle.primaryPollutants }"
          v-html="data.primaryPollutants"
        />
      </div>
    </div>
  </div>
</template>

• 组件分了三行，通过添加 v-if，只有当用户传入相应数据时，才会渲染相应的部分
• 注意：数据可以通过双向绑定的方式写入 {{ data.xxx }}，也可以通过 v-html 写入

• ---

  默认样式设置：

.ths-aqi-base {

  .aqi-content {
    line-height: 30px;

    &__top { // 相当于 .aqi-content__top
      display: flex;
      justify-content: space-between;

      &-title {
        font-size: 14px;
        font-family: 'FZZYJW--GB1-0';
        font-weight: 400;
        color: var(--font-color1);
      }

      &-updateTime {
        font-size: 14px;
        font-weight: 400;
        color: var(--font-color3);
      }
    }

    &__middle {
      display: flex;

      &-value {
        margin-right: 10px;
        font-size: 39px;
        font-family: 'DIN-Medium';
        font-weight: 500;
        color: var(--font-color1);
      }
      &-lable {
        height: 34px;
        font-size: 28px;
        font-family: 'FZZYJW--GB1-0';
        line-height: 35px;
        color: #2dd101;
      }
    }

    &__footer {
      &-desc,
      &-primaryPollutants {
        display: inline-block;
        font-size: 14px;
        color: var(--font-color1);
      }

      &-primaryPollutants {
        .num {
          font-size: 10px;
        }
      }
    }
  }
}

• 

2.AQI组件 aqi-base 使用

• 导入组件及样式：
• 一种是在 main.ts 中全局引入，另一种是在 单独的 .vue文件中按需引入

// main.ts
import TAqiBase from '@p-air/aqi-base';
import '@p-air/aqi-base/dist/cjs/index.css';
createApp(App).use(TAqiBase);

// xx.vue
import TAqiBase from "@p-air/aqi-base";
import '@p-air/aqi-base/dist/cjs/index.css';
export default defineComponent({
  components: {
    TAqiBase,
  },
})

• ---

  使用AQI组件：

      <t-aqi-base
        theme-style="dark"
        :data="data"
        :c-style="{
          value: {
            fontSize:'40px',
          },
          lable: {
            fontSize: '30px',
          },
        }"
      />

setup() {
    const data = {
      value: '130',
      lable: '严重',
      title: ' 空气质量',
      updateTime: '更新至  7:26',
    };
    return {
        data,
    }
}

• 可以看出：

1. 用户在 data 中，可以不传入全部的数据，不传入就不会渲染
2. 用户可以选择性的传入部分样式，如果不传入，组件也会提供默认样式

• 如果想限制 AQI卡片 的大小，可以给卡片组件外面再套一层div

    <div class="component-dark-first">
      <t-aqi-base
        theme-style="dark"
        :data="data"
      />
    </div>

.component-dark-first{
  width: 179px;
  padding: 14px 16px 0 25px;
  height: 124px;
  margin-bottom: 10px;
  border-radius: 13px;
  background: rgba(9, 16, 41, 0.67);
}