将中国天气网的定制的插件进行调整，并改为Vue可用

【“魔镜”系列】天气信息的显示

来源

中国天气网有定制的插件，有非常多的选择，这里放一下网址：天气插件

代码

但是我用的Vue做基础，所以将这个插件改为了Vue版的（但是还是需要在上面的网址生成）

<template>
    <div id="weather-view-he"></div>
</template>

<script>
    export default {
        name: "Weather",
        created() {
            const WIDGET = document.createElement('script');
            WIDGET.text = "WIDGET = {ID: 'RejMJQqNQR'}";
            document.body.appendChild(WIDGET);
            const s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = 'https://apip.weatherdt.com/view/static/js/r.js?v=1111';
            document.body.appendChild(s);
        },
        mounted() {
            var id = setInterval(() => {
                if(document.getElementById("weather-view-he").style.cssText
                    === "background-color:#000;width:500px;height:250px;font-size: 16px;"){
                    clearInterval(id)
                }
                document.getElementById("weather-view-he").style.cssText
                    = "background-color:#000;width:500px;height:250px;font-size: 16px;"
            },500)
        }
    }
</script>

这里多了mounted()函数，因为生成的插件虽然有深色版，但是黑的不够彻底，需要做一下样式调整，其中还包括大小和字体
可以看到是用了计时器进行样式调整，因为需要给原来的插件调整的时间，确定调整成功后会关闭计时器

此为博主副博客，留言请去主博客，转载请注明出处：https://www.baby7blog.com/myBlog/74.html