在vue中使用和风天气插件

在vue中使用天气插件

插件网址:和风天气

选择自己需要的插件、生成代码复制即可
在这里插入图片描述

在 vue 中使用:

<template>
  <div>
    <div id="he-plugin-standard"></div>
  </div>
</template>

<script>
export default {
  created() {
    window.WIDGET = {
      "CONFIG": {
        "layout": "2",
        "width": 280,
        "height": 360,
        "background": "1",
        "dataColor": "FFFFFF",
        "borderRadius": "10",
        "key": "17ca4c40f39b42e7b12asda34a21c34e"  //这里换成自己的key!
      }
    }
    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);
  }
}
</script>

<style>
    
</style>

注意: 上面key换成自己的

效果:

在这里插入图片描述

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值