1.nginx跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
server {
listen 90;
server_name localhost;

location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#解决跨域问题,核心代码
location ^~ /api/ {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://localhost:8080;
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}

}

2.在vue3项目中控制element-ui左侧菜单的展开和收起

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<template>
<div :v-model='isCollapse'>
<el-icon v-if="isCollapse" @click="change"><DArrowRight /></el-icon>
<el-icon v-else @click="change"><DArrowLeft /></el-icon>
</div>

<el-menu
default-active="2"
class="el-menu-vertical-demo"
:collapse="isCollapse"
>
<el-sub-menu index="1">
<template #title>
<el-icon><Location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group>
<template #title><span>Group One</span></template>
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item two</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title><span>item four</span></template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<template #title>Navigator Two</template>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><Document /></el-icon>
<template #title>Navigator Three</template>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<template #title>Navigator Four</template>
</el-menu-item>
</el-menu>
</template>

<script setup>
import { ref } from 'vue'
import {
DArrowLeft,
DArrowRight,
Document,
Menu as IconMenu,
Location,
Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const change=()=>{
isCollapse.value=!isCollapse.value
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
</style>

3.在vue3中使用elementui中的cell-style控制表格中某行或者某单元格样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-table :cell-style="tableRowStyle" :data="tableData" table-layout:auto style="width: 100%;margin-top: 2vh" height="54vh"
scrollbar-always-on
border >
<!-- 当type的值是index的时候表示序号 -->
<el-table-column type="index" label="序号" prop="index" width="60"/>
<el-table-column label="报修时间" prop="startDate" sortable/><!--sortable进行顺序排序 -->
<el-table-column label="报修位置" prop="location"/>
<el-table-column label="报修内容" prop="context"/>
<el-table-column label="报修人 " prop="repairPerson"/>
<el-table-column label="区域" prop="repairArea"/>
<el-table-column label="受理状态" prop="flowerState"/>
<el-table-column label="修复状态" prop="repairState"/>
<el-table-column label="修复时间" prop="repairTime"/>
<el-table-column label="修复人" prop="repairHandelPerson"/>

</el-table>
1
2
3
4
5
6
7
const tableRowStyle = (data) => {
if (data.row.repairState == "正在修复"&&data.column.property=="repairState") {
return {
color:'red'
};
}
}

img

4.让div盒子铺满全屏

在操作过程中我们发现,在全屏中使用div盒子的时候,在div盒子的左边和上面有一个8px的空隙,需要将其重置为0

1
2
3
4
*{/* CSS Reset,解决存在的间距问题 */
margin : 0;
padding : 0;
}

5.渐变色

1
2
/* 渐变色 */
background: linear-gradient(to bottom right, rgb(255, 2, 124), rgb(0, 255, 200)) no-repeat;

渐变色

6.鼠标反应

1
2
3
4
5
6
7
8
9
10
/* 聚焦时变化 */
.button:hover {
background-color: rgba(123, 250, 252, 0.4);
}

/* active点击后改变 */
/* :focus 元素被点击后变色,且颜色在点击后不消失 */
.button:active {
background-color: rgba(193, 192, 192, 0.4);
}

7.设置element-ui的某些样式

打开开发者模式,找到对应的class名称,进行设置

1
2
3
4
5
6
.el-input .el-input__wrapper {
margin: 0 auto;
border-radius: 40px 40px 40px 40px;
background-color: rgb(255, 255, 255, 0.4);
}

8.密码框显示小眼睛

1
2
3
4
<!-- show-password在密码旁边显示小眼睛 -->
<el-form-item>
<el-input placeholder="请输入密码" type="password" v-model="formLabelAlign.region" show-password />
</el-form-item>

9.设置圆角

1
border-radius: 40px 40px 40px 40px;

10自动换行

1
2
3
display: flex;
flex-wrap: wrap;
justify-content: start;

11.计算时间

1
2
3
4
5
6
7
8
9
10
11
//sDate1和sDate2是2002-12-18格式  
var now = new Date();
var sDate2 = "2024-04-18";
var nowData = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
var aDate, oDate2, iDays
aDate = nowData.split("-")
nowData = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]) //转换为12-18-2002格式
aDate = sDate2.split("-")
oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
iDays = parseInt(Math.abs(nowData - oDate2) / 1000 / 60 / 60 / 24) //把相差的毫秒数转换为天数

12.分隔线

1
<hr class="hr-double-arrow">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.hr-double-arrow {
color: #7171d5;
border: double;
border-width: 3px 5px;
border-color: #5b336b transparent;
height: 1px;
overflow: visible;
margin-left: 20px;
margin-right: 20px;
position: relative;
}

.hr-double-arrow:before,
.hr-double-arrow:after {
content: '';
position: absolute;
width: 5px;
height: 5px;
border-width: 0 3px 3px 0;
border-style: double;
top: -3px;
background: radial-gradient(2px at 1px 1px, currentColor 2px, transparent 0) no-repeat;
}

.hr-double-arrow:before {
transform: rotate(-45deg);
left: -20px;
}

.hr-double-arrow:after {
transform: rotate(135deg);
right: -20px;
}

13.md文件渲染

1
npm i html-loader markdown-loader --save

14安装出现报错

1
this[kHandle] = new _Hash(algorithm, xofLen);

出现原因:由于更新,导致node版本不匹配,要将该项目的启动选项进行修改

解决办法

1
$env:NODE_OPTIONS="--openssl-legacy-provider"

15.路由缓存问题

路由缓存问题解决

缓存问题:当路由path一样,参数不同的时候会选择直接复用路由对应的组件
解决方案:

  1. 给 routerv-view 添加key属性,破坏缓存

    1
    :key="$route.fullPath"
  2. 使用 onBeforeRouteUpdate钩子函数,做精确更新

1
2
3
4
5
6
7
8
9
10
import { onBeforeRouteUpdate } from 'vue-router'

// 目标:路由参数变化的时候 可以把分类数据接口重新发送
//to中为将要跳转时的最新路由
onBeforeRouteUpdate((to) => {
// 存在问题:使用最新的路由参数请求最新的分类数据
//通过最新的路由去请求数据
getCategory(to.params.id)
})

16.当切换路由时,在不同页面的滚动深度可能受到影响,需要在重新定义他的滚动高度1

1
2
3
4
5
6
7
8
9
10
11
//创建路由器
const router = createRouter({
history: createWebHistory(),
routes: routes,
//滚动条返回顶部
scrollBehavior () {
return {
top :0,
}
}
});

17element-ui导航菜单高亮问题

在使用element-ui的meun时候,通过官方文档。我们可以知道可以给el-menu添加router属性,便可以在el-menu-item中设置index为路由地址,便可以实现点击跳转到指定路由

这样做可以实现路由跳转,但是刷新浏览器,会跳转默认路由。而不是我们离开时候的路由。

这时候我们就要将default-active设置为”$router.name”让其自动获取路由进行匹配,这时候我们需要将每个路由起一个名字

img

添加图片注释,不超过 140 字(可选)

将跳转路由的index名字与路由中的名字保持一致

img

添加图片注释,不超过 140 字(可选)

现在,我们刷新界面,会发现,虽然页面刷新了。但是路由没变,而且高亮还在

18.设置表头高亮

1
:header-cell-style="{background:' #e7e1fb'

image-20241006103954815