官网：和风天气

1.vue中使用插件

<template>
  <el-card class="weather-card">
    <h4><svg-icon name="weather" width="20" height="20"></svg-icon>天气</h4>

    <div id="he-plugin-standard"></div>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from "vue";
onMounted(() => {
  window.WIDGET = {
    CONFIG: {
      layout: "2",
      width: 200,
      height: 300,
      background: "2",
      dataColor: "000000",
      borderRadius: "5",
      key: "d1806c070b624982bb830ca9611a8e4c",
    },
  };
  const script = document.createElement("script");
  script.src =
    "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
  document.body.appendChild(script);
});

2.如何修改天气的宽高

使用样式穿透修改

  ::v-deep #he-plugin-standard {
    width:100%!important;
  }