常用代码收集

JavaScript

获取URL的查询参数

这个获取URL的查询参数代码，是我见过最精简的QAQ

?foo=bar&baz=bing => {foo: bar, baz: bing}

// 获取URL的查询参数
const q={};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);

URL编码和解码

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。

var test1="http://www.w3school.com.cn/My first/"

// 字符串 URI 进行编码。
console.log(encodeURI(test1))
// 字符串 URI 进行解码。
console.log(decodeURI(test1))

生成随机ID

在原型设计时经常使用的创建ID功能。但是我在实际项目中看到有人使用它。其实这并不安全

// 生成长度为11的随机字母数字字符串
Math.random().toString(36).substring(2);
// hg7znok52x

生成随机十六进制代码（生成随机颜色）

使用JavaScript简洁代码生成随机十六进制代码

// 生成随机十六进制代码 如：'#c618b2'
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

获取身份证信息

idCardData(iDCard){
  // 根据身份证号获取出生日期
  const birthday = new Date(iDCard.substring(6, 10) + '-' + iDCard.substring(10, 12) + '-' + iDCard.substring(12, 14))
  // 根据身份证号获取性别
  const sex = (()=>{if (parseInt(iDCard.substr(16, 1)) % 2 == 1) { return '0' } else { return '1' }})()
  //根据身份证号获取年龄
  const age = new Date().getFullYear() - iDCard.substring(6, 10) - 1
  
  return { birthday, sex, age}
}

`CSS`

使用vw定制rem自适应布局

要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
场景：rem页面布局(不兼容低版本移动端系统)
兼容：vw、calc()

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

使用writing-mode排版竖文

要点：通过writing-mode调整文本排版方向
场景：竖行文字、文言文、诗词
兼容：writing-mode
代码：在线演示

<div class="vertical-text">
    <h3>情</h3>
    <p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p>
</div>

.vertical-text {
    writing-mode: vertical-rl;
}

ElementUI复选按钮变单选按钮

场景：单选按钮可以切换单个值

/**
 * @author ZhenYuTsai
 * @description element复选框样式变单选框样式
 */
.z-radio{
  .el-checkbox__inner{
    border: 1px solid #dcdfe6;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
  }
  .el-checkbox__inner::after{
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #fff;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(0);
    border: none;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner:after {
      transform: translate(-50%,-50%) scale(1);
  }
}

插件

生成带图片的二维码

GitHub NPM

npm install qrcode-with-logos --save

项目内部预览打印PDF文件

GitHub NPM

npm install pdfh5 --save

element-ui 的表格与无限滚动的结合

GitHub NPM

npm install el-table-infinite-scroll --save

纯前端下载文件

GItHub NPM 纯前端下载文件

npm install web-downloadfile --save