vue中使用天气插件

最新推荐文章于 2023-12-15 21:09:05 发布

爱吃羊的狗

最新推荐文章于 2023-12-15 21:09:05 发布

阅读量1.5k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/VIVI_CSDN01/article/details/131209485

版权

本文介绍了如何在Vue应用中使用和风天气插件。首先，用户需要在和风天气官网定制样式并获取代码。然后，在Vue的HTML结构中插入生成的代码，并在`created()`生命周期钩子中设置配置参数。最后，通过引入CSS和JS文件实现天气插件的显示。

摘要由CSDN通过智能技术生成

vue中使用天气插件

本案例使用的是和风天气插件

在这里插入图片描述

登录和风天气官网选择自己想要的样式并生成代码

https://widget.qweather.com/

在这里插入图片描述

在自己想要的模板下方点击创建

在这里插入图片描述

可以自定义自己想要的颜色字体等等，点击生成代码

在这里插入图片描述

复制生成的代码到项目中

<!-- html结构 -->
<div id="he-plugin-standard">
<!-- js -->
created() {
    window.WIDGET = {
  "CONFIG": {
    "layout": "1",
    "width": "400",
    "height": "200",
    "background": "1",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "key": "25b6b400c6884946b48ae66de5bf14cf"
  }
};
 (function (d) {
      var c = d.createElement('link');
      c.rel = 'stylesheet';
      c.href = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
      var s = d.createElement('script');
      s.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0';
      var sn = d.getElementsByTagName('script')[0];
      sn.parentNode.insertBefore(c, sn);
      sn.parentNode.insertBefore(s, sn);
    })(document);
  },