八、添加和风天气插件

shaoin_2

已于 2024-01-12 10:25:16 修改

阅读量650

点赞数

分类专栏：互联网个人简历文章标签： vue.js typescript 前端

于 2023-10-17 10:35:33 首次发布

本文链接：https://blog.csdn.net/weixin_49175501/article/details/133878391

版权

互联网个人简历专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简介

给个人首页简介添加一个查看天气的免费功能插件 和风天气插件。⭐️ 欢迎访问个人的简历网站预览效果

本章涉及修改与新增的文件：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

点赞评论收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞评论收藏

shaoin_2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
八、添加和风天气插件

给个人首页简介添加一个查看天气的免费功能插件
复制链接

扫一扫

专栏目录