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'
};
}
}
|
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);
}
.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
|
<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
|
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])
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一样，参数不同的时候会选择直接复用路由对应的组件
解决方案：
给 routerv-view 添加key属性，破坏缓存
使用 onBeforeRouteUpdate钩子函数，做精确更新
1
2
3
4
5
6
7
8
9
10
| import { onBeforeRouteUpdate } from 'vue-router'
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,
}
}
});
|
