JS相关
1.深度拷贝问题
深度拷贝，在父组件给子组件中传值的时候，有时候会遇到这种问题，子组件中更改数据，直接影响到父组件中的数据。可以试下下面的方法深度拷贝下，然后传给子组件
JSON.parse(JSON.stringify(obj))
2. 模板字符串
参考代码
<el-option v-for="(itemcy,index) in 28" :key="index.toString()" :label="`${itemcy}日`"></el-option>
3.字符串转base64
参考代码
//字符串转base64
function encode(str){
// 对字符串进行编码
var encode = encodeURI(str);
// 对编码的字符串转化base64
var base64 = btoa(encode);
return base64;
}
// base64转字符串
function decode(base64){
// 对base64转编码
var decode = atob(base64);
// 编码转字符串
var str = decodeURI(decode);
return str;
}
VUE相关
1.项目文件参考
vue项目参考
2.Vue在跨域请求时携带cookie
const service = axios.create({
baseURL: process.env.BASE_API,
withCredentials: true,//可携带cookie
timeout: 5000
})
3.vue项目中使用axios拦截器
1.request
应用场景，如果请求中需要携带tooken的话
service.interceptors.request.use(config => {
config.headers.token = getToken()//getToken()是我自己项目中的方法
return config
}, error => {
// Do something with request error
console.log(error) // for debug
})
2.response
应用场景：请求回来的数据进行判断
service.interceptors.response.use(response => response, error => {
Message({
message: error.message,
type: 'error'
})
const status = error.response.status
<!--返回的数据是401状态后进行的操作-->
if (status === 401) {
store.dispatch('FedLogOut').then(() => {
location.reload()
})
}
<!--返回的数据是403状态后进行的操作-->
if (status === 403) {
router.push('/403')
}
return Promise.reject(error)
})
4.this.$set的使用
应用场景：当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了
this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象
5.vue项目中打包后的dist文件，本地访问测试
- 安装http-server
npm install http-server -g
- 运行
在dist下面打开终端
http-server
6.input中进行电话和邮箱验证
js文件代码
// 是否是公司邮箱
export function isEmail(str) {
const reg = /\w+((-w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+/
return reg.test(str.trim())
}
// 是否是手机号码
export function isMobile(str) {
if(str===undefined){
str = '1'
const reg = /0?(13|14|15|17|18)[0-9]{9}$/
return reg.test(str.trim())
}else{
const reg = /0?(13|14|15|17|18)[0-9]{9}$/
return reg.test(str.trim())
}
}
idnex.vue中使用
//html
<el-form-item label="手机" prop="mobile">
<el-input v-model="createUserForm.mobile" placeholder="请输入手机"></el-input>
</el-form-item>
//js
//1.
import {isMobile } from 'utils/validate'
//2.
//在rules的mobile中配置validator
mobile: [{validator: validateMobile, trigger: 'blur',required: true, }],
//3.
const validateMobile = (rule, value, callback) => {
if (!isMobile(value)) {
callback(new Error('手机号码格式不正确'));
} else {
callback();
}
}
7.实现电话 邮箱和身份证显示****
效果图
- 代码
//写个过滤器
filters:{
replaceMobile(res){
return res.replace(/^(.{4})(?:\d+)(.{3})$/, "$1 **** $2");
},
replaceidNo(res){
return res.replace(/^(.{10})(?:\d+)(.{4})$/, "$1 **** $2");
},
},
<el-table-column align="center" prop="mobile" label="手机号" width="160px">
<template slot-scope="scope">
<span>
{{scope.row.mobile|replaceMobile}}
</span>
</template>
</el-table-column>
element 相关
1. 循环form表单的校验问题
循环表单的时候有时候校验会出问题 可参考下面代码
<el-form ref="createCourseForm" :model="createCourseForm" :rules="rules" label-width="130px">
<div v-for="(itemfh,index) in createCourseForm.kclist" :key="index" >
<el-col :span="7">
<el-form-item label="时间安排"
:prop="`kclist.${index}.scheduleIndex`"
:rules="rules.scheduleIndex" >
<el-select v-model="itemfh.scheduleIndex" placeholder="请选择时间安排">
<el-option v-for="(itemcy,index) in 28" :key="index.toString()" :label="`${itemcy}日`" :value="index.toString()"></el-option>
</el-select>
</el-form-item>
</el-col>
</div>
</el-form>
