Vue 常用的方法封装

最新推荐文章于 2024-05-13 17:47:15 发布

qq_42753983

最新推荐文章于 2024-05-13 17:47:15 发布

阅读量632

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42753983/article/details/134926194

版权

1.在utils文件夹中的index.js

2.具体方法

1-1 根据年月获取当月[开始日期,结束日期](yyyy-MM)
    export const getStartEnd = (date) => {
      if(date!=null&&date!=''){
        const nyYear=date.slice(0,4);
        const nyMonth=date.slice(5,date.length);
        const firstDay = new Date(nyYear,nyMonth-1);
        const lastDay = new Date(new Date(nyYear,nyMonth).valueOf()-60*60*1000*24);
        function datasFormat(d){
          const datetime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
          return datetime;
        }
        return [datasFormat(firstDay), datasFormat(lastDay)]
      }
    }
    
1-2 使用场景 
    1.在页面引入  
      import { getStartEnd } from "@/utils/index.js";
    2.使用
      const date="2023-12"
      console.log(date.getStartEnd())  //   ['2023-12-1', '2023-12-31']

1-1 必填项验证
    export function requireVaildate(val) {
      if (val === null || val === undefined || val === "") {
        return false;
      }
      return true;
}
    
1-2 使用场景 
    1.在页面引入  
      import { requireVaildate } from "@/utils/index.js";
    2.使用
      if (!requireVaildate(表单的某个字段)) {
          this.$msgTip("XXX不能为空");
          return
      }

1-1 筛选id得到对应字段  使用`filterData` 函数来根据给定的 id 进行过滤
    export function filterData(id, list) {
      let code = ''
      list.forEach(item => {
        if(item.id == id){
          code = item.code
        }
      })
      return code
    }
    
1-2 使用场景 
    1.在页面引入  
      import { filterData} from "@/utils/index.js";
    2.使用
      let list = [
          { id: 1, code: "A" },
          { id: 2, code: "B" },
          { id: 3, code: "C" },
          { id: 4, code: "D" },
      ];
      //filterData(2, list)调用了`filterData`函数,该函数遍历了列表并返回了匹配到id为2的对象的code
      let result = filterData(2, list);
      console.log(result); // 这应该输出 'B'

1-1 筛选id得到对应字段  
    使用filterDataName函数时,你可以传入要搜索的id值、用于搜索的键(key),以及要返回的值的名称valuename
    export function filterDataName(id, list) {
      let code = ''
      list.forEach(item => {
        if(item[key] == id){
          code = item[valuename]
        }
      })
      return code
    }
    
1-2 使用场景 
    1.在页面引入  
      import { filterDataName} from "@/utils/index.js";
    2.使用
      let list = [
        { userId: 1, userName: 'Alice' },
        { userId: 2, userName: 'Bob' },
        { userId: 3, userName: 'Charlie' },
        { userId: 4, userName: 'David' }
      ];
      //filterDataName(3, list, 'userId', 'userName')调用了filterDataName函数,该函数根据提供的id和对应的键'userId'来搜索值,并返回了匹配的'userName'
      let result = filterDataName(3, list, 'userId', 'userName')
      console.log(result); // 这应该输出 'Charlie'

1-1 转千分位（null不处理） 
    用于格式化数字为千位分隔的格式。如果输入的数字为空（null），则返回空字符串；否则，将数字格式化为千位分隔，并保留两位小数，最后返回格式化后的字符串。
   export function formatThousandthNull(num) {
     if(num == null) {
       return ''
     } else {
       let percent = '';
       let _num = Number(num).toFixed(2)
       const regExpInfo = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
       let ret = _num.toString().replace(regExpInfo, "$1,");
       if(!ret.includes('.')) {
         percent = '.00'
       }
       return ret + percent;
     }
   }
    
