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 = 'https://apip.weatherdt.com/standard/static/css/weather-standard.css?v=2.0'
                var s = d.createElement('script')
                s.src = 'https://apip.weatherdt.com/standard/static/js/weather-standard.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;
    }