- vue引入重写样式修改Element-UI表格背景色以及悬浮背景色
- 前言
- 一：新建一个放重写样式的less文件
- 二：重写样式
- 三：vue组件引入重写样式
- 效果图
- 解决vue使用element组件无法绑定鼠标事件
- 前言
- 解决方法
- Echart折线图多参数修改：自适应窗口大小+修改toolbox颜色+修改x，y轴颜色，坐标大小和颜色等等
- 前言
- 最终效果图
vue引入重写样式修改Element-UI表格背景色以及悬浮背景色
前言
在用vue框架进行开发的时候，使用现成的UI组件库是十分方便的，但方便归方便，现成的它仍然不能满足我们所有的需求，为了达到预期的效果，我们仍需加以修改其样式，这里我采用的是将重写样式放入一个less文件中，再在需要修改样式的组件里引入从而达到修改该组件样式的效果。
一：新建一个放重写样式的less文件
二：重写样式
这里我修改的是表格的背景色，边框色，以及悬浮背景色
.el-table{
background-color: rgba(0,0,0,0.25);
color: #FFFFFF;
border-color: rgb(128,128,128);
*{
border-color: rgb(128,128,128) !important;
}
.el-table__header-wrapper{
tr{
background-color: rgba(0,0,0,0.25);
th{
color: #FFFFFF;
background-color: rgba(0,0,0,0.4);
}
}
}
.el-table__body-wrapper{
tr{
background-color: rgba(0,0,0,0.25);
&:hover>td{ //修改悬浮背景色
background-color: rgba(0,0,0,0.3);
}
}
}
}三：vue组件引入重写样式
这里我采取的是@import引入
效果图
解决vue使用element组件无法绑定鼠标事件
前言
最近使用element的tag组件来做移动组件效果，其中涉及到给tag组件绑定mousedown的事件，但怎么绑定都不起作用，通过和其他标签绑定该事件比较发现：问题就出在tag组件上。
解决方法
绑定事件时添加.native修饰符绑定原生事件即可。
<el-tag
v-for="tag in collapse.tags"
:key="tag"
v-show="tag"
style="z-index: 55;"
@mousedown.native="moveTag"
>
{{tag}}
</el-tag>moveTag(){
console.log('a')
},打印图：
Echart折线图多参数修改：自适应窗口大小+修改toolbox颜色+修改x，y轴颜色，坐标大小和颜色等等
前言
最近在准备一个比赛，需要使用的数据图像化处理，所以采用了ECharts的折线图，其中的参数太多了，为了找到适合自己的效果图，不断调试修改参数，最终得到一个还算可以的折线图，就在此贴出来吧。
最终效果图
*注：背景是整个页面的背景，我的代码只是修改了折线图的一些配置。
pc：
mobile：(忽略右上那个黑色方块，我是用来打开另一个组件的)
代码：
<template>
<div class="myLine">
<div :id="myLineId" class="line">
</div>
</div>
</template>
<script>
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
require('echarts/lib/component/title')
require('echarts/lib/component/toolbox')
export default {
data () {
return {
Line:'', //折线图图对象
}
},
mounted () {
setTimeout(()=>{
this.drawLine()
},200)
},
props:{
myLineId:{ //因为组件复用，所以id都是外面传进来的
type:String,
required:true
}
},
methods: {
//绘制图表
drawLine(){
console.log(this.myLineId)
this.Line = echarts.init(document.getElementById(this.myLineId))
var _this = this
window.addEventListener("resize",function () {
_this.Line.resize();
})
this.Line.setOption({
title: {
text: ''
},
color:['#2db7f5','#ff6600','#808bc6'],
tooltip: {
trigger: 'item' // axis item none三个值
},
legend: {
data: $('.myLine').width()>=400?['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']:[]
},
grid: {
left: '1%',
right: '1%',
bottom: '1%',
containLabel: true
},
toolbox: {
show: true,
feature: {
magicType: {//动态类型切换,包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。
type: ['bar', 'line','stack','tiled'],
},
saveAsImage: {//保存图片
show: true,
},
},
iconStyle:{
normal:{
color:'#FFF',//设置颜色
}
}
},
xAxis: {
type: 'category',
name:'横轴名字',
nameTextStyle:{ //横轴名字/大小/宽度
fontWeight:600,
fontSize:$(window).width>768?16:14,
},
axisLabel: {
show: true,
textStyle: { //坐标颜色/大小
fontSize:$(window).width>768?14:10,
color:'#FFF'
}
}, //X轴坐标样式
axisLine: { //X轴颜色
lineStyle: {
color: '#FFF',
}
},
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: { //Y轴坐标样式
type: 'value',
name:'纵轴名字',
nameTextStyle:{ //纵轴名字/大小/宽度
fontWeight:500,
fontSize:$(window).width>768?16:14
},
axisLabel: {
show: true,
textStyle: { //坐标颜色/大小
fontSize:$(window).width>768?14:10,
color:'#FFF'
}
},
axisLine: { //Y轴颜色
lineStyle: {
color: '#FFF',
}
},
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
smooth:true, //线条平滑
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
smooth:true, //线条平滑
data: [220, 482, 191, 234, 1090, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
smooth:true, //线条平滑
data: [150, 732, 201, 154, 1090, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
smooth:true, //线条平滑
data: [320, 332, 901, 334, 390, 1330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
smooth:true, //线条平滑
data: [120, 532, 701, 934, 1290, 1330, 1320]
}
]
})
}
},
watch:{
}
}
</script>
<style lang="less">
.myLine{
height: 100%;
width: 100%;
.line{
height: 340px;
overflow: hidden;
}
}
@media screen and(max-width: 767px){ //为了适应小屏幕的效果
.myLine{
.line{
height: 320px;
overflow: hidden;
}
}
}
</style>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
