Vue FAQ, Style penetration, use of e-Charts, etc

First, VUE style penetration

1. Stylus :(>>>)

Outer class >>> Class name you want to change {style you want to change} example:.wrapper >>> .el-card__header {
	border-bottom: none
}
Copy the code

2. Sass and less style penetration :(/deep/)

Outer class /deep/ class name you want to change {style you want to change} example:.wrapper /deep/ .el-card__header {
border-bottom: none
}
Copy the code

3. Universal style penetration use: (:: V-deep)

::v-deep: class name to change {style to change} Example :: :v-deep. El-card__header {border-bottom: none}Copy the code

2. Use of Echarts charts

1. Echarts chart adaptive and scaling

series: [{// A series of lists, using type to determine their own chart type
      name: 'China',zoom:1.2, -- scale}]window.onresize = myChart.resize; -- Mobile terminal adaptationCopy the code

2. How to wrap the echarts chart if the text is too long

In the label inside series:, add the formatter method

Method one:formatter(v){
		let text = v.name
		return text.length < 4? text :`${text.slice(0.4)}\n${text.slice(4)}`
	}
Copy the code

Method 2:formatter(x) {
            var strs = x.data.name.split(' '); // Array of strings
            var str = ' '
            for(var i = 0, s; s = strs[i++];) { // Iterate over the array of strings
                str += s;
                if(! (i %4)) str += '\n'; // Demand on demand
            }
            return str
        },
Copy the code

3. Configuration of v-charts

Legend – Position =”bottom” Configures the attributes for the top position

The graph configuration

chartExtend:{
             legend: {
                show: true.bottom: "bottom".selectedMode:false  // Remove the click event from the legend
              },
              color: ["#3571FF"].series: {
                barWidth: 15
              },
              tooltip : {         // Add axisPointer: {type: 'None'} to toolTip to remove the indicator lines.
                  trigger: 'axis'.axisPointer: {
                      type: 'none'}},grid: {// How can Echarts adjust the spacing between legend and chart
                 top:'10%'.bottom:'15%'
            },
            xAxis: {
              data: ["Shirt"."Cardigan".Chiffon sweater."Pants"."High heels"."Socks"].splitLine: {show: false},// Remove the grid lines
              splitArea : {show : true}// Keep the grid area
           },
           yAxis: {
             splitLine: {show: false},// Remove the grid lines
             splitArea : {show : true}// Keep the grid area}},Copy the code

4. Ring chart configuration

saffData: {
            title:' '"-- the title at the top of the chartcolumns: ['Current Deposit'.'number'].rows: [{'Current Deposit': 'Current Deposit'.'number': 20},
                { 'Current Deposit': 'fund'.'number': 15 },
                { 'Current Deposit': 'Time Deposit'.'number': 15},
                { 'Current Deposit': 'money'.'number': 30},
                { 'Current Deposit': The 'capital'.'number': 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>' +
                    Quantity: +
                    parms.data.value +
                    '</br>' +
                    'Ratio:' +
                    parms.percent +
                    The '%';
                    return str
                }
            },
        },
        chartSetting: {
            hoverAnimation: true.radius: [40.70].offsetY: 90
        },
Copy the code

3. Vue click event judgment and execution

<div @click="clickFlag && addGoodsHandler()"> Add product </div>Copy the code

ClickFlag – If the status is true addGoodsHandler click events are executed, otherwise they are not executed

How to use vUE’s slot Solt

For example, if a common component has the same outer shell but different content in the middle, you can customize the content in the parent component and then receive it in the child component using solt

 <Child><! -- [1] First write the child as a double tag and insert the content between the two tags -->
      <p>Insert the content of the child component</p>
 </Child>
Copy the code

Child components

  <div class="child">
    <span>Child components</span>
    <slot/>
  </div>
Copy the code