在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换成自己的

效果:

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