在vue中使用天氣插件

中國天氣網站https://cj.weather.com.cn/

應用：

<div id="weater">
  <div id="weather-v2-plugin-standard" ref="weather"></div>
  <remote-script src="https://apip.weatherdt.com/standard/static/js/weather-standard-common.js?v=2.0"></remote-script>
</div>

<script>
window.WIDGET = {
  CONFIG: {
    "layout": 1,
    "width": "206",
    "height": "200",
    "background": 5,
    "dataColor": "4A4A4A",
    "language": "zh",
    "borderRadius": 5,
    "key": "SoHlL8u04A"
  }
}
import Vue from 'vue'
Vue.component('remote-script', {   // vue動態生成script (在html中當成組件來用)
    render: function (createElement) {
        var self = this;
        return createElement('script', {
            attrs: {
                type: 'text/javascript',
                src: this.src
            },
            on: {
                load: function (event) {
                    self.$emit('load', event);
                },
                error: function (event) {
                    self.$emit('error', event);
                },
                readystatechange: function (event) {
                    if (this.readyState == 'complete') {
                        self.$emit('load', event);
                    }
                }
            }
        });
    },
    props: {
        src: {
            type: String,
            required: true
        }
    }
})
export default {
    name: "Sidebar",
    data() {
      return {}
    },
}
</script>

生成如下圖：

總結

以上是生活随笔為你收集整理的vue -- 加载天气插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。