小技巧

1.日期格式化（yyyy-mm-dd hh:mm）

dateFormatter(val) {
    const YYYY = val.getFullYear()
    const MM = val.getMonth() + 1 < 10 ? "0" + (val.getMonth() + 1) : val.getMonth() + 1;
    const DD = val.getDate() < 10 ? "0" + val.getDate() : val.getDate();
    const hh = val.getHours() < 10 ? "0" + val.getHours() : val.getHours();
    const mm = val.getMinutes() < 10 ? "0" + val.getMinutes() : val.getMinutes();
    return `${YYYY}-${MM}-${DD} ${hh}:${mm}:`
  }

2.日期相减计算（y年m月d日h时m分）

getRemainderTime(val) {
    let runTime = null
    runTime = parseInt(val) / 1000;
    let year = Math.floor(runTime / 86400 / 365);
    runTime = runTime % (86400 * 365);
    let month = Math.floor(runTime / 86400 / 30);
    runTime = runTime % (86400 * 30);
    let day = Math.floor(runTime / 86400);
    runTime = runTime % 86400;
    let hour = Math.floor(runTime / 3600);
    runTime = runTime % 3600;
    let minute = Math.floor(runTime / 60);
    runTime = runTime % 60;
    let second = runTime;
    // console.log(year,month,day,hour,minute,second);
    this.countHour = parseInt(val) / 1000 / 3600
    return `${year?year+'年':''}${month?month+'月':''}${day?day+'天':''}${hour?hour+'小时':''}${minute?minute+'分钟':''}`
  }

3.音频流转mp3格式

convertToMp3(wavDataView) {
    // 获取wav头信息
    const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实可以不用去读wav头信息，毕竟有对应的config配置
    const {
      channels,
      sampleRate
    } = wav;
    const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
    // 获取左右通道数据
    const result = recorder.getChannelData()
    const buffer = [];
    const leftData = result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);
    const rightData = result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);
    const remaining = leftData.length + (rightData ? rightData.length : 0);
    const maxSamples = 1152;
    for (let i = 0; i < remaining; i += maxSamples) {
      const left = leftData.subarray(i, i + maxSamples);
      let right = null;
      let mp3buf = null;
      if (channels === 2) {
        right = rightData.subarray(i, i + maxSamples);
        mp3buf = mp3enc.encodeBuffer(left, right);
      } else {
        mp3buf = mp3enc.encodeBuffer(left);
      }
      if (mp3buf.length > 0) {
        buffer.push(mp3buf);
      }
    }
    const enc = mp3enc.flush();
    if (enc.length > 0) {
      buffer.push(enc);
    }
    let blob = new Blob(buffer, {
      type: 'audio/mp3'
    })
    return blob
  }

4.隐藏横向滚动条

::-webkit-scrollbar {
  width: 0 !important;
}

5.购物车

千分位符+两位小数 过滤器

Vue.filter('money',function(val=''){
    let str=(val/100).toFixed(2); //后台返回的是不含小数点的数字
  let s=str.match(/(\d+)\.(\d+)/);
  return s[1].replace(/(\d{1,3})(?=(\d{3})+)$)/g,'$1,')+'.'+s[2]
})

computed:{
    checkAll:{
      get(){
        if(this.list.length==0)return false;
      return this.list.every(item=>item.isSelect)
    },
    set(val){
        this.list.forEach(item=>item.isSelect=val)
    }
  },
   //总价
   total(){
       return this.list.reduce((prev,next)=>{
        if(next.isSelect){
          return prev+next.count*next.price
      }else{
          return prev
      }
    },0)
   }
},

1、阻止input显示历史记录
不让浏览器保留表单输入的历史记录，只要在input标签里加入autocomplete=”off “这个属性就可以啦。
2、 利用 CSS 穿透覆盖默认样式
常见发生场景：假如我们需要通过 input，type=”file”来上传文件，而这个 input 的默认样式，可以说是非常地丑。所以我们希望通过一张图片，与这个 input 大小一样，位置一致地盖在上面。这个时候，显然，这个时候点击图片，input 是不会起作用的。就是因为 img 隔绝了 click 的穿透，而我们希望的是，这个 img 只是视觉上遮挡了 input 的样式，但是点击的时候还是点击到 input。所以，只要让 img 可穿透即可。
img { pointer-events: none; }
3、安卓或者ios拨号功能
：888转023 ：直接拨打手机号11211211212
4、实现自定义原生 select 控件的样式
由于 select 移动端原生样式很丑，但是原生弹出效果是符合我们设计的原则。直接修改 select 的样式的时候，一个奇怪的现象出现了，在 chrome 上调试的时候，自己定义的样式起了作用，在 Android 手机上也起了作用，但是到了 ios 手机上就不行了，典型的不兼容问题，这个时候禁用原生的样式即可。
select { -webkit-appearance: none; }
5、display:inline-block间隔解决
使用display:inline-block;会出现间隔，解决办法是：
在其父级添加：font-size:0
但是谷歌浏览器有默认最小字体限制，所以为了兼容还需加上-webkit-text-size-adjust:none 这一条
6、小程序快速创建4个文件
微信快速创建4个文件即：.wxml js json wxss包括目录一起：
在app.json的page里面直接填入要加入的页面比如：“pages/addr/addr”
然后自动就在pages目录下创建了addr目录，下面并且也有标准的4个文件。
7、文本溢出处理
移动设备相对来说页面较小，很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略，多行详情介绍溢出省略。现在都用框架开发了，这种建议需求建议形成一个基础组件，方便快捷。
//单行 .single { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } //多行 .more { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; work-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; //指定行数 }
8、一像素边框设置
很多时候，想保持边框的大小在任何设置上都是 1px，但是因为 1px 使用 2dp 渲染，也就是说会显示为 2px 大小。所以，要采用 css3 缩放一下。
.folder li { position: relative; padding: 5px; } .folder li + li:before { position: absolute; top: -1px; left: 0; content: “ “; width: 100%; height: 1px; border-top: 1px solid #ccc; -webkit-transform: scaleY(0.5); }
9、给动态添加的元素绑定事件
利用事件代理达到这个效果即可。如：
$(document).on(“click”, “.large”, slide); //jq中的写法 //第一个参数表示的是对应事件，第二个是需要绑定事件的元素的id或class，第三个是绑定的对应的事件函数名
10、 防止鼠标选中事件