目录
JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)。
JSON.stringify 方法将某个对象转换成 JSON 字符串形式
导入js文件一般是放在public文件下的aes文件夹下，然后在index.html文件内导入
css添加伪元素before/after,并为伪元素添加点击事件
深拷贝
export function deepCopy(obj: any) {
return JSON.parse(JSON.stringify(obj));
}JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)。
_this.datas = JSON.parse(sessionStorage.getItem('data')) || []
sessionStorage.setItem('data',JSON.stringify(_this.datas))JSON.stringify 方法将某个对象转换成 JSON 字符串形式
cookie
this.setCookie(this.msg.username,this.msg.password,7);
this.getCookie()
//设置cookie
setCookie(c_name, c_pwd, exdays) {
var exdate = new Date(); //获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
//字符串拼接cookie
window.document.cookie = "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
//读取cookie
getCookie:function () {
if (document.cookie.length>0) {
var arr=document.cookie.split('; ');//这里显示的格式需要切割一下
// console.log(arr);
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');//再次切割
// console.log(arr2);
//判断查找相对应的值
if(arr2[0]=='username'){
this.msg1.username=arr2[1];//保存到保存数据的地方
// return this.msg1.username
}else if(arr2[0]=='password'){
this.msg1.password=arr2[1];
// return this.msg1.password;
}
}
}
},
//清除cookie
clear:function () {
this.setCookie("","",-1);//修改2值都为空
}路由跳转传参
//传
this.$router.push({path:'./dingdan',query:{datas:this.wu}})
//接收
this.$route.query && (this.datas = this.$route.query.datas );v-for与图片渲染
当图片不显示可以试试加上require()
<div style="border:1px solid transparent;" v-for="(item , index) in list" :key="index">
<img :src="list[index]" class="tupian_img">
</div>forEach
changeactive(activename) {
let _this = this;
// this.newappflag=false
_this.list.forEach((item) => {
if (item.activename == activename) {
item.activesty = true;
} else {
item.activesty = false;
}
});
},运行打包时看package.json文件
域名什么的看vue.config.js文件
proxyTable 的功能不止可以实现域名的转换,更多的时候是解决跨域的请求,
changeOrigin:true 是开启代理
pathRewrite 意为重写路径
target: 就是你远端的ip
target：表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/apihy/moment；
pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite；
secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；
changeOrigin：它表示是否更新代理后请求的headers中host地址；
导入js文件一般是放在public文件下的aes文件夹下，然后在index.html文件内导入
flex布局超级好用
不太好用的情况下，可以想想这个margin-left: auto;
.headerstart {
display: flex;
justify-content: space-between;
align-items: flex-start;
}:class的运用
//select stopcli tissuebutt adminbutt clickconver
<div class="flexcenter" :class="{ select: true, stopcli: fenid1 }"></div>
<div class="flexcenter" :class="[tissueflag ? 'tissuebutt' : 'adminbutt']" ></div>
<div :class="[converflag == 1 ? 'clickconver' : '']"></div>三元表达式-多元
let content = this.countries? this.countries: this.city? this.city: this.village;清除除了中文以外的字符
<input v-model="skills" label="技能" @keyup.native="inputChangeskills($event)" @keydown.native="inputChangeskills($event)" placeholder="请输入技能" />inputChangeskills(e) {
const o = e.target;
o.value = o.value.replace(/[^\u4E00-\u9FA5]/g, ''); // 清除除了中文以外的输入的字符
this.skills = o.value;
}验证手机号码（校验）
<input
v-model="phone"
type="number"
maxlength="11"
label="手机号码"
input-align="right"
@blur="phonetest(phone)"
placeholder="请输入手机号"
/>phonetest(e: any) {
let reg: any = /^1[3456789][0-9]{9}$/;
if (e == '' || e.length <= 10 || !reg.test(e)) {
this.phone = '';
Dialog.alert({
message: '手机号码格式有误',
confirmButtonColor: '#32AD81',
overlayStyle: { 'background-color': 'rgba(0, 0, 0, 0.3)' },
width: '295px',
});
return;
}
}身份证号验证-校验
<input v-model="optNo" maxlength="18" label="身份证号" placeholder="请输入身份证号" />let code: any = _this.cardId;
var city: any = {
11: '北京',
12: '天津',
13: '河北',
14: '山西',
15: '内蒙古',
21: '辽宁',
22: '吉林',
23: '黑龙江 ',
31: '上海',
32: '江苏',
33: '浙江',
34: '安徽',
35: '福建',
36: '江西',
37: '山东',
41: '河南',
42: '湖北 ',
43: '湖南',
44: '广东',
45: '广西',
46: '海南',
50: '重庆',
51: '四川',
52: '贵州',
53: '云南',
54: '西藏 ',
61: '陕西',
62: '甘肃',
63: '青海',
64: '宁夏',
65: '新疆',
71: '台湾',
81: '香港',
82: '澳门',
91: '国外 ',
};
var tip: any = '';
if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
tip = '身份证号输入有误';
Dialog.alert({
message: tip,
confirmButtonColor: '#32AD81',
overlayStyle: { 'background-color': 'rgba(0, 0, 0, 0.3)' },
width: '295px',
});
return;
}
if (!city[code.substr(0, 2)]) {
tip = '身份证号输入有误';
Dialog.alert({
message: tip,
confirmButtonColor: '#32AD81',
overlayStyle: { 'background-color': 'rgba(0, 0, 0, 0.3)' },
width: '295px',
});
return;
}
if (code.length == 18) {
let sBirthday = code.substr(6, 4) + '-' + Number(code.substr(10, 2)) + '-' + Number(code.substr(12, 2));
var d = new Date(sBirthday.replace(/-/g, '/'));
if (sBirthday != d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()) {
tip = '身份证号输入有误';
Dialog.alert({
message: tip,
confirmButtonColor: '#32AD81',
overlayStyle: { 'background-color': 'rgba(0, 0, 0, 0.3)' },
width: '295px',
});
return;
}
}
//18位身份证需要验证最后一位校验位
if (code.length == 18) {
code = code.split('');
//∑(ai×Wi)(mod 11)
//加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
//校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
var sum = 0;
var ai = 0;
var wi = 0;
for (var i = 0; i < 17; i++) {
ai = code[i];
wi = factor[i];
sum += ai * wi;
}
var last = parity[sum % 11];
if (parity[sum % 11] != code[17]) {
tip = '身份证号输入有误';
Dialog.alert({
message: tip,
confirmButtonColor: '#32AD81',
overlayStyle: { 'background-color': 'rgba(0, 0, 0, 0.3)' },
width: '295px',
});
return;
}
}校验-不能大于1，不能小于0.0001
let regular = /^0.[0-9]{0,4}$|^1$/;
if (!regular.test(this.prizeform.probability)) {
this.$message.error("中奖概率不能大于1，最小0.0001");
}接口调用
jiekoufun(id) {
const params = {
Id: id,
};
this.$request(jiekou, params)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
},当前时间
created(){
this.presentTime = this.getPresentTime()
},
methods: {
getPresentTime() {
//获取当前时间并打印
let yy = new Date().getFullYear();
let mm = new Date().getMonth()+1;
let dd = new Date().getDate();
let hh = new Date().getHours();
let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
let time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf;
return time;
},
}时间戳转化字符串
setTime(time) {
let date = new Date(time);
let Y = date.getFullYear();
let M =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1;
let D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let m =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
},<el-table-column
label="操作"
min-width="278"
>
<template slot-scope="scope">
<span class="fljuevealcen">
<span class="spanfont1" @click="function(scope.row)">编辑</span>
</span>
</template>
</el-table-column>function(row) {
this.startTime = new Date(row.startTime);
this.endTime = new Date(row.endTime);
},结束时间大于开始时间
<el-form-item label="开始时间：">
<el-col :span="24">
<el-date-picker
placeholder="选择开始时间"
:picker-options="startDatePicker"
type="datetime"
v-model="form.startTime"
></el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="结束时间：">
<el-col :span="24">
<el-date-picker
placeholder="选择结束时间"
:picker-options="endDatePicker"
type="datetime"
v-model="form.endTime"
></el-date-picker>
</el-col>
</el-form-item>data() {
return {
// 开始时间不大于结束时间
startDatePicker: this.beginDate(),
endDatePicker: this.processDate(),
}
}
methods: {
beginDate() {
const self = this;
return {
disabledDate(time) {
if (self.form.endTime) {
//如果结束时间不为空，则小于结束时间
return new Date(self.form.endTime).getTime() < time.getTime();
} else {
// return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
}
},
};
},
processDate() {
const self = this;
return {
disabledDate(time) {
if (self.form.startTime) {
//如果开始时间不为空，则结束时间大于开始时间
return new Date(self.form.startTime).getTime() > time.getTime();
} else {
// return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
}
},
};
},
}el-load上传图片-上传一张后隐藏上传加号
<el-upload
action="/api/file/upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-change="handleChange"
:class="{ hide: hideUpload }"
:file-list="fileListPrizeImage"
:on-remove="handleRemove"
:on-success="onPrizeSuccess"
>
<span class="addactivespan1"
><i class="el-icon-plus"></i
></span>
</el-upload>
<el-dialog
:visible.sync="dialogVisible"
:modal-append-to-body="false"
:append-to-body="true"
>
<img
width="100%"
:src="formtwo.prizeImage"
alt=""
/>
</el-dialog>data() {
return {
hideUpload: false,
limitCount: 1,
fileListPrizeImage: [],
}
}
methods :{
handleRemove(file, fileList) {
this.hideUpload = fileList.length >= this.limitCount;
//this.fileListPrizeImage.splice(0, 1);
//this.formtwo.prizeImage=''
},
handlePictureCardPreview(file) {
this.dialogVisible = true;
},
onPrizeSuccess(response, file, fileList) {
this.formtwo.prizeImage = response.data.showUrl;
},
handleChange(file, fileList) {
this.hideUpload = fileList.length >= this.limitCount;
},
}.hide /deep/.el-upload--picture-card {
display: none;
}加密
<span>{{ namefun()[0] }} {{ namefun()[1] }}</span>
<div @click="clickshow" v-if="showhidden">
点击显示、隐藏
</div>
//展示或 ****
namefun() {
const stars = '****';
if (this.showhidden=== 0) {
return [stars,stars];
} else {
return [this.name,this.id];
}
},
// 点击显示、隐藏
clickshow(){
if(this.showhidden==1){
this.showhidden=0
}else if(this.showhidden==0){
this.showhidden=1
}
},防抖节流-获取验证码
data() {
return {
smscode:true,
count: '',
timer: null,
}
}
methods:{
getsms(){
this.$get(jiekou, canshu).then(res => {
console.log(res);
if (res.code === "SUCCESS") {
this.$message.success('验证码已发送')
} else {
this.$message.error(res.msg)
}
})
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.smscode = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.smscode = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
},
}<el-form-item label="验证码" prop="Code">
<el-input v-model="formData.Code" placeholder="请输入验证码" maxlength="6">
<template slot="append">
<span @click="getsms" v-if="!timer">获取验证码</span>
<span v-if="timer">获取验证码({{count}}s)</span>
</template>
</el-input>
</el-form-item>css添加伪元素before/after,并为伪元素添加点击事件
重点是将子css设为pointer-events: auto;将父级设为pointer-events: none;然后给父级添加点击事件就好,但是有限制:父级里面的原本的点击事件会失效,所以尽量还是不要用这种方法,资料来源下方链接
https://blog.csdn.net/c_furong/article/details/126174590
扫一扫
2684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
