工作记录

element-ui 日期,今天及以后

1
2
3
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7
}

element-ui清空多选

调用子组件的方法,但是需要传入一个函数

1
2
3
let obj = {}
obj.stopPropagation = () =>{}
this.$refs.city.clearValue(obj)

正则提取

1
2
3
4
if (document.cookie.match(/username=.*/)) {
let username = document.cookie.match(/username=.*/)[0].slice(9);
this.loginForm.username = username;
}

stylus三个插件

  1. stylus
  2. stylus-loader
  3. vue-style-loader

id路由跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// router
// /id? 的方式可以表示可有可无,否则404
{
path: "/mall/:id",
name: 'mall',
component: mall,
props: true,
}
// page
this.$router.push({
name: `mall`,
path: `/mall`,
params: {
id: data.id
}
})

关闭sourceMap

打包后可以在chrome中看到vue的源码,所以关闭掉。
到路径 src/config/index.js
productionSourceMap:false

下载绕过弹窗

1
2
3
4
5
6
7
8
9
let f = document.createElement("form"); 
document.body.appendChild(f);
let i = document.createElement("input");
i.type = "hidden";
f.appendChild(i);
i.value = "5";
i.name = "price";
f.action = data.excel_url; //下载的url 地址 f.submit();
f.submit();

加载文件前一段loading

很简单,加载完文件后才会进入到app.vue的mounted阶段。

  • index.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="loading">
    <div id="loading-center">
    <div id="loading-center-absolute">
    <div class="lds-css ng-scope" style="width: 200px; height: 200px;">
    <div style="width:100%;height:100%" class="lds-pacman">
    </div>
    </div>
    </div>
    </div>
    </div>
    <div id="app"></div>
  • app.vue

    1
    2
    3
    4
    5
    6
    7
    8
    mounted() {
    let loading = document.querySelector('#loading')
    loading.style.opacity = 0
    loading.style.transform = 'scale(5)'
    let app = document.querySelector('#app')
    app.style.opacity = 1
    setTimeout(() => loading.remove(), 500)
    }

组件被复用导致刷新问题

1
<router-view :key="key"></router-view>
1
2
3
4
5
6
7
computed: {
key() {
return this.$route.name !== undefined
? this.$route.name + new Date().getTime()
: this.$route.name + new Date().getTime();
}
}

CSS隐藏滚动条

CSS3的伪元素 .element::-webkit-scrollbar { width: 0 !important }

下载文件

1
2
3
4
5
6
7
downExcel(url) {
const name = url.match(/excel.*/)[0].slice(6, url.length - 1)
const a = document.createElement('a');
a.setAttribute('href', `http://${url}`);
a.setAttribute('download', name);
a.click();
},

数字过滤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
// 价格过滤
Vue.prototype.$fM = function formatMoney(money) {
if (money === 0 || money === '0' || !money) return 0
money = "" + money
if (money.indexOf('.') >= 0) {
return money
}
let len = money.length;
if (len > 2) {
if (money.substring(len - 2) === "00") {
return money.substring(0, len - 2);
}
return money.substring(0, len - 2) + "." + money.substring(len - 2);
} else if (len == 2) {
return "0." + money;
} else if (len == 1) {
return "0.0" + money;
} else {
return "0.00";
}
}

// 过滤传来的数据
Vue.prototype.$httpData = function (data) {
let dataFunc = function (data) {
let keys = Object.keys(data)
keys.forEach( key => {
try {
if (typeof data[key] == 'string' && /^[\[\{].*?[\]\}]$/.test(data[key])) {
data[key] = JSON.parse(data[key])
}
} catch (error) {
console.log(error);
}
})
return data
}

if (Array.isArray(data)) {
let dataArr = []
data.forEach(e => {
dataArr.push(dataFunc(e))
})
return dataArr
} else {
return dataFunc(data)
}
}

