---

一、樣式

• 1 文字與圖標對不齊的解決方法

  /**給icon加上這個樣式即可*/
  vertical-align: -10%;
  

• 2 讓內部元素垂直水平居中
  在父級div加上這個樣式

  .main{width: 100%;height: 100vh;display: flex;justify-content: center; /**水平居中*/align-items: center; /**垂直居中*/
  }
  

• 3 禁止換行樣式

  • （1） 一行不換行并顯示省略號

  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  

  • （2）自定義自能顯示多少行，溢出使用省略號

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /*行數*
  

• 4 小程序使圖片images設置大小不變形mode='aspectFit（固定寬高）'，mode='widthFix'（固定寬度并不變形）

  <!-- 固定寬高 -->
  <image src="images/wqs.png"  mode='aspectFit' style="width: 100%;"></image><!-- 固定寬度 -->
  <image src="images/wqs.png"  mode='widthFix' style="width: 100%;"></image>
  

• 5 元素讓內部元素一行顯示在要在一行顯示的元素加上display: inline-block;樣式即可

  <!--父級元素-->
  <div><!--子級元素--><div style="display: inline-block;"></div><div style="display: inline-block;"></div>
  </div>
  

• 6 img加上讓固定寬高圖片變形的樣式object-fit: cover;

  <img class="avatar" src="20210914/07c92ea514be4610930c4da404ee6adb.jpg" style="object-fit: cover;">
  

• css使img圖片不變形

  object-fit: cover;
  

• 6 去掉原始input樣式

/* 去掉默認樣式 */
input{border: none;outline: none;
}/* 去掉取到光標時默認的樣式 */
input:focus{border: none;outline: none;
}

• 8 原始的單選或者多選時點擊文字選擇選框

<!-- 單選框 -->
<label class="choice_label"><input type="radio" name="sex" value="男生"> <span>男生</span>
</label><!-- 復選框 -->
<label class="choice_label"><input type="checkbox" name="vehicle" value="我已知曉"><span>我已知曉</span>
</label>

• 9 讓內容垂直橫向居中

/**父級模塊*/
.main{width: 100%;height: 100vh;background-color: red;display: flex;justify-content: center;align-items: center;
}
/**子模塊*/
.center{width: 500px;height: 500px;background-color: aqua;
}

二、vue筆記

2.1、組件之間的通信

2.1.1 子組件調用父組件的方法

• 案例

// 子組件
export default {inject: ['fatherFunction'],methods:{// testfunc(){this.fatherFunction()}}
}

// 父組件
export default {inject: ['fatherFunction'],methods:{},provide () {return {fatherFunction: (item) =>{console.log('調用了父組件')}}},
}

2.1.2 父組件調用子組件的方法

• 案例

<headerChild ref="headerChild"></headerChild>

this.$refs.headerChild.屬性
this.$refs.headerChild.方法

2.1.3 孫組件調用祖父組件方法的實現

• 在孫組件中使用inject: [‘fatherMethod’]
• 在祖父組件中的provide里調方法
• 例子：

<!--祖父組件-->
<template><div>祖父組件    </div>
</template>
<script>
import ServiceAreaComm from '@/components/serviceAreaComm.vue'
export default {name: 'AppraiseVisu',components: { ServiceAreaComm },data () {return {}},provide () {return {fatherMethod: (item) => this.areaParentFunc(item)}},mounted () {},methods: {// 祖父級方法areaParentFunc (id) {console.log('調用到了祖父級的方法areaParentFunc--->' + id)}}
}
</script>

<!-- 孫組件 -->
<template><div><button type="button" @click="fatherMethod">調用方法</button>    </div>
</template>
<script>
export default {name: 'AreaMenuItem',props: {},data () {return {}},inject: ['fatherMethod'],methods: {}
}
</script>

2.2、使用若依時,node_nodules越來越大的問題

原因：若依內部加入的打包的問題

解決方法：將compression-webpack-plugin 插件注釋掉即可

所在位置：vue.config.js中,

const CompressionPlugin = require('compression-webpack-plugin')

2.3、echart筆記

• 1 echarts隨著窗口縮放自適應

option && this.myChart.setOption(option); // 創建好圖形
window.onresize = this.myChart.resize; // 使圖標自適應窗口

• 2 銷毀圖形

myChart.dispose()

• 3 創建圖形與刷新圖形的區別

myChart.setOption(option, true) // 刷新數據（刷新數據時不需要銷毀圖形）
myChart.setOption(option) // 創建數據