花里胡哨的天气插件代码生成

weixin_45353536

已于 2023-03-28 16:40:54 修改

阅读量324

点赞数

分类专栏： vue3+ts 文章标签： javascript html vue.js

于 2023-03-28 16:16:12 首次发布

本文链接：https://blog.csdn.net/weixin_45353536/article/details/129818512

版权

vue3+ts 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、生成天气代码样式
我这里使用的是和风天气的官方链接生成的
https://widget.qweather.com/
在这里插入图片描述
这里有个坑，就是你创建的内容使用不了，应该是要收费才能是使用。唯一能使用的就是我下面这个url。
二、天气组件

<template>
  <div class="weather">
    <div id="he-plugin-standard"></div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
window.WIDGET = {
  CONFIG: {
    layout: "1",
    width: "550",
    height: "200",
    background: "1",
    dataColor: "FFFFFF",
    borderRadius: "5",
    key: "fcd4fc1e48a144a483b7af74284229b8", //这里使用自己生成的key
  },
};

onMounted(() => {
  weather();
});
const weather = () => {
  const s = document.createElement("script");
  s.type = "text/javascript";
  s.src = "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0";
  document.body.appendChild(s);
};
</script>
<style lang="scss" scoped>
.weather {
  width: 60px !important;
  height: 100%;
}
</style>

三、引用

<template>
  <Weather class="weather"></Weather>
</template>

<script lang="ts" setup>
import Weather from "/@/components/Weather.vue";
</script>
<style lang="scss" scoped>
.weather {
  width: 80px;
  height: 40px;
}
</style>