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并发): 8bed5b0020bc38b52cfa6166a7babffexhr.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>