vue 常用css小技巧

1、超出不换行

 white-space: nowrap;
 overflow: hidden; /* 或者使用 scroll 或 auto */
 text-overflow: ellipsis; /* 可选，超出部分显示省略号 */

2、超出换行显示…

    

  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;

overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示

3、flex弹性布局应用

常用：

display: flex; //inline-flex：行内 //-webkit-flex; /* Safari */Webkit 内核的浏览器
justify-content: space-between; //space-evenly //center
align-items: center;
margin: 0 auto;

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

flex-direction: row | row-reverse | column | column-reverse;
主轴为水平方向，起点在左端；主轴为水平方向，起点在右端；主轴为垂直方向，起点在上沿；主轴为垂直方向，起点在下沿
justify-content：x轴对齐
flex-start(默认值):左对齐
flex-end：右对齐
center：居中
space-between：容器间距距离相等，两端对齐
space-evenly: 容器距离相等,容器与左右之间的距离等于容器之间的距离
space-around 容器距离相等,容器与左右之间的距离等于容器之间的距离得一半

align-items：y轴上的对齐方式
normal：在弹性布局中，效果和stretch一样
stretch：前提是items不设置高度，当flex items 在y轴方向的size为auto时，会自动拉伸至填充flex container(或者换句话说：如果项目未设置高度或设为auto，将占满整个容器的高度。)
flex-satrt:与上对齐
flex-end:与下 对齐
center:居中对齐
baseline:与基准线对齐
flex-wrap：nowrap(默认)：单行|wrap：换行行|wrap-reverse 倒叙
4、组件传值常用：
vue2：
1>

<left11 ref="P2L11"></left11>

> ```import left11 from "../components/P3Left11.vue"
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/3668507ab8e04b1c8411c5b273476616.png)


![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2ee21815a7864a47b2176e2492bce3a3.png)
this.$refs.P2L12.initChart(data);
2>
![父组件](https://i-blog.csdnimg.cn/direct/13bf94ce7c2945e7b44dc73be7d66ca0.png)![父组件接收](https://i-blog.csdnimg.cn/direct/1a314c86548347eb8d1f30f4d4807cb2.png)
![父组件更新调用子组件方法](https://i-blog.csdnimg.cn/direct/93f4b5fc94c247a4916f38bfe9b4d861.png)![子组件提交](https://i-blog.csdnimg.cn/direct/377bffad5ab7403c93416bb3d6800139.png)



vue3：
const navInputRef = ref(null)
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/183563d1606f457d8a8ee991ef4f3a43.png)![在箱这里插入图片描述强制更新子组件数据](https://i-blog.csdnimg.cn/direct/c16c8ed439054635a71e86b2d9e5b59b.png)![子组件可供负组件调用方法](https://i-blog.csdnimg.cn/direct/8c3c7128bb4c4d59be6ef93ced5a21a0.png)

![在这里插入图片描述父组件接收](https://i-blog.csdnimg.cn/direct/a89a4539f8914625b280357251e5d51b.png)![子组件暴露方法，允许父组件调用](https://i-blog.csdnimg.cn/direct/60452a9a32b44a67aaf3bd7b91241643.png)![子组件提交方法](https://i-blog.csdnimg.cn/direct/06e9a8546470498893ef95f212e242d3.png)

## 5、左右布局

```html
<el-row :gutter="24">
        <el-col :span="6">
          <div class="card-view left-view">
            <div class="left_top">
              <div class="top_title">