H5常用代码片段

HTML

谷歌浏览器会自动翻译

<html lang="en" translate="no">

网页使用自定义字体

一般设计给到的字体文件是包含全部字体，所以文件会超级大，所以我们需要使用字体生成器提取页面会出现的字，这样字体文件大小会小很多。工具：Fontmin

@font-face { font-family: "myFont"; //简体 src: url("./assets/font/regular.OTF"); } @font-face { font-family: "myFontT"; // 繁体 src: url("./assets/font/SourceHanSerifCN-Heavy.ttf"); } .FB { font-family: myFontT; } .weChat { font-family: myFont; }

input pattern验证数字

只能输入数字的输入框，使用正则pattern后无需验证是否只输入数字。

<input pattern="\d*">

自动识别问题

<!-- 忽略浏览器自动识别数字为电话号码 --> <meta name="format-detection" content="telephone=no"> <!-- 忽略浏览器自动识别邮箱账号 --> <meta name="format-detection" content="email=no">

JS

颜色16进制转rgba

export function hex2Rgba(hex, opacity) {\
if(!hex) hex = "#2c4dae";\
return "rgba(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + "," + (opacity || "1") + ")";\
}

生成uuid

/**
 * 生成uuid
 * @param {number} len 生成指定长度的uuid
 * @param {number} radix uuid进制数
 */
export function uuid(len, radix) {
    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    let uuid = [], i;
    radix = radix || chars.length;
 
    if (len) {
      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
    } else {
      let r;
 
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
      uuid[14] = '4';
 
      for (i = 0; i < 36; i++) {
        if (!uuid[i]) {
          r = 0 | Math.random()*16;
          uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
        }
      }
    }
 
    return uuid.join('');
}
复制代码

生成指定格式的时间字符串

/**
 * 生成指定格式的时间
 * @param {*} timeStemp 时间戳
 * @param {*} flag 格式符号
 */
export function formatTime(timeStemp, flag) {
    let time = new Date(timeStemp);
    let timeArr = [time.getFullYear(), time.getMonth() + 1, time.getDate()];
    return timeArr.join(flag || '/')
}

取深层嵌套对象的属性值


function getPropByPath(obj, path, strict) {
  let tempObj = obj;

  let keyArr = path.split('.');
  let i = 0;
  for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!');
      }
      break;
    }
  }
  return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
  };
};   
let  obj= {
          name: 'ppp',
          delivery: false,
          type: ['777','666',{name:'8888'}],
          resource: '',
          desc: {
              name:'字迹'
          }
        }
console.log(getPropByPath(obj,'type.2.name'))

广播事件

function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    var name = child.$options.componentName;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}

//使用
export default {
  methods: {
    // dispatch是用来向父组件派发事件，
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    // broadcast是向子组件广播事件的。
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};
// 使用 this.dispatch('ElFormItem', 'el.form.blur', [this.value]);

解决浮点数精度丢失问题

    /**
     * num : 浮点数 0.5357*100 = 53.56999999999999
     * digit：位数
     */
    formatFloat(num, digit = 2) {
      var pow = Math.pow(10, digit);
      return Math.round(num * pow) / pow;
    }

先整理到这，下次继续不上！