您的当前位置:首页>全部文章>文章详情

【Vue】Vue3项目filter.js组件封装

CrazyPanda发表于:2023-12-15 23:05:25浏览:329次TAG:

1、element-plus(el-table)修改table的行样式

export function elTableRowClassName({ row, rowIndex }) {
  if (rowIndex % 2 != 0) {
    return 'default-row'
  }
}

2、时间戳转换格式

export function parseTimeFilter(dateTime, dateType) {
  if (dateTime == '' || dateTime == undefined || dateTime == 0) {
    return '';
  }
  let date = new Date(parseInt(dateTime) * 1000);
  let Year = date.getFullYear();
  let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
  let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
  let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
  let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
  if (dateType === 'YYYY/MM/DD') {
    return Year + '/' + Moth + '/' + Day
  } else if (dateType === 'YYYY-MM-DD') {
    return Year + '-' + Moth + '-' + Day
  } else if (dateType === 'YYYY/MM/DD HH:MM:SS') {
    return Year + '/' + Moth + '/' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
  } else if (dateType === 'YYYYMMDDHHMMSS') {
    return Year + '' + Moth + '' + Day + '' + Hour + '' + Minute + '' + Sechond;
  }
  return Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
}

3、对象中过滤掉空的对象或没用到的对象

export function filtrationObject(options, optionsArr) {
  for (let key in options) {
    if (optionsArr.indexOf(key) === -1 || options[key] === '') {
      delete options[key];
    }
  }
  return options;
}

export function filtrationObjectNull(options) {
  for (let key in options) {
    if (options[key] === '' || options[key] === null) {
      delete options[key];
    }
  }
  return options;
}

4、金额正则校验

export function amountRegularCheck(val) {
  let money = val.toString(); // 数值转成字符串
  money = money.replace(/[^\d.]+/, ''); // 禁止非数字和点
  money = money.replace(/^\./g, ''); // 禁止以点开头
  money = money.replace(/\.{2,}/g, '.'); // 禁止连两次输入点
  money = money.replace(/(\.)(\d*)(\1*)/g, "$1$2"); // 一个点后面禁止输入点
  money = money.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 禁止小数超过两位
  money = money.replace(/^0+/, '0'); // 禁止开头连续输入两个0
  if (Number(money) >= 1) {
    money = money.replace(/^0+/, ''); // 输入字符大于等于 1 时剔除开头的 0 
  }
  return money;
}

5、随机生成字符串

const NUMS = '0123456789';
const NUMSANDLETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
export function randomStr(n, isPureNum = false) {
  let possible = isPureNum ? NUMS : NUMSANDLETTERS;
  let ret = '';
  for (let i = 0; i < n; i++) {
    ret += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return ret;
}

6、获取路由中的path

export function getUrlPath() {
  let href = location.href;
  let start = href.indexOf('/#') + 2;
  let end = href.indexOf('?');
  if (end === -1) {
    end = href.length;
  }
  return href.slice(start, end);
}

7、下载文件通用函数

// 示例:then(dowloadFile(filename))
export function downloadFile(filename, content) {
  const blob = new Blob([content]);
  const file = filename;
  if ('download' in document.createElement('a')) { // 非IE下载
    const elink = document.createElement('a');
    elink.download = filename;
    elink.style.display = 'none';
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink);
  } else { // IE10+下载
    navigator.msSaveBlob(blob, file);
  }
}

8、判断小数是几位

// 获取类型
export function getType(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}

// 判断类型
export function isType(obj, type) {
  if (this.getType(type) !== 'string') {
    throw new Error('type param must be string in util.js');
  }
  return this.getType(obj) === type;
}

// 是否是number
export function isNumber(val) {
  return this.isType(val, 'number');
}

export function countDecimals(n) {
  if (!this.isNumber(n)) {
    n = parseFloat(n);
  }
  if (Math.floor(n) === n.valueOf()) {
    return 0;
  }
  return n.toString().split('.')[1].length;
}
文章转自https://blog.csdn.net/DHLSP15/article/details/134987597,如有侵权,可联系删除

猜你喜欢

