vue 天气插件的使用

CiL#

已于 2022-12-05 15:53:15 修改

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

于 2022-12-05 15:44:13 首次发布

本文链接：https://blog.youkuaiyun.com/KMINLIKE/article/details/128187554

最近天气转凉,闲着没事想到是否存在天气插件,然后就找到了'和风天气',我自己摸索了一下,并不难.....

和风天气官网:

https://widget.qweather.com/

我这是天气简约插件

原版

<div id="he-plugin-simple"></div>
<script>
WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "1",
    "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",
    "key": "af73b26d5f86459b8620eb68536cfad6"
  }
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>

在vue中的使用

html代码

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

css代码


::v-deep #he-plugin-simple {
  position: absolute !important;
  width: 200px;
}

script代码

  mounted () {
    // 插件调用
    window.WIDGET = {
      'CONFIG': {
        'modules': '01234',
        'background': '1',
        'tmpColor': 'FFFFFF',
        'tmpSize': '18',
        'cityColor': 'FFFFFF',
        'citySize': '18',
        'aqiColor': 'FFFFFF',
        'aqiSize': '18',
        'weatherIconSize': '24',
        'alertIconSize': '18',
        'padding': '10px 10px 10px 10px',
        'shadow': '0',
        'language': 'auto',
        'fixed': 'false',
        'vertical': 'top',
        'horizontal': 'left',
        'key': '25bcfff678a24201a5e7285e06aa0448'
      }
    }
    const 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)
  }