Flands Blog HomeArchivesTags
常用代码记录

正则提取 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
31
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 一下