在逛github时发现一个非常好用的天气组件,可以实时呈现天气状况,可以应用到vue3项目中(gitHub中也有vue2版本的),只需几行代码就可实现。
一、安装组件
npm i vue3-mini-weather --save
二、在项目中引入
1、全局引入
main.js文件:
import { createApp } from 'vue'
import App from './App.vue'
import weather from 'vue3-mini-weather'
createApp(App).use(weather).mount('#app')
app.vue项目文件:
<template>
<v-mini-weather>
<template #default="{weather, icon}">
<!--插入图标-->
<v-mini-weather-icon :icon="icon"></v-mini-weather-icon>
<!--DIY内容-->
<span>{{weather.cityname}}/{{weather.weather}}/{{weather.temp}}</span>
</template>
</v-mini-weather>
</template>
2、局部引入
app.vue 项目文件:
<template>
<v-mini-weather>
<template #default="{weather, icon}">
<!--插入图标-->
<v-mini-weather-icon :icon="icon"></v-mini-weather-icon>
<!--DIY内容-->
<span>{{weather.cityname}}/{{weather.weather}}/{{weather.temp}}</span>
</template>
</v-mini-weather>
</template>
<script setup>
import { vMiniWeather, vMiniWeatherIcon } from 'vue3-mini-weather'
</script>
三、如何修改样式:
/*修改存放图标和文本的大盒子的样式*/
.weather-info {
display: flex;
align-items: center;
}
/*修改图标样式*/
.weather-icon {
width: 40px;
height: 40px;
margin-right: 10px;
}
/*修改文本样式*/
.weather-text {
color: #000;
}
效果:
源码地址:GitHub - hjiachuang/vue3-mini-weather: 基于Vue3.x开发的迷你实时天气预报组件