目录
前言:
由于我写css实在太慢,布局结构再加上刚接触vue时间不多,特写此博客记录下css样式和布局心得,如有可优化的地方,请不吝赐教!
正文:
1、首页导航栏点点击变色+跳转
先看下效果:
html:
<div class="nav_list">
<ul >
<li v-for="(item,index) in MenuData" :class="Index==index+1?'menu_check':''" :key="item+index" @click="gotoPath(item.path,index+1)" >{{item.NAME}}</li>
</ul>
</div>
变量:
MenuData: [{
NAME: "生态资源",
path: "/sysStzy"
}, {
NAME: "生态管护",
path: "/sysxhdt"
}, {
NAME: "生态科研",
path: "/stkymain"
}, {
NAME: "生态评估",
path: "/sysStpg"
}, {
NAME: "社区共管",
path: "/sdc"
}, {
NAME: "执法台账",
path: "/zfda"
}, {
NAME: "综合管理",
path: "/zhgl"
}, {
NAME: "生态文化",
path: "/ls"
}],
Index: 0,
js方法:
gotoPath: function (page, index) {
this.Index = index;
sessionStorage.setItem("Index", index);
this.$router.push({
path: page
})
},
css样式:
.menu_check{
color: #B7E4FA !important;
}
上面其实就是vue中绑定一个data,然后遍历创建元素,然后点击通过下标进行跳转然后在绑定样式类
2.列表ui li 循环 后 ,点击某一个li 变色
<ul v-model="layerTitle" v-show="ztfx_icon=='static/images/comparisonOfChanges/ztfxT.png'">
<li :style="{'background-color':(layerTitle==item.name)?'#018F77':''}" @click="getLayerTitle(item.name)" v-for="(item,index) in layerListInfo">{{ item.name }}</li>
</ul>
实现方法其实用的是绑定的style ,记录下这种写法
3.点击,更换图片,并显示某些内容
<li class="li_top">
<div @click="showZtfx" class="li_top_div">
<img :src=ztfx_icon alt=""><span
:style="{'color':(ztfx_icon=='static/images/comparisonOfChanges/ztfxT.png'?'#62FCEB':'#05B5C6')}">专题分析</span>
</div>
<ul v-model="layerTitle" v-show="ztfx_icon=='static/images/comparisonOfChanges/ztfxT.png'">
<li :style="{'background-color':(layerTitle==item.name)?'#018F77':''}" @click="getLayerTitle(item.name)" v-for="(item,index) in layerListInfo">{{ item.name }}</li>
</ul>
</li>
ztfx_icon: "static/images/comparisonOfChanges/ztfxF.png",
showZtfx: function () {
let that = this;
if (that.ztfx_icon == "static/images/comparisonOfChanges/ztfxF.png") {
that.ztfx_icon = "static/images/comparisonOfChanges/ztfxT.png"
} else {
that.ztfx_icon = "static/images/comparisonOfChanges/ztfxF.png"
}
},
全程都是根据图片地址来进行判断的,定义一个变量为图片的地址,然后点击的时候改变这个变量的值,通过判断这个变量来进行元素的显隐
写的简洁,逻辑可能有点复杂,特此记录下
4.element ui table 更改样式
(1)修改鼠标悬浮表格颜色
.dbTable /deep/ tbody tr:hover > td {
background-color: #1A7179 !important;
color: white;
}
(2)表格头部颜色
<el-table :data="dbData" border style="width: 100%;background-color: #1A2A2D"
:header-cell-style="{background:'#01575F'}">
<el-table-column v-for="(item,index) in dbTr" :prop="item.code" :key="index"
:label="item.label"></el-table-column>
</el-table>
用到的是 :header-cell-style="{background:'#01575F'}"
(3)表格字体颜色,样式
.dbTable /deep/ .el-table th > .cell {
text-align: center;
}
.dbTable /deep/ .el-table thead {
color: #ffffff;
}
.dbTable /deep/ .el-table__empty-text {
color: #ffffff;
}
.dbTable /deep/ .el-table td, .el-table th {
text-align: center;
background-color:#042830;
color: white;
}
(4)修改表格边框颜色
.dbTable /deep/ .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
border-color: #01575F;
}
.dbTable /deep/ .el-table--border::after, .el-table--group::after, .el-table::before{
background-color: #01575F;
}
以上所有的 .dbTable 是包裹在table外的div的class 名称,不多叙述
5.表格 行数列数不确定,循环表格
定义2个数组,一个循环列(即表头),一个循环行
循环列(即表头)
<el-table :data="dbData" border style="width: 100%"
:header-cell-style="{background:'#01575F'}">
<el-table-column v-for="(item,index) in dbTr" :prop="item.code" :key="index"
:label="item.label"></el-table-column>
</el-table>
dbTr: [
{label: '土地类型', code: 'leixing'},
{label: '变更(公顷)', code: 'biangengM'},
],
dbData: [
{leixing: '111', biangengM: '2222'},
{leixing: '333', biangengM: '4444'},
]
其中表头的code要和行中数据的数组 key对应
6.element ui 表格 某一列根据内容修改样式
<el-table :cell-style="changeCell">
</el-table>
changeCell: function ({row, column, rowIndex, columnIndex}) {
if (row.status == '在线' && columnIndex == 6) { //在线
return 'color: #67C23A;'
} else if (row.status == '休眠' && columnIndex == 6) {
return 'color: #F56C6C;'
}
},
el-table种有 cell-style 设置某一列的样式
7、echart 在vue中自适应 resize
myLogLine.setOption(option);
window.addEventListener("resize", () => { myLogLine.resize();});
myLine.setOption(option);
window.addEventListener("resize", () => { myLine.resize();});
8、echart X / Y 轴添加箭头
axisLine: {
show: true,
symbol:['none','arrow'],
symbolOffset: 0,
symbolSize: ['5', '5'],
},
效果图: