点击标题 标题有高亮样式
<div
v-for="(item, index) in tabList"
:key="index"
:class="{
'tabs-select': headerIndex.headerIndex.value === index,
}"
@click="tabsClick(index, item)"
>
<span>{{ item }}</span>
</div>
const tabsClick = (index: number, item: string) => {
headerIndex.headerIndex.value = index;
};
思想 : 点击的时候 将当前的序号赋值给headerIndex 这样就有了tabs-select类
坑点 : 点击会有刷新的bug 所以将headerIndex 存在外面
导入使用 import headerIndex from ‘@/store/headerIndex’
下划线动画(中间到二边散开)
<!--
* @Author: zhangchao zhang_chao96@163.com
* @Date: 2023-04-24 15:31:41
* @LastEditors: zhangchao zhang_chao96@163.com
* @LastEditTime: 2023-05-04 09:39:26
* @FilePath: \recognition_frontend\src\views\text.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css导航下划线动画效果</title>
</head>
<style>
.items {
display: flex
}
.item {
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: black;
color: white;
position: relative;
}
.item:before {
content: '';
height: 4px;
background-color: #BADFED;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
transform: scaleX(0);
transition: .3s;
}
.item:hover:before {
transform: scaleX(1);
}
</style>
<body>
<div class="items">
<div class="item">因为</div>
<div class="item">所以</div>
<div class="item">无所谓</div>
</div>
</body>
</html>
vue3 eCharts的导入
<template>
<div class="echarts" ref="trend_echart"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
const trend_echart = ref();
const initChart = () => {
let myChart = echarts.init(trend_echart.value);
myChart.setOption({ });
};
onMounted(() => {
initChart();
});
</script>
<style lang="scss" scoped></style>