关于一些封装（vue相关）

css篇（scss）

清除默认样式

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  display: block;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* custom */
 
a {
  -webkit-backface-visibility: hidden;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
a:hover {
  text-decoration: none;
}
li {
  list-style: none;
}
body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a, button, input { //清除点击效果
  -webkit-tap-highlight-color: #fff;
}
input { //清除聚焦时边框
  outline: none;
}
img {
  -webkit-touch-callout: none;
  width: 100%;
  height: 100%;
}

复用scss

// 省略号
@mixin text-overflow($line:1) {
  @if $line==1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @else {
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// flex居中
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin flex($justify:flex-start, $align:flex-start) {
  display: flex;
  justify-content: $justify;
  align-items: $align;
}

// absolute居中
@mixin absolute-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// absolute 底部
@mixin absolute-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
}

// 蒙层背景
@mixin mask($color: $color-black-85, $index: 101) {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: $color;
  z-index: $index;
}

// 背景图片
@mixin bgImage($url, $position: center, $size: 100%) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-position: $position;
  background-size: $size;
}

// 圆形
@mixin circle($size) {
  width: $size;
  height: $size;
  border-radius: 50%;
  overflow: hidden;
}

// 文字居中
@mixin text-center($height) {
  text-align: center;
  height: $height;
  line-height: $height;
}

// 关闭按钮
@mixin close_btn {
  position: absolute;
  right: 30px;
  top: 30px;
  width: 40px;
  height: 40px;
  z-index: 101;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 40px;
    height: 5px;
    border-radius: 10px;
    background: #999;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -moz-transform: rotate(45deg);
    /* Firefox */
    -webkit-transform: rotate(45deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(45deg);
    /* Opera */
    z-index: 99;
    transform-origin: center center;
  }
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 40px;
    height: 5px;
    border-radius: 10px;
    background: #999;
    transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    /* IE 9 */
    -moz-transform: rotate(135deg);
    /* Firefox */
    -webkit-transform: rotate(135deg);
    /* Safari 和 Chrome */
    -o-transform: rotate(135deg);
    /* Opera */
    z-index: 99;
    transform-origin: center center;
  }
}

js篇

关于缓存

let Storage = {
  // ==================sessionsTorage设置缓存================
  // 设置缓存
  sessionSet(name, data) {
    sessionStorage.removeItem(name);
    sessionStorage.setItem(name, JSON.stringify(data));
  },
  // 获取缓存
  sessionGet(name) {
    return JSON.parse(sessionStorage.getItem(name));
  },
  // 清除缓存
  sessionRemove(name) {
    sessionStorage.removeItem(name);
  },
  // ==================localStorage设置缓存==================
  // 设置缓存
  localSet(name, data) {
    localStorage.removeItem(name);
    localStorage.setItem(name, JSON.stringify(data));
  },
  // 获取缓存
  localGet(name) {
    return JSON.parse(localStorage.getItem(name));
  },
  // 清除缓存
  localRemove(name) {
    localStorage.removeItem(name);
  }
};

export default Storage;

节流函数

let util = {
  /*节流函数，通过控制每次事件执行的时间间隔控制短时间多次执行方法
    fn: 要执行的方法
    wait:每次事件执行的推迟时间(毫秒)
    immediate: 是否立即执行
    */
  throttle: (fn, wait, immediate) =>
    util.debounceOrThrottle(fn, wait, immediate, true),
  debounceOrThrottle(
    fn,
    wait = 300,
    immediate = false,
    executeOncePerWait = false
  ) {
    if (typeof fn !== "function") {
      console.error("传入参数必须为函数");
      return;
    }

    let tId = null;
    let context = null;
    let args = null;
    let lastTriggerTime = null;
    let result = null;
    let lastExecutedTime = null;

    const later = function() {
      const last =
        Date.now() - (executeOncePerWait ? lastExecutedTime : lastTriggerTime);

      if (last < wait && last > 0) {
        setTimeout(later, wait - last);
      } else {
        if (!immediate) {
          executeOncePerWait && (lastExecutedTime = Date.now());
          result = fn.apply(context, args);
          context = args = null;
        }
        tId = null;
      }
    };

    return function() {
      context = this;
      args = arguments;
      !executeOncePerWait && (lastTriggerTime = Date.now());
      const callNow = immediate && !tId;

      if (!tId) {
        executeOncePerWait && (lastExecutedTime = Date.now());
        tId = setTimeout(later, wait);
      }

      if (callNow) {
        executeOncePerWait && (lastExecutedTime = Date.now());
        result = fn.apply(context, args);
        context = args = null;
      }

      return result;
    };
  },

  // 复制内容
  onCopy(content) {
    let oInput = document.createElement("input");
    oInput.value = content;
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象;
    console.log(oInput.value);
    document.execCommand("Copy"); // 执行浏览器复制命令
    oInput.remove();
  }
};

module.exports = util;