// 检查数字
Vue.prototype.$checkNum = (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入数据"))
} else if (Number(value)!==0 && !Number(value)) {
return callback(new Error("仅能输入数字"))
} else {
return callback()
}
}
Vue.prototype.$checkNumNoRequired = (rule, value, callback) => {
if (Number(value)!==0 && !Number(value)) {
return callback(new Error("仅能输入数字"))
} else {
return callback()
}
}
Vue.prototype.$checkTel = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入电话号码"))
} else if (!/((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/.test(value)) {
callback(new Error("电话号码输入错误"))
} else {
callback()
}
}
Vue.prototype.$checkIdcard = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入身份证号"))
} else if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
callback(new Error("身份证号输入错误"))
} else {
callback()
}
}

// 仅为整数百分比
Vue.prototype.$percentageNum = (rule, value, callback) => {
if (!value || !/^[0-9]*$/.test(value)) {
callback(new Error("请输入整数"))
} else if (Number(value) >100) {
callback(new Error("不能大于100"))
} else {
callback()
}
}

// 仅为整数
Vue.prototype.$priceNum = (rule, value, callback) => {
if (!value || !/^[0-9]*$/.test(value)) {
callback(new Error("请输入整数"))
} else {
callback()
}
}

// 仅为整数,不为0
Vue.prototype.$priceNumNoZero = (rule, value, callback) => {
if (!value || !/^[0-9]*$/.test(value)) {
callback(new Error("请输入整数"))
} else if (Number(value) === 0) {
callback(new Error("不能为0"))
} else {
callback()
}
}

// 保留小数
Vue.prototype.$price = (rule, value, callback) => {
if (!value && value!=='0') {
callback(new Error("请输入数据"))
} else if (Number(value)!==0 && !Number(value)) {
callback(new Error("仅能输入数字"))
} else if (!/^[0-9]+(\.[0-9]{1,2})?$/.test(value)) {
callback(new Error("最多两位小数"))
} else {
callback()
}
}

日期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
export function DateFormat(time, format) {
let t = new Date(time);
let tf = function (i) {
return (i < 10 ? '0' : '') + i
};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case 'yyyy':
return tf(t.getFullYear());
break;
case 'MM':
return tf(t.getMonth() + 1);
break;
case 'mm':
return tf(t.getMinutes());
break;
case 'dd':
return tf(t.getDate());
break;
case 'HH':
return tf(t.getHours());
break;
case 'ss':
return tf(t.getSeconds());
break;
}
})
}

价格过滤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export function formatMoney(money) {
money = "" + money
if (money.indexOf('.') >= 0) {
return money
}

let len = money.length;
if (len > 2) {
if (money.substring(len - 2) === "00") {
return money.substring(0, len - 2);
}
return money.substring(0, len - 2) + "." + money.substring(len - 2);
} else if (len == 2) {
return "0." + money;
} else if (len == 1) {
return "0.0" + money;
} else {
return "0.00";
}
}

获取url参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 获取Url参数。如果地址存在回调地址参数,则第二个参数传false
export function getQueryObject(url, decode = true) {
if (decode) {
url = decodeURIComponent(url)
}
url = decodeURIComponent(url)
let search = url.substring(url.lastIndexOf("?") + 1);
let obj = {};
let reg = /([^?&=]+)=([^?&=]*)/g;
search.replace(reg, function (rs, $1, $2) {
let name = decodeURIComponent($1);
let val = decodeURIComponent($2);
val = String(val);
obj[name] = val;
return rs;
});
return obj;
}

设置cookie

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Cookies from "js-cookie";

export function Cookie(name, value = undefined) {
if (value) {
let inFifteenMinutes = new Date(new Date().getTime() + 20 * 60 * 60 * 1000);
Cookies.set(name, value, { domain: 'xxx.com', expires: inFifteenMinutes });
Cookies.set(name, value, { domain: 'xxx.cn', expires: inFifteenMinutes });
} else if (value === '') {
Cookies.remove(name, { domain: 'xxx.com' });
Cookies.remove(name, { domain: 'xxx.cn' });
} else {
return Cookies.get(name);
}
}

