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](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=)
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, } } });
|