总结一些vue3小知识

1.表单验证失效 

 说明：v-model改为model来绑定，required: true是用来控制验证的样式的显示隐藏（就是"*"的显示和输入框的颜色变化和是否为必填项）

<el-form  label-width="100px" inline :model="item" style="height:200px;">
    <el-form-item label="身份证号:" prop="idCard" :rules="[{ required: true,pattern: /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0\d|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/,  message: '请输入正确的身份证号', trigger: 'blur' }]">
        <el-input v-model="item.idCard" placeholder="请输入身份证号" maxlength="18"></el-input>
    </el-form-item>
</el-form>

2.下载word或者pdf文档

// url是下载路径，一般是由后端返回
function fn(url){
  window.open(url)
}

3.change、input、blur等事件中同时传递事件源和自己的参数

说明：val就是事件源，位置好像不是固定的，可以放在inputFn方法的任何位置，666是自己传递的参数。

<el-input clearable v-model.trim="searchParams.shipmentId" @input="(val)=>inputFn(val,666)" placeholder="请输入清关发票shipmentID"></el-input>

function inputFn(val,num){
  console.log(val,num);
}
//val输出得到的是输入框输入的值，num输出的是666

4.输入框中的enter回车键事件

<el-input clearable @keyup.enter.native="shower"></el-input>

function shower(){
  console.log("回车事件");
}

5.改变网页标题

function shower(){
  window.document.title = "欢迎来到实力至上主义的教室"
}

6.vue3的监听器

watch(监听的数据，副作用函数，配置对象)
watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

//基本数据类型
<el-input clearable v-model.trim="name" placeholder="请输入"></el-input>

let name = ref("")
watch(name,(newData,oldData) => {
  console.log(newData,oldData);
})

//同时监听多个数据，可以写成两个watch（）
let name = ref("")
let age = ref(18)
watch([name,age],(newData,oldData) => {
  console.log(newData,oldData);
})

//引用数据类型
//监听整个对象
let person = reactive({
  name:"绫小路",
  age:18
})；
watch(person,(newData,oldData) => {
  console.log(newData,oldData);
})；

//监听对象中的属性
let person = reactive({
  name:"绫小路",
  age:18
})；
watch(()=>person.name,(newData,oldData) => {
  console.log(newData,oldData);
})；

//同时监听对象的多个属性
let person = reactive({
  name:"绫小路",
  age:18
})
watch([()=>person.name,()=>person.age],(newData,oldData) => {
  console.log(newData,oldData);
})

具体看大佬讲解

7.vue3中输入框限制只能输入数字

说明:v-model.number虽然能限制输入数字，但如果一开始就输入中文英文是能输入的。该写法好像存在校验消失不会消失的问题

<el-input v-model="addressInfoParam.houseArea" onkeyup="value=value.replace(/[^\d.]/g,'')" clearable/>

8.保留两位小数

<el-form-item label="房屋面积（㎡）:" :label-width="formLabelWidth" prop="houseArea"
    :rules="[{ required: true, message: '请输入房屋面积', trigger: 'blur' }]">
    <el-input v-model="addressInfoParam.houseArea" @input="inputHouseArea"
        @blur="handelHouseArea" clearable />
</el-form-item>



// 房屋面积保留两位小数
function handelHouseArea() {
    let val = addressInfoParam.value.houseArea
    let index = val.indexOf('.');
    if (index !== -1) {
        val = val.slice(0, index + 3);
        if (/\.0+$/.test(val)) {
            addressInfoParam.value.houseArea = val.slice(0, index);
        } else {
            addressInfoParam.value.houseArea = Number(addressInfoParam.value.houseArea || "").toFixed(2);
        }
    }
}
// 房屋面积只能输入数字
function inputHouseArea(val){
    addressInfoParam.value.houseArea=val.replace(/[^\d.]/g,'')
    console.log(addressInfoParam.value.houseArea);
};

9.vue3中的鼠标双击事件

<div class="textItem" @dblclick="clickFun">大地址管理</div>
function clickFun(){
    console.log("双击事件");
}

 10.Number()系统函数的使用注意事项

说明：Number(undefined)输出的的是NAN，所以在转换的时候都要使用“||”来防止NAN

console.log(Number(""))//输出0
console.log(Number(null))//输出0
console.log(Number(undefined))//输出NAN

console.log(Number(undefined||""))//输出0

11.点击将内容复制到剪切板

说明：row是对象数据，模板字符串可以很好的控制复制后的格式，整个代码就是navigator.clipboard.writeText(textToCopy)在起到复制的作用

//复制使用信息按钮
function copyBtnFn(row) {
    const textToCopy = `${row.individualName==null?"":row.individualName}- ${row.user} ${row.usageTime} 使用地址
地址：${row.addressDetail}
房屋编码：${row.houseCode}
房屋面积：${row.houseArea}
补充地址：${row.supplementalAddress}
记得一定要填写正确的补充地址！错误填写地址，会导致后续税务、工商、银行等事项无法办理！`
    navigator.clipboard.writeText(textToCopy)
        .then(() => {
            ElMessage.success("复制成功")
        }).catch((err) => {
            ElMessage.error("复制失败")
    });
};

12.限制输入框输入小数位数

// 物流报价保留四位
function handelSave(value, obj, attr, num) {
  value = value.replace(/[^\d.]/g, '');
  obj[attr] = value;
  // 动态创建匹配未超过特定小数位数的正则表达式
  var reg = new RegExp(`^\\d*\\.?\\d{0,${num}}$`);
  // 如果不匹配则修正输入值
  if (!reg.test(value)) {
    obj[attr] = value.slice(0, -1);
  }
}

13.只能输入数字

第一种做法

<el-input v-model="addressInfoParam.houseArea" @input="inputHouseArea" clearable />


function inputHouseArea(val){
    addressInfoParam.value.houseArea=val.replace(/[^\d.]/g,'')
};

第二种做法（简单快捷）

<el-input-number v-model="num"  :controls="false" />

14.快速获取对象中的key值和value值

let obj = {
			name:"张三",
			age:60
			}
console.log(Object.keys(obj),"250");
得到[“name”，“age”]
console.log(Object.values(obj),"250");
得到[“张三”，60]