跳转APP

1
2
<a href="zdd://com.zdd.electronics">跳转APP</a>
<a href="zdd://com.zdd.electronics/product?data=600042">参数跳转</a>

flex布局换行

1
2
3
4
5
6
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-around;
align-items: center;

两个列表检测互相添加

1
2
3
4
5
6
7
8
9
10
11
this.list1.forEach(e => e.isHas=false)
this.list1.forEach((e, index) => {
let has = this.list2.find(el => {
return e.id === el.id
})
if (has) {
// $set设置无效,得赋值后再$set更新
this.list1[index].isHas = true
this.$set(this.list1, index, { ...e })
}
})

匹配数字字母下划线

/^[\d\w_]+$/i.test(value)

#IOS平滑滚动

1
2
html, body, #app
-webkit-overflow-scrolling touch

element-ui 日期控件配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
// 时间日期选择,点击后时间为00:00 - 23:59:59
disabledDate(time) {
let date = Date.now()
// 用中国的时区减世界时
let outTime = 16 * 60 * 60 * 1000 - (date % (24 * 60 * 60 * 1000)) - 1
return time.getTime() > date + outTime
},
shortcuts: [
{
text: '今天',
onClick(picker) {
const end = new Date();
const start = new Date();
picker.$emit('pick', [start, end]);
}
},
{
text: '本月',
onClick(picker) {
const nowDate = new Date();
const monthFirstDay = new Date(nowDate.getFullYear(), nowDate.getMonth(), 1);
const monthNextFirstDay = new Date(nowDate.getFullYear(), nowDate.getMonth() + 1, 1);
const monthLastDay = new Date(monthNextFirstDay - 86400000);
picker.$emit('pick', [monthFirstDay, monthLastDay]);
}
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
}
}
],
// 时间日期选择器的
shortcuts: [
{
text: '今天',
onClick(picker) {
const end = new Date()
end.setHours(23)
end.setMinutes(59)
end.setSeconds(59)
const start = new Date()
start.setHours(0)
start.setMinutes(0)
start.setSeconds(0)
picker.$emit('pick', [start, end]);
}
},
{
text: '本月',
onClick(picker) {
const nowDate = new Date();
const monthFirstDay = new Date(nowDate.getFullYear(), nowDate.getMonth(), 1);
const monthNextFirstDay = new Date(nowDate.getFullYear(), nowDate.getMonth() + 1, 1);
const monthLastDay = new Date(monthNextFirstDay - 86400000);
picker.$emit('pick', [monthFirstDay, monthLastDay]);
}
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
end.setHours(23)
end.setMinutes(59)
end.setSeconds(59)
const start = new Date();
start.setHours(0)
start.setMinutes(0)
start.setSeconds(0)
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
},
]
},

设置当天时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
setDay() {
let filter = function (val) {
if (Number(val) < 10) {
return "0" + val.toString();
} else {
return val;
}
};
let date = new Date();
let year = date.getFullYear();
let month = filter(date.getMonth() + 1);
let day = filter(date.getDate());
let r = `${year}-${month}-${day}`;
this.form.startdate = r;
this.form.enddate = r;
this.status.time.push(r);
this.status.time.push(r);
},

最近一个月

1
2
3
4
5
6
7
8
setDate() {
let end = new Date()
let start = new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)
end = `${DateFormat(end, 'yyyy')}-${DateFormat(end, 'MM')}-${DateFormat(end, 'dd')}`
start = `${DateFormat(start, 'yyyy')}-${DateFormat(start, 'MM')}-${DateFormat(start, 'dd')}`
this.status.date = [start, end]
this.timeForm()
}

下载文件

1
2
3
4
5
6
7
8
9
var f = document.createElement("form")
document.body.appendChild(f)
var i = document.createElement("input")
i.type = "hidden"
f.appendChild(i)
i.value = "5"
i.name = "price"
f.action = downUrl //下载的url 地址 f.submit();
f.submit();