美文网首页工作生活
Vue+ElementUi 下常用方法封装

Vue+ElementUi 下常用方法封装

作者: Thomas赵骐 | 来源:发表于2019-07-01 17:54 被阅读0次
import { Message } from "element-ui"

// 引用类型拷贝
const depCopy = data => JSON.parse(JSON.stringify(data))
// 时间戳转换
const formatDateTime = inputTime => {
  let time = inputTime * 1000
  let date = new Date(time)
  let year = date.getFullYear()
  let m = date.getMonth() + 1
  m = m < 10 ? "0" + m : m
  let d = date.getDate()
  d = d < 10 ? "0" + d : d
  let h = date.getHours()
  h = h < 10 ? "0" + h : h
  let minute = date.getMinutes()
  let second = date.getSeconds()
  minute = minute < 10 ? "0" + minute : minute
  second = second < 10 ? "0" + second : second
  return year + "-" + m + "-" + d + " "
}
const getUrlKey = name => {
  // 获取 url 参数
  return (
    decodeURIComponent(
      (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
        location.href
      ) || [, ""])[1].replace(/\+/g, "%20")
    ) || null
  )
}
const valueSize = (value, min, max) => {
  //传入数值,最小值,最大值,无要求则传入 false
  if (min !== false) {
    if (value < parseInt(min)) {
      Message({ message: `输入值不能小于${min}`, type: "info" })
      return
    }
  }

  if (max !== false) {
    if (value > parseInt(max)) {
      Message({ message: `输入值不能大于${max}`, type: "info" })
      return
    }
  }
}
const valueLength = (value, min, max) => {
  //传入数值,最小值,最大值,无要求则传入 false

  let length = value.length
  if (min !== false) {
    if (length < parseInt(min)) {
      Message({ message: `输入值长度不能小于${min}`, type: "info" })
      return
    }
  }
  if (max !== false) {
    if (length > parseInt(max)) {
      Message({ message: `输入值长度不能大于${max}`, type: "info" })
      return
    }
  }
}
const emailTest = value => {
  let reg = /^([a-z0-9A-Z_]+[-|\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\.)+[a-zA-Z]{2,}$/
  if (!reg.test(str)) {
    Message({ message: `请输入正确的邮箱格式`, type: "info" })
    return
  }
}
const phoneTest = value => {
  let reg = /(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})$/
  if (!reg.test(str)) {
    Message({ message: `请输入正确的手机格式`, type: "info" })
    return
  }
}
const ipAddress = value => {
  let reg = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/
  if (!reg.test(str)) {
    Message({ message: `ip 地址有误`, type: "info" })
    return
  }
}
const storage = {
  set(key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  get(key) {
    return JSON.parse(localStorage.getItem(key))
  },
  remove(key) {
    localStorage.removeItem(key)
  }
}
export {
  depCopy, //深拷贝
  getUrlKey, //获取 url 参数
  formatDateTime, //日期格式化
  valueSize, //数值范围校验
  valueLength, //数值长度校验
  emailTest, //邮箱校验
  phoneTest, //手机号校验
  ipAddress, //ipv4校验
  storage //操作 localStorage
}

相关文章

网友评论

    本文标题:Vue+ElementUi 下常用方法封装

    本文链接:https://www.haomeiwen.com/subject/jhugcctx.html