【Vue】vue怎么转换时间格式
在 Vue.js 中,使用过滤器是一种转换时间格式的便捷方式。以下是如何完成此操作:使用 moment.js 库:安装 moment.js 库:npm install --save moment在 Vue 组件中导入 moment.js:import moment from &#39;moment&#39;使用 moment.js 的 format 方法转换时间格式:const&nbsp;formattedTime&nbsp;=&nbsp;moment(timestamp).format(&amp;#3
发表于:2024-05-19 浏览:285 TAG:
【Vue】深入剖析:Vue核心之虚拟DOM
转载:https://www.cnblogs.com/caihongmin/p/17510878.html前言使用 Vue 做项目也有两年时间了,对 Vue 的 api也用的比较得心应手了,虽然对 Vue 的一些实现原理也耳有所闻,例如 虚拟DOM、flow、数据驱动、路由原理等等,但是自己并没有特意去探究这些原理的基础以及 Vue 源码是如何利用这些原理进行框架实现的,所以利用空闲时间,进行 Vue 框架相关技术原理和 Vue 框架的具体实现的整理。如果你对 Vue 的实现原理很感兴趣,那么就
发表于:2024-05-25 浏览:289 TAG:
【VUE】vue3组件间的通信,父组件调用子组件方法
文章目录一、父组件数据传递N个层级的子组件二、使用v-model指令实现父子组件的双向绑定三、父组件props向子组件传值四、子组件emit向父组件传值五、通过expose和ref来实现父组件调用子组件的方法vue3 provide 与 injectA组件名称 app.vueB组件名称 provideB.vueC组件名称 provideCSetup.vue父组件名称 app.vue子组件名称 v-modelSetup.vue子组件 propsSetup.vue父组件 app.vuevue3 ev
发表于:2024-03-10 浏览:566 TAG:
【Vue】Antd Pro Vue的使用(十二) —— 菜单选中高亮显示问题
Antd Pro Vue2这套框架的路由菜单有两个问题,1、页面迁移子页面,父页面对应的菜单未能选中高亮显示2、登录后默认的菜单或页面刷新后原来的菜单未选中高亮显示网上查到的一些菜单配置都是新版本的,老版本并不支持这些方法,这里总结一下我的解决方法,如果大家有更好的解决方案,欢迎交流。一、解决第一个问题以我的菜单为例商品列表是菜单页面,添加编辑商品是隐藏菜单,我把他们做成了兄弟菜单,而不是子菜单/src/config/router.config.js配置如下然后再/src/layouts/Bas
发表于:2024-05-14 浏览:275 TAG:
【Vue】Antd Pro Vue的使用(一)—— 安装及运行
前言Ant Design Pro 是一个企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。AntDesignVue与react版本有几乎相同的布局AntDesignPro React版本:开箱即用的中台前端/设计解决方案 - Ant Design ProAntDesign组件:Ant Design - 一套企业级 UI 设计语言和 React 组件库Ant
发表于:2024-04-20 浏览:305 TAG:
【Vue】vue使用后端提供的接口
在 vue 中使用后端接口可通过以下步骤实现:安装 axios 库并导入。使用 axios 对象创建 http 请求,如 get 或 post。使用 data 选项传递数据。处理响应,使用 data 属性访问后端返回的数据。使用 vuex 管理从后端获取的数据,通过组件访问。在 Vue 中使用后端接口在 Vue.js 应用中使用后端提供的接口可以让你与服务器通信,获取和更新数据。本文将介绍如何在 Vue 中使用后端接口。1. 安装 Axios首先,你需要安装 Axios 库,这是一个用于发起 H
发表于:2024-04-18 浏览:298 TAG:
【Vue】vue3+node+Element-Ui+spark-md5实现大文件上传、断点续传、秒传、多大文件上传
文章目录目录文章目录前言整体架构流程技术名词解释前端大文件上传断点续传后端大文件上传代码部分js部分的逻辑,按照我们的上面的分析,我们可以写出如下的结构将文件变成二进制,方便后续分片将大文件进行分片创建切片请求将每一个切片 并行/串行 的方式发出后端接口逻辑小结前言在Vue项目中,大图片和多数据Excel等大文件的上传是一个非常常见的需求。然而,由于文件大小较大,上传速度很慢,传输中断等问题也难以避免。因此,为了提高上传效率和成功率,我们需要使用切片上传的方式,实现文件秒传、断点续传、错误重试、
发表于:2023-12-05 浏览:325 TAG:
【Vue】Vue中的组件生命周期以及应用场景介绍
vue是一款流行的javascript框架,它以其简化开发过程和高度可扩展性而闻名。vue的核心理念之一就是组件化,使得我们可以将应用程序拆解成一系列独立、可复用的组件。每个组件都有一个生命周期,它定义了组件被创建、被使用、被销毁的各个阶段。这个生命周期可以帮助我们更好地理解组件的工作原理,并在应用程序中使用不同的生命周期钩子完成特定的任务。在本文中,我们将详细介绍vue中的组件生命周期,以及如何应用生命周期钩子函数。组件生命周期在Vue中,组件有三个周期阶段:初始化阶段、运行阶段和销毁阶段。每
发表于:2024-04-29 浏览:316 TAG:
【VUE】Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!
先上效果图&nbsp;&nbsp;插件安装先说 word 文件是docx-preview插件&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; excel文件是用&nbsp;xlsx 插件&nbsp; &nbsp;&nbsp;介绍后端返回的数据因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含:url :&nbsp;blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据,比如显示图像或者播放音视频文件blobs:&amp;
发表于:2023-12-28 浏览:313 TAG:
【Vue】vue2应用与vue3的不同之处
上一篇,我使用了vue2创建了一个应用,这次我使用vue3创建一个应用,看一下两者有什么不同。如下,是我用cue3创建的应用目录发现和vue2应用的目录一模一样,然后我用对比工具对比了两者的文件。1. 文件区别下面是package.json文件的区别,首先vue版本不同,对应的扩展组件也不同。下面是main.js的不同然后是APP.vue的不同2. 全局实例改变2.x 全局 API3.x 实例 API (app)Vue.configapp.configVue.config.productionT
发表于:2024-04-23 浏览:349 TAG: