在和风天气插件注册自己的插件,复制以下代码,更改 key 为自己的 key,更改 script 的 src 为自己的 src,本案例使用插件为和风天气简约版
<template>
<div class="nav-header-wrapper">
<div id="he-plugin-simple"></div>
</div>
</template>
<script>
export default {
name: "weather",
created() {
window.WIDGET = {
"CONFIG": {
"modules": "1204",
"background": "5",
"tmpColor": "FFFFFF",
"tmpSize": "16",
"cityColor": "FFFFFF",
"citySize": "16",
"aqiColor": "FFFFFF",
"aqiSize": "16",
"weatherIconSize": "26",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "0",
"language": "auto",
"fixed": "false",
"vertical": "top",
"horizontal": "left",
"key": "f0ceb307717743c19c00a3ee1b4fb0f8"
}
}
let 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);
}
}
</script>
<style scoped>
.nav-header-wrapper {
/*height: 90px;*/
z-index: 99;
}
</style>