vue3实现高德地图天气小组件
作者：shix .
这篇文章主要为大家详细介绍了如何使用vue3实现一个高德地图天气小组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
效果图
使用方法
<weather-view type="rect-solid" :borderColor="['#7ACAEC', '#068BBD']"></weather-view>
天气图标文件夹 本来想全弄成svg动态图片的,但找了很久都没找到对应的图(只找到了几个),于是就暂时搁置了
组件全代码如下 注意getWeather方法中的高德天气key需要改成自己的
<template>
<div class="dv-component-weather" :style="{ width: width, height: height }">
<div class="dv-time">
<span v-text="time"></span>
<span v-text="date"></span>
</div>
<div class="dv-weather">
<img :src="icon" />
<div>
<span v-text="weather"></span>
<span v-text="temperature" class="temperature"></span>
<span v-text="city"></span>
</div>
</div>
<div class="dv-box-border">
<dv-border-box-13 v-if="type == 'normal'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-13>
<dv-border-box-12 v-if="type == 'rect-horn'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-12>
<dv-border-box-10 v-if="type == 'rect-horn-big'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-10>
<dv-border-box-8 v-if="type == 'rotate'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-8>
<dv-border-box-9 v-if="type == 'rect'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-9>
<dv-border-box-7 v-if="type == 'shadow'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-7>
<dv-border-box-2 v-if="type == 'rect-solid'" :color="borderColor" :backgroundColor="backColor"></dv-border-box-2>
</div>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
/**
* 获取指定的cookie值
* @param {string} name 要查询的Cookie字段名
*/
function getCookie(name) {
var arr,
reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if ((arr = document.cookie.match(reg))) return decodeURIComponent(arr[2]);
else return "";
}
/**
* 删除指定的cookie值
* @param {string} name 要删除的Cookie字段名
*/
function removeCookie(name) {
let date = new Date();
date.setTime(date.getTime() - 1);
document.cookie = name + "=''" + "; expires=" + date.toUTCString();
}
/**
* 格式化日期字符串
* @param {string} 日期字符串 2021-04-10或可以转换为日期的其他格式
* @param {object} 配置项:hasTime-是否带有时间 datelabel-日期分隔符 timelabel-时间分隔符 separator-日期与时间的分隔符
*/
function dateFormatter(date, options) {
options = options ? options : {};
options.datelabel = options.datelabel ? options.datelabel : "-"; //日期分隔符
options.timelabel = options.timelabel ? options.timelabel : ":"; //时间分隔符
options.separator = options.separator ? options.separator : " "; //日期时间分隔符
options.hasTime = options.hasTime ? options.hasTime : false; //返回值是否带时间
options.hasWeek = options.hasWeek ? options.hasWeek : false; //返回值是否带星期
options.hasTimeUnit = options.hasTimeUnit ? options.hasTimeUnit : false; //是否使用时间单位
options.hasDateUnit = options.hasDateUnit ? options.hasDateUnit : false; //是否使用日期单位
//是否返回格式化后的数组 若为true,则返回值为一个对象,formatter为自定义格式,array为格式化后的字符串信息
options.hasArray = options.hasArray ? options.hasArray : false;
let d = new Date(date);
let year = d.getFullYear();
let month = d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
let minute = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
let second = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
let formatterArray = [];
let formatter = "";
if (options.hasDateUnit == true) {
formatter = year + "年" + month + "月" + day + "日";
} else {
formatter = year + options.datelabel + month + options.datelabel + day;
}
formatterArray.push(formatter);
if (options.hasTime == true && options.hasTimeUnit == false) {
formatter += options.separator + hours + options.timelabel + minute + options.timelabel + second;
formatterArray.push(hours + options.timelabel + minute + options.timelabel + second);
} else if (options.hasTime == true && options.hasTimeUnit == true) {
formatter += options.separator + hours + "时" + minute + "分" + second + "秒";
formatterArray.push(hours + "时" + minute + "分" + second + "秒");
} else if (options.hasTime == false && options.hasTimeUnit == false) {
formatterArray.push(hours + options.timelabel + minute + options.timelabel + second);
} else if (options.hasTime == false && options.hasTimeUnit == true) {
formatterArray.push(hours + "时" + minute + "分" + second + "秒");
}
let weekList = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
if (options.hasWeek == true) {
formatter += " " + weekList[d.getDay()];
formatterArray.push(weekList[d.getDay()]);
} else {
formatterArray.push(weekList[d.getDay()]);
}
if (options.hasArray == true) {
return {
formatter: formatter,
array: formatterArray,
};
}
return formatter;
}
export default {
name: "weatherView",
setup(prop, ctx) {
let time = ref("");
let date = ref("");
let weather = ref("");
let temperature = ref("");
let city = ref("");
let icon = ref("");
let getDateTime = () => {
let d = dateFormatter(new Date(), { hasArray: true });
time.value = d.array[1];
date.value = d.array[0] + " " + d.array[2];
};
let setWeather = (data) => {
city.value = data.city;
weather.value = data.weather;
temperature.value = data.temperature + "℃";
icon.value = "./images/weather/" + data.weather + ".svg";
};
let getWeather = () => {
let xhr = new XMLHttpRequest();
// 个人key(每天30W次,每秒200并发): 8bed5b0020bc38b52cfa6166a7babffe
xhr.open("get", "http://restapi.amap.com/v3/weather/weatherInfo?city=230100&key=此处填写自己的高德天气接口的key值");
xhr.onload = (e) => {
if (e.target.readyState == 4) {
let res = JSON.parse(e.target.responseText);
if (res.infocode === "10000") {
res = res.lives[0];
setWeather(res);
let info = {
city: res.city,
weather: res.weather,
temperature: res.temperature,
};
let delay = new Date();
delay.setHours(delay.getHours() + 1);
document.cookie = "_dv_gdweather=" + JSON.stringify(info) + "; expires=" + delay.toUTCString();
} else {
console.log("weather_error:", "infocode is " + res.infocode + "!");
}
}
};
xhr.send();
};
onMounted(() => {
getDateTime();
let _dv_gdweather = getCookie("_dv_gdweather");
if (!_dv_gdweather) {
getWeather();
} else {
setWeather(JSON.parse(_dv_gdweather));
}
// 动态设置时间-每秒变化
setInterval(() => {
getDateTime();
}, 1000);
// 动态设置天气-每小时
setInterval(() => {
getWeather();
}, 1000 * 60 * 60 + 1);
});
return {
icon,
time,
date,
weather,
city,
temperature,
};
},
props: {
type: {
type: String,
default: "normal",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
borderColor: {
type: Array,
default: () => {
// return ["#295B6B", "#3C538F"];
return ["#295B6B"];
},
},
backColor: {
type: String,
default: "transparent",
},
},
};
</script>
<style lang="scss" scoped>
$font: 0.18rem;
.dv-component-weather {
font-size: $font;
// color: #fff;
color: rgb(188, 239, 243);
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.15rem;
box-sizing: border-box;
.dv-box-border {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.dv-time {
// font-size: #{$font * 1.2};
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 53%;
white-space: nowrap;
position: relative;
z-index: 2;
span {
&:first-child {
font-size: #{$font * 1.8};
}
&:last-child {
font-size: #{$font * 1};
}
}
}
.dv-weather {
height: 100%;
width: 47%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: #{$font * 0.8};
position: relative;
z-index: 2;
img {
width: 0.7rem;
height: 0.7rem;
}
div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
span {
margin-bottom: 0.05rem;
&:first-child {
font-size: #{$font * 0.7};
}
&:last-child {
font-size: #{$font * 0.7};
margin: 0;
}
}
}
}
}
</style>
到此这篇关于vue3实现高德地图天气小组件的文章就介绍到这了,更多相关vue3天气组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！