word剪切板：总结一些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(""))//输出0console.log(Number(null))//输出0console.log(Number(undefined))//输出NANconsole.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]