1. CSS中 设置( 单行、多行 )超出显示省略号

• 单行文本溢出显示省略号…
• 多行文本溢出显示省略号…

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

2. 多行文本溢出显示省略号

• 1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
• 2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数；
• 3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本

.text-ellipsis{
  overflow:hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

3. 解决Echarts tab切换时，图表宽高被压缩的问题（给组件添加v-if）

4. Promise的初封装

import axios from 'axios';

let baseURL; // process.env.NODE_ENV环境
if(process.env.NODE_ENV=='development'){
    baseURL = 'http://127.0.0.1:3000/api'
}else{
    baseURL = '/xxx'
}

const $http = axios.create({
    baseURL,
})

// 分别暴露
export const get = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        // axiso 自带 get 和 post 方法
        $http.get(url,{
            params,
        }).then(res=>{
            if(res.data.status===0){
                resolve(res.data);
            }else{
                alert(res.data.msg)
            }
        }).catch(error=>{
            alert('网络异常');
        })
    })
}

export const post = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        $http.post(url,params).then(res=>{
            if(res.data.status===0){
                resolve(res.data);
            }else{
                alert(res.data.msg);
            }
        }).catch(error=>{
            alert('网络异常');
        })
    })
}

• 如何引用呢？

import { get, post } from "./utils/index";
Vue.prototype.$http = {
  get,
  post
}

• 这里使用了构造函数的原型prototype声明一个全局变量，并且把封装好的get和post方法放在里面

5. 父子组件，Vue中的数据是单向数据流：父级 prop 的更新会向下流动到子组件中，但是反过来则不行，即子组件无法直接修改父组件中的数据。

但我们常常会遇到需要在子组件中修改父组件数据的场景。.sync修饰符就可以帮助我们实现这种功能。

1.父组件

  //:is-show.sync="detailVisible"
 <WriteOffDialog :visible.sync="writeOffShow" ></WriteOffDialog>

2.子组件

 cancel() {
     this.$emit('update:visible', false)
     //this.$emit('update:isShow', false)
     // 或者如下也可以
     //this.$emit('update:is-show', false)
     },

或者

// 父组件
<todo-list :list.sync="list" />
 
// 子组件
methodName(index) {
    this.$emit('update:list', this.newList)
}

3.子组件深拷贝

在子组件修改props的方法：

//1. 子组件data中拷贝一份，注意引用类型需要深拷贝，根据需求可以watch监听

data() {
    return {
        newList: this.list.slice()
    }
},
watch: {
    list(newVal) {
        this.newList = newVal
    }
}

// 2. 通过计算属性修改 
computed: { 
nList() 
  { 
      return this.list.filter(item => { return item.isChecked }) 
  } 
}