简介
给个人首页简介添加一个查看天气的免费功能插件 和风天气插件。⭐️ 欢迎访问个人的简历网站预览效果
本章涉及修改与新增的文件：index.html、First.vue 、App.vue
一、注册账号
-
登录和风天气官网，注册个人账号 和风天气官网
-
选择你想要的插件点击进入，根据个人爱好选择配置参数。最后生成代码
二、修改文件中代码
- 在
index.html中粘贴生成的配置代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
//和风天气 - 配置代码
<script>
window.WIDGET = {
"CONFIG": {
"layout": "1",
"width": "450",
"height": "150",
"background": "5",
"dataColor": "FFFFFF",
"borderRadius": "10",
"key": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" //填写生成的配置key
}
}
</script>
</body>
</html>
- 在
Firth.vue中使用插件
<template>
<div class="container">
<!-- 头像 -->
<el-avatar class="animation" :size="120" :src="avatarImg" />
<!-- 天气插件 -->
<div id="he-plugin-standard"></div>
<!-- 座右铭 -->
<div class="motto text-spacing">
<span>
<span :class="item.checked ? 'animation-hinge' : 'text-cursor'" v-for="(item, index) of textArr"
@click="clickText(index)">
{{ item.text }}
</span>
</span>
<el-divider />
</div>
<!-- 简单信息 -->
<div class="info" :class="count === 0 ? 'animation-fadeIn' : ''">
<div class="margin-tb-xl">吴少繁</div>
<div>全栈工程师</div>
<div class="margin-tb-xl flex">
<div><img src="/email.svg" class="logo" alt="Email" />1195951949@qq.com</div>
<div class="margin-lr"> | </div>
<div><img src="/phone.svg" class="logo" alt="Phone" />18226193345</div>
</div>
<div>在职 · 浙江杭州</div>
</div>
</div>
</template>
<script setup lang="ts" name="First">
import avatarImg from '../assets/avatar.png'
import { reactive, onMounted } from 'vue'
defineProps({
count: {
type: Number
},
});
const textArr = reactive([
{ text: '知微知彰，', checked: false },
{ text: '知柔知刚；', checked: false },
{ text: '富在术数，', checked: false },
{ text: '不在劳身；', checked: false },
{ text: '利在势居，', checked: false },
{ text: '不在力耕。', checked: false }
])
const clickText = (index: number) => {
textArr[index].checked = true
}
const resetArr = () => {
for (let item of textArr) {
item.checked = false
}
}
// 初始化后载入和风js代码
onMounted(() => {
let 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)
})
defineExpose({
resetArr
})
</script>
<style scoped>
.animation:hover {
animation: heartBeat;
animation-duration: 1s;
}
.animation-fadeIn {
animation: fadeIn;
animation-duration: 1.5s;
}
.info {
width: 60%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 18px;
font-family: 'KaiTi', sans-serif;
}
.logo {
margin-right: 5px;
width: 18px;
height: 18px;
}
</style>
- 在
App.vue中添加css样式，让插件在左上角展示
<style scoped>
/* ... */
::v-deep(#he-plugin-standard) {
position: absolute !important;
z-index: 100;
left: 50px;
top: 40px;
}
</style>
效果如下：
=> To Be Continued
点赞 评论 收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏
![2023年中国铝压延产量、销售收入及市场规模分析[图]](https://img-blog.csdnimg.cn/img_convert/3345b57e70a57a130acb62b47d9a76fc.png)
![2023年中国乳胶制品产量、需求量及市场规模分析[图]](https://img-blog.csdnimg.cn/img_convert/e829c59e22c472301c9226ba973f5a2d.png)
