一、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>
```<p style="line-height: 20px; color: #ccc">
        版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
        作者: 山水有轻音
        原文链接：<a href='https://juejin.im/post/6868060397094731789'>https://juejin.im/post/6868060397094731789</a>
      </p>