vue中和风天气的使用

vue中调用和风天气的插件展示实时天气

<template>
  <div class="nav-header-wrapper">
    <div
      class="weather"
    >
       <div id="he-plugin-standard"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'nav-header',
  },
  data() {
    return {};
  },
  mounted() {
    this.weather();
  },
  methods: {
    // 获取天气
    weather() {
    // 到和风天气官网设计和下载 https://widget.qweather.com/
      window.WIDGET = {
        CONFIG: {
          layout: '1',
          width: '300',
          height: '70',
          background: '5',
          dataColor: 'FFFFFF',
          city: 'CN101070901',
          key: '28c77cb1678344c4b1135efb3555e8e0',
        },
      };
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src =
        'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
      document.getElementsByTagName('head')[0].appendChild(script);
      // 自行console打印内容查看
    },
  },
};
</script>
<style>
.wv-v-h-location,
.wv-n-h-now-rain {
  display: none !important;
}
</style>
<style lang="scss" scoped>
.nav-header-wrapper {
  height: 90px;
  position: relative;
  .weather {
    position: absolute;
    width: 300px;
    right: 65px;
    top: 70px;
  }
}
</style>