一、vue样式穿透
1.stylus的样式穿透 使用：（>>>）
外层类 >>> 想要修改的类名 { 要修改的样式 } 例：.wrapper >>> .el-card__header { border-bottom: none }
2.sass和less的样式穿透 使用：（/deep/）
外层类 /deep/ 想要修改的类名 { 要修改的样式 } 例：.wrapper /deep/ .el-card__header { border-bottom: none }
3.通用样式穿透 使用：（::v-deep）
::v-deep 想要修改的类名 { 要修改的样式 } 例：::v-deep .el-card__header { border-bottom: none }
二、echarts图表的使用
1.echarts图表自适应和缩放
series: [{//系列列表,通过type决定自己的图表类型 name: ‘中国‘, zoom:1.2, --缩放比例 }] window.onresize = myChart.resize; --移动端适配
2.echarts图表文字太长如何换行
在series:里面的label中，添加formatter方法
方法一：formatter(v){ let text = v.name return text.length < 4 ?text :`${text.slice(0,4)}\n${text.slice(4)}` }
方法二： formatter(x) { var strs = x.data.name.split(''); //字符串数组 var str = '' for(var i = 0, s; s = strs[i++];) { //遍历字符串数组 str += s; if(!(i % 4)) str += '\n'; //按需要求余 } return str },
3.v-charts柱状图表的配置
legend-position="bottom" 配置顶部的位置的属性
图表配置
chartExtend:{ legend: { show: true, bottom: "bottom", selectedMode:false //去掉图例上的点击事件 }, color: ["#3571FF"], series: { barWidth: 15 }, tooltip : { //在 tooltip中添加 axisPointer: { type: 'none' }可以去除指示线。 trigger: 'axis', axisPointer: { type: 'none' } }, grid:{ // Echarts 如何调整 legend 和图表的间距 top:'10%', bottom:'15%' } }
4.环形图表配置
saffData: { title:'', --图表顶部标题 columns: ['活期存款', '数量'], rows: [ { '活期存款': '活期存款', '数量': 20}, { '活期存款': '基金', '数量': 15 }, { '活期存款': '定期存款', '数量': 15}, { '活期存款': '理财', '数量': 30}, { '活期存款': '股金', '数量': 20 }, ], daymoney:'100', cunmoney:'300', tsmoney:'200', sunum:'180', ranking:'7' }, chartExtend:{ legend: { show: true, bottom: "bottom", selectedMode:true, width: "100%", icon: "circle", x: "center", y: "bottom", textStyle: { color: "#8C8C8C" } }, color: ["#FFCA1A","#28CCB4","#3571FF","#E54D4D","#B190F0"], tooltip: { trigger: 'item', formatter: function(parms) { var str = parms.marker + '' + parms.data.name + '</br>' + '数量：' + parms.data.value + '</br>' + '占比：' + parms.percent + '%'; return str } }, }, chartSetting: { hoverAnimation: true, radius: [40, 70], offsetY: 90 },
三、vue点击事件判断执行
<div @click="clickFlag && addGoodsHandler()"> 添加产品 </div>
clickFlag ---的状态为true addGoodsHandler点击事件才执行，否则不执行
四、vue的插槽solt如何使用
如一个公共组件的外层壳子相同，但是中间的内容不同，可以在父组件里自定义内容， 然后在子组件里用solt进行接收 如父组件
<Child><!--【1】首先把child写成双标签样式，把要插入的内容放双标签中间--> <p>插入子组件的内容</p> </Child>
子组件
<div class="child"> <span>子组件</span> <slot/> </div>
