Vue容易且常用的方法

深克隆

*Object.prototype.toString() 方法，会返回一个形如 "[object XXX]" 的字符串
万物皆对象，.call继承对象的toString方法*

function typeOf(obj){

    const toString = Object.prototype.toString
    const map = {
        '[object Boolean]':'boolean',
        '[object Number]':'number',
        '[object String]':'string',
        '[object Function]':'function',
        '[object Array]':'array',
        '[object Date]':'date',
        '[object RegExp]':'regExp',
        '[object Undefined]':'undefined',
        '[object Null]':'null',
        '[object Object]':'object'
    }
    return map[toString.call(obj)]
}

//deepCopy
function deepCopy(data){
    const t = typeOf(data)
    let o;
    if(t==='array'){
        o = []
        for(let i = 0;i<data.length;i++){
            o.push(deepCopy(data[i]))
        }
    }else if(t === 'object'){
        o = {}
        for(let key in data){
         o[key] = deepCopy(data[key])
        }
    }else{
        return data
    }
    return o
}

vue中类名的根据条件动态显示

class属性(数组语法) ,对象内如果右侧满足,则有这个class名称 类名是根据右侧的条件满足，则存在

 <label :class="wrapClasses"></label>
 
 
  computed:{
        wrapClasses(){
  
            return [
                `${prefixCls}-wrapper`,
                {
                    [`${prefixCls}-group-item`]:this.group,
                    [`${prefixCls}-wrapper-checked`]:this.currentValue,
                    [`${prefixCls}-wrapper-disabled`]:this.disabled,
                    [`${prefixCls}-${this.size}`]:!!this.size
                }
            ]
        }
        }

限制输入框的输入数字（整数或带有两位小数）

两位小数

  <el-input
    size="small"
    v-model="scope.row.x"
    @input="limitInput($event)"
  />


  // 两位小数
    limitInput(value) {
      this.input4 =
        ("" + value) // 第一步：转成字符串

          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉

          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字

          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全

          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },




或者

   <el-input-number
      style="width: 150px"
      v-model="scope.row.lastNum"
      controls-position="right"
      :min="0"
      :precision="2"
    ></el-input-number>

正整数

<el-input
  size="small"
  v-model="scope.row.y"
  @input="isNumber($event)"
/>


 // 正整数
    isNumber(val) {
      val = val.replace(/[^\d]/g, "");
      this.input3 = val;
    },




或者

 <el-input-number
    style="width: 150px"
    v-model="scope.row.surplusNum"
    controls-position="right"
    :min="0"
    :precision="0"
  ></el-input-number>

vue中css的条件渲染

<div class="timeChoice"  :class="{timeActive:activeId==it.id}">

路由传值取值

this.$router.push({
        path: this.$route.path + "/add",
        query:{
          type:'edit'
        }
      });


const { type } = this.$route.query;

input

<el-input
                slot="reference"
                type="textarea"
                readonly
                class="width-100"
                v-model="form[item.bind]"
                :autosize="{
                  minRows: item.minRows || 2,
                  maxRows: item.maxRows || 4, 
                }"
              ></el-input>