Using Zephyr Weather Forecast in Vue
- Step 3: Create a new component (.vue file) and write the following code in it
- The precautions are written in the comments in the code block. Only the WIDGET object needs to be changed and nothing else needs to be moved.
新的组件(.vue文件) 中
<template>
<div>
<div id="he-plugin-standard" />
</div>
</template>
<script>
export default {
created() {
window.WIDGET = { //这里的WIDGET 可以直接整个复制你生成的代码
'CONFIG': {
'layout': '1',
'width': '1630',
'height': '120',
'background': '1',
'dataColor': 'FFFFFF',
'borderRadius': '20',
'city': 'CN101280605', //我这里的城市固定了 你也可以删掉
'key': '1715b8c0e1a547c68cea1e401760ed34' //key值 写自己的 自己生成的key值
}
}
var script = document.createElement('script')
script.type = 'text/javascript'
script.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'
document.getElementsByTagName('head')[0].appendChild(script)
}
}
</script>
<style>
</style>
- The fourth step is to import where it is used . For example : import hefentianqi from '@/views/subject/hefentianqi.vue' Do not copy my import and import according to the location of your own file
- Step 5 Registration
注册
components: {
hefentianqi
},
- Step 6 After importing the registration, you can use it wherever you want <hefentianqi /> Remember to import the registration! ! !