前端css常用笔记

文章目录

一、样式
二、vue笔记
- 2.1、组件之间的通信
- - [2.1.1 子组件调用父组件的方法](#2.1.1 子组件调用父组件的方法)
  - [2.1.2 父组件调用子组件的方法](#2.1.2 父组件调用子组件的方法)
  - [2.1.3 孙组件调用祖父组件方法的实现](#2.1.3 孙组件调用祖父组件方法的实现)
- 2.2、使用若依时,node_nodules越来越大的问题
- 2.3、echart笔记

一、样式

1 文字与图标对不齐的解决方法

css 复制代码

/**给icon加上这个样式即可*/
vertical-align: -10%;

2 让内部元素垂直水平居中
在父级div加上这个样式

css 复制代码

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

3 禁止换行样式

（1）一行不换行并显示省略号

css 复制代码

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

（2）自定义自能显示多少行，溢出使用省略号

css 复制代码

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

4 小程序使图片images设置大小不变形mode='aspectFit（固定宽高）'，mode='widthFix'（固定宽度并不变形）

html 复制代码

<!-- 固定宽高 -->
<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;样式即可

html 复制代码

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

6 img加上让固定宽高图片变形的样式object-fit: cover;

html 复制代码

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

css使img图片不变形
css 复制代码
```
object-fit: cover;
```
6 去掉原始input样式

css 复制代码

/* 去掉默认样式 */
input{
  border: none;
  outline: none;
}

/* 去掉取到光标时默认的样式 */
input:focus{
  border: none;
  outline: none;
}

8 原始的单选或者多选时点击文字选择选框

html 复制代码

<!-- 单选框 -->
<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 让内容垂直横向居中

css 复制代码

/**父级模块*/
.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 子组件调用父组件的方法

案例

js 复制代码

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

js 复制代码

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

2.1.2 父组件调用子组件的方法

案例

html 复制代码

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

js 复制代码

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

2.1.3 孙组件调用祖父组件方法的实现

在孙组件中使用inject: ['fatherMethod']
在祖父组件中的provide里调方法
例子：

html 复制代码

<!--祖父组件-->
<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>

html 复制代码

<!-- 孙组件 -->
<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中,

js 复制代码

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

2.3、echart笔记

1 echarts随着窗口缩放自适应

js 复制代码

option && this.myChart.setOption(option); // 创建好图形
window.onresize = this.myChart.resize; // 使图标自适应窗口

2 销毁图形

js 复制代码

myChart.dispose()

3 创建图形与刷新图形的区别

js 复制代码

myChart.setOption(option, true) // 刷新数据（刷新数据时不需要销毁图形）
myChart.setOption(option) // 创建数据