常用代码记录

正则提取 cookie

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

下载绕过弹窗

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();

组件被复用导致刷新问题

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
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;
}
})
}

获取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="xxx://com.xxx">跳转APP</a>
<a href="xxx://com.xxx.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;

IOS平滑滚动

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

下载文件

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();

移动端适配

如下配置,则px为多少就写多少,以750px设计稿为底

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function (doc, win) {
let docEl = win.document.documentElement;
let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
let refreshRem = function () {
let clientWidth = win.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;
if (!clientWidth) return;
let fz;
let width = clientWidth;
fz = 16 * width / 375;
docEl.style.fontSize = fz + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, refreshRem, false);
doc.addEventListener('DOMContentLoaded', refreshRem, false);
refreshRem();
})(document, window);

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 32,
exclude: /(node_module)/,
minPixelValue: 3
}),
]
}
}
},

v-model

官网只给了一个Input的事例,但是自定义组件怎么用呢? 组件内实际上接受了一个value的值,传出去的事件为input

dialog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div class="page" v-show="value">
<button @click="close">关闭</button>
</div>
</template>

<script>
export default {
props: ['value'],
methods: {
close() {
this.$emit('input', false)
}
},
}
</script>

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<VDialog v-model="modal"></VDialog>
// 下面的语法糖
<VDialog :value="modal" @input="modal = arguments[0]"></VDialog>

<script>
import VDialog from '../components/dialog';
export default {
components:{
VDialog
},
data() {
return {
modal: false
};
},
}
</script>

npm yarn 代理设置

查看

yarn config list
yarn config get registry

淘宝源

npm config set registry https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org

npm config set proxy http://127.0.0.1:10080
yarn config set proxy http://127.0.0.1:1080
npm config delete proxy
yarn config delete proxy

mac终端,当前有效

export http_proxy=http://proxyAddress:port

win CMD下

set HTTP_PROXY=http://127.0.0.1:10080
set HTTPS_PROXY=http://127.0.0.1:10080

power shell

设置代理
netsh winhttp set proxy http://127.0.0.1:10080
取消代理
netsh winhttp reset proxy http://127.0.0.1:10080
查看代理
netsh winhttp show proxy http://127.0.0.1:10080

移动端适配

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function (doc, win) {
var docEl = doc.documentElement, // 获取html标签
// 页面大小改变事件
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
// 动态设置html标签字体大小,便于使用rem缩放
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 100, //换算基数, 默认100,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
minPixelValue: 3
}),
]
}
}
}
}

console

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
console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');

console.group('组开头')
console.groupCollapsed('可折叠的组')
console.groupEnd('结束')

// 输出表格
console.table(Array || Object);


console.assert(true, "不展示");

console.assert(false, "展示");
console.assert((() => false)(), "展示");

// 栈追踪
let add2 = (a, b) => add1(a, b)
let add1 = (a, b) => add(a, b)
let add = (a, b) => {
console.trace("Add function")
return a + b
}
add2(1, 1)

// 代码执行时间
console.time("唯一性标示");
console.timeEnd("唯一性标示");

markdown

1
2
3
4
5
6
7
  ├── README.md  
├── copy-static-assets.ts
+ ├── client-src
+ │   ├── components
+ │ │ └── Header.tsx
+ │   └── tsconfig.json
└── tslint.json

electron & node-sass

.npmrc

1
2
3
4
registry=https://registry.npm.taobao.org
electron_mirror=https://npm.taobao.org/mirrors/electron/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

npm-link

库: yarn link
项目: yarn link 库名
每次项目 npm i 或者 yarn 后都需要重新 yarn link 一下