本文主要记载使用Vue、Element、JS中遇到的各种问题及解决方案.
目录
VUE
1.使用NavMenu时重复点击当前菜单报错
将下方代码块写入至 router.js 中即可
import Router from 'vue-router'
// 解决重复点击导航路由报错
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
}
2.项目部署时，解决Vue项目有缓存问题
答：第一步，找到build目录下的webpack.prod.conf.js文件，并修改成下方代码样式，目的在于每一次生成的js包都是新的。
第二步，在 根目录 找到 index.html 页面
添加如下代码，该代码是设置index.html这个页面不进行缓存，每次获取最新的
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="expires" content="0">
3.注入式重新加载当前页面
3.1 App.vue页面
3.2 注入reload
3.3 直接调用 this.reload(); 即可刷新整个页面
Element
1.级联选择器children为空问题
methods:{
getUserData(){
axios({url,params}).then(res=>{
this.arrayItem= this.getTreeData(data);//在网络请求这里进行递归
})
}
//递归函数
getTreeData(data){
data.forEach(item => {
if(item.children.length<1){
item.children=undefined;
}else{
this.getTreeData(item.children)
}
});
return data;
}
}
2. 表单下 Input按回车后会刷新页面问题
添加该属性 @submit.native.prevent
<el-form @submit.native.prevent></el-form>
JS
1.找出数组不同的部分
/**instend(one,tow)
* 得到两个数组中不同部分
* 参数 ：两个数组
*/
function instend(one,tow){
//var a = one;
//var b = tow;
var c = [];
var tmp = one.concat(tow);
var o = {};
for (var i = 0; i < tmp.length; i ++) (tmp[i] in o) ? o[tmp[i]] ++ : o[tmp[i]] = 1;
for (x in o) if (o[x] == 1) c.push(x);
return c;
}
2.时间转义汉字,如刚刚,几分钟前,几天前…
function timeParseChn (val) {
if (!val) {
return false
}
let _time=new Date(val);
//let _time = val.replace(/\-/g, "/")
// 将实际时间转为中国标准时间
//_time = _time + ' GMT+0800'
let realTime = new Date(_time).getTime()
// 当前时间也转为中国标准时间
let _nowTime = new Date().toLocaleString('chinese', {hour12: false})
_nowTime = _nowTime + ' GMT+0800'
let nowTime = new Date(_nowTime).getTime()
let diffValue = nowTime - realTime
if (diffValue < 0) {
return
}
let _min = diffValue / (60 * 1000) // 以min为维度
if (_min < 1) {
return '刚刚'
} else if (_min >=1 && _min < 10) {
return '1分钟前'
} else if (_min >= 10 && _min < 30) {
return '10分钟前'
} else if (_min >= 30 && _min < 60) {
return '半小时前'
} else if (_min >= 60 && _min < 60 * 24) {
return Math.floor(_min / 60) + '小时前'
} else if (_min >= 60 * 24 && _min < 60 * 24 * 7) {
return Math.floor(_min / (60*24)) + '天前'
} else {
return Math.floor(_min / (60*24)) + '天前'
}
}
3.toFixed四舍五入问题
function toFixed(number, m) {
if (typeof number !== 'number') {
throw new Error("number不是数字");
}
let result = Math.round(Math.pow(10, m) * number) / Math.pow(10, m);
result = String(result);
if (result.indexOf(".") == -1) {
if(m != 0){
result += ".";
result += new Array(m + 1).join('0');
}
} else {
let arr = result.split('.');
if (arr[1].length < m) {
arr[1] += new Array(m - arr[1].length + 1).join('0')
}
result = arr.join('.')
}
return result
}
4.简化数字（万，百万，千万）
function simplifyNum(number) {
if (!number && number != 0) return number;
var str_num
if (number >= 1E4 && number < 1E6) {
str_num =number / 1E4
str_num=str_num.toFixed(3)
return str_num + '万'
} else if (number >= 1E6 && number < 1E7) {
str_num = number / 1E6
str_num=str_num.toFixed(3)
return str_num + '百万'
} else if (number >= 1E7 && number < 1E8) {
str_num = number / 1E7
str_num=str_num.toFixed(3)
return str_num + '千万'
} else if (number >= 1E8 && number < 1E10) {
str_num = number / 1E8
str_num=str_num.toFixed(3)
return str_num + '亿'
} else if (number >= 1E10 && number < 1E11) {
str_num = number / 1E10
str_num=str_num.toFixed(3)
return str_num + '百亿'
} else if (number >= 1E11 && number < 1E12) {
str_num = number / 1E11
str_num=str_num.toFixed(3)
return str_num + '千亿'
} else if (number >= 1E12) {
str_num = number / 1E12
str_num=str_num.toFixed(3)
return str_num + '万亿'
} else { //一千以下
return number
}
}
正则表达式
1.修改密码框
密码长度为8-20范围内,须包含数字、字母、符号至少2种或以上元素
<!--
* @Description: 公用修改密码
-->
<template>
<el-dialog title="修改密码" :visible.sync="isShowChangePwd" width="500px" height="236px" :close-on-click-modal="false" :before-close="closeDialog" v-dialogDrag>
<!-- <p style="border-bottom:1px solid #f2f2f2;margin-bottom:14px"></p> -->
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm bottomform" label-position="right">
<el-form-item label="旧密码:" prop="oldpass">
<el-input type="password" v-model="ruleForm.oldpass" autocomplete="off" show-password placeholder="请输入旧密码"></el-input>
</el-form-item>
<el-form-item label="新密码:" prop="newpass">
<el-input type="password" v-model="ruleForm.newpass" autocomplete="off" show-password placeholder="请输入新密码"></el-input>
</el-form-item>
<el-form-item label="确认密码:" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" show-password placeholder="请确认密码"></el-input>
</el-form-item>
</el-form>
<div class="btn-text-align">
<el-button type="primary" @click="submitForm('ruleForm')" size="small">提交</el-button>
<el-button @click="closeDialog()" size="small">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import LoginApi from "@/api_platform/login";
export default {
props: {
isShowChangePwd: Boolean,
authorizationId: String
},
data() {
const reg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$)^.{8,20}$/;
var validatePass = (rule, value, callback) => {
if (!reg.test(value)) {
callback(
new Error(
"密码长度为8-20范围内,须包含数字、字母、符号至少2种或以上元素,请规范输入!"
)
);
} else {
if (value === "") {
callback(new Error("请输入密码"));
} else {
if (this.ruleForm.checkPass !== "") {
this.$refs.ruleForm.validateField("checkPass");
}
callback();
}
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (
this.ruleForm.newpass &&
this.ruleForm.newpass != "" &&
value !== this.ruleForm.newpass
) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
time: "2020-07-09",
ruleForm: {
oldpass: "",
newpass: "",
checkPass: ""
},
rules: {
pass: [{ validator: validatePass, trigger: "change" }],
checkPass: [{ validator: validatePass2, trigger: "change" }]
}
};
},
methods: {
// 提交表单
submitForm(formName) {
var thisApp = this;
this.$refs[formName].validate(valid => {
if (valid) {
var data = {
authorizationId: this.authorizationId,
oldPassword: this.ruleForm.oldpass,
newPassword: this.ruleForm.newpass
};
LoginApi.resetUserPwd(data).then(res => {
if (res.data.state == 1) {
this.$notify.success({
title: "成功",
message: res.data.message,
duration: 1500,
offset: 50
});
thisApp.closeDialog();
} else {
this.$notify.warning({
title: "温馨提示",
message: res.data.message,
duration: 1500,
offset: 50
});
}
});
} else {
this.$notify.warning({
title: "更改密码失败",
message: "两次密码输入不相同!",
duration: 1500,
offset: 50
});
}
});
},
closeDialog() {
Object.assign(this.$data, this.$options.data());
this.$emit("update:isShowChangePwd");
}
}
};
</script>
<style lang='scss'>
div .el-dialog__title {
font-size: 16px;
}
</style>
扫一扫
6784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
