前端css常用笔记

---

一、样式

• 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) // 创建数据