vue 天气插件

效果图

进官网生成代码

和风天气插件 | 和风天气插件产品，免费、跨终端。适配你的网站、APP、公众号和风天气插件产品，免费、跨终端。提供网页天气插件、ios天气插件SDK、android天气插件SDK、天气H5网页、公众号天气，种类包括分钟降水插件、天气预警插件、天气预报插件等。https://widget.qweather.com/vue 代码

created() {
    //和风天气插件调用
     window.WIDGET = {
      "CONFIG": {
        "layout": "2",
        "width": 230,
        "height": 270,
        "background": "1",
        "dataColor": "FFFFFF",
        "key": "1e6a2ab779504068bc84d42a4fc53885"
      }
    };
    (function (d) {
      var c = d.createElement('link')
      c.rel = 'stylesheet'
      c.href = 'https://widget.qweather.net/standard/static/css/he-standard.css?v=1.4.0'
      var s = d.createElement('script')
      s.src = 'https://widget.qweather.net/standard/static/js/he-standard.js?v=1.4.0'
      var sn = d.getElementsByTagName('script')[0]
      sn.parentNode.insertBefore(c, sn)
      sn.parentNode.insertBefore(s, sn)
      s.onload=()=>{
        //自动宽度
        setTimeout(() => {
          document.getElementById("he-plugin-standard").style.width  = "100%";
        }, 100);
      }
    })(document)
  },