前端css常用笔记

文章目录

一、样式
二、vue笔记

一、样式

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