【vue】天气插件

效果图

1. html

<div class="whether">
  <div id="he-plugin-simple"></div>
</div>

2. script

mounted(){
   window.WIDGET = {
       "CONFIG": {
           "modules": "01234",
           "background": "5",
           "tmpColor": "FFFFFF",
           "tmpSize": "16",
           "cityColor": "FFFFFF",
           "citySize": "16",
           "aqiColor": "FFFFFF",
           "aqiSize": "16",
           "weatherIconSize": "24",
           "alertIconSize": "18",
           "padding": "10px 10px 10px 10px",
           "shadow": "0",
           "language": "auto",
           "fixed": "false",
           "vertical": "top",
           "horizontal": "left",
           "city":'CN101220104',
           "float":"false",
           "key": "f70898de9e0b48eda4380c31d69dfd1d"
       }
   }
   let script = document.createElement('script')
   script.type = 'text/javascript'
   script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0'
   document.getElementsByTagName('head')[0].appendChild(script)
},

3. css

.whether{
    position: relative;
    z-index: 9999;
}

参考链接
https://widget.qweather.com/
https://blog.csdn.net/qq_40390762/article/details/117959607