1-2 使用场景 
    1.在页面引入  
      import { formatThousandthNull } from "@/utils/index.js";
    2.使用
      函数`formatThousandthNull`被调用多次，包括对 1234567.89 、1000、123 和 null的输入进行了测试。根据函数的逻辑，在第一个例子中，函数将 1234567.89 格式化为了 "1,234,567.89"；在第二个例子中，函数将 1000 格式化为了 "1,000.00"；在第三个例子中，函数将 123 格式化为了 "123.00"；最后一个例子中，函数将 null 格式化为空字符串 ""。
      console.log(formatThousandthNull(1234567.89)); // 输出 "1,234,567.89"
      console.log(formatThousandthNull(1000)); // 输出 "1,000.00"
      console.log(formatThousandthNull(123)); // 输出 "123.00"
      console.log(formatThousandthNull(null)); // 输出 ""

1-1 去除千分位
   定义了一个名为 delcommafy 的函数，用于删除数字中的逗号，并将结果转换为数字类型
   export function delcommafy(num){
     return Number(num.toString().replace(/,/g, ''))
   }
    
1-2 使用场景 
    1.在页面引入  
      import { delcommafy} from "@/utils/index.js";
    2.使用
      函数 delcommafy 被用于输入包含逗号的字符串，例如 "1,234,567.89", "1,000.00" 和 "123.00"。函数会移除这些字符串中的逗号，并将结果转换为数字类型。因此，分别对于这三个例子，函数的输出分别为 1234567.89, 1000 和 123。
      console.log(delcommafy("1,234,567.89")); // 输出 1234567.89
      console.log(delcommafy("1,000.00")); // 输出 1000
      console.log(delcommafy("123.00")); // 输出 123

// 此文件为获取时间工具
import moment from "moment";

export function dateFormat(value, formatString = "YYYY-MM-DD") {
  return moment(value).format(formatString);
}
console.log(dateFormat("2022-10-20")); // 输出 "2022-10-20"
console.log(dateFormat("2022-10-20", "YYYY/MM/DD")); // 输出 "2022/10/20"


// 获取次日
export function nextDay(params) {
  return moment().add(1, "days").format("YYYY-MM-DD");
}
console.log(nextDay()); // 输出明天的日期格式，例如 "2022-10-21"

// 通话时长
export function durationFormat(value, formatString = "mm:ss") {
  return moment.utc(value).format(formatString);
}
console.log(durationFormat(3600)); // 输出格式化后的时长，例如 "01:00"

//函数获取指定日期后下午3点的时间
export function nextDayAfterneen(date) {
  return moment(date).add(1, "days").format("YYYY-MM-DD 15:00:00");
}
console.log(nextDayAfterneen("2022-10-20")); // 输出指定日期后一天下午3点的时间，例如 "2022-10-21 15:00:00"

//获取今天到指定n天后时间
export function nextDayTime(num) {
  return moment().add(num, "days").format("YYYY-MM-DD");
}
console.log(nextDayTime(3)); // 输出三天后的日期，例如 "2022-10-23"

//获取今天到指定n天前时间
export function afterDayTime(num) {
  return moment().subtract(num, "days").format("YYYY-MM-DD");
}
console.log(afterDayTime(5)); // 输出五天前的日期，例如 "2022-10-15"

// 获取前一日
export function beforeDay(params) {
  return moment(params).add(-1, "days").format("YYYY-MM-DD");
}
console.log(beforeDay("2022-10-20")); // 输出指定日期的前一日，例如 "2022-10-19"

// 获取前七日
export function beforeSevenDay(params) {
  return moment(params).add(-7, "days").format("YYYY-MM-DD");
}
console.log(beforeSevenDay("2022-10-20")); // 输出指定日期的前七日，例如 "2022-10-13"


// 比较时间大小
export function compareTime(date1, date2) {
  const date1Tmp = date1 && date1.replace("-", "/");
  const date2Tmp = date2 && date2.replace("-", "/");
  const date1Parse = new Date(Date.parse(date1Tmp));
  const date2Parse = new Date(Date.parse(date2Tmp));
  return date1Parse > date2Parse;
}
console.log(compareTime(this.visit.scheduleTime, this.visit.createdTime)) // 输出 true 或 false，表示日期大小的比较结果

// 日期是否为同一天
export function sameDay(date1, date2) {
  const date1Tmp = date1.split(" ")[0]
  const date2Tmp = date2.split(" ")[0]
  return date1Tmp == date2Tmp
}
console.log(sameDay("2022-10-20 12:00:00", "2022-10-20 18:00:00")); // 输出 true 或 false，表示两个日期是否为同一天