vue引入中国天气插件

vue引入中国天气插件

vue引入中国天气插件

效果图：

插件网站链接：天气插件平台
樱花背景特效教程链接：樱花背景特效教程

上代码

在vue的template中

<div id="weather"><div id="weather-v2-plugin-standard"></div>
</div>

mounted中
(具体的代码需要你自己去网站生成，以下是我的代码)

mounted(){//天气插件window.WIDGET = {CONFIG: {"layout": 1,"width": "300","height": "150","background": 1,"dataColor": "FFFFFF","language": "zh","borderRadius": 5,"city": "CN101250106","key": "6yYvSSecPy"}};(function (d) {var c = d.createElement('link')c.rel = 'stylesheet'c.href = '.css?v=2.0'var s = d.createElement('script')s.src = '.js?v=2.0'var sn = d.getElementsByTagName('script')[0]sn.parentNode.insertBefore(c, sn)sn.parentNode.insertBefore(s, sn)})(document)
}

css（可有可无）

#weather{max-width: 300px;max-height: 150px;margin: 10px auto 30px;text-align: center;}#weather:hover{opacity:0.8;transform: scale(1.1);transition: all 1s ease 0s ;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}