vue 封装全局过滤器

1.找到utils下创建fifilter.js

一些常用的过滤方法

export const filters = {
    //url解码
    urlCode: value => {
        if (!value) return ''
        let v = decodeURIComponent(value)
        let bigIndex = v.lastIndexOf('/')
        let endIndex = v.lastIndexOf('.')
        let url = v.substring(bigIndex + 1, endIndex) + v.substring(endIndex)
        return url
    },
    dateFormat: value => {
        if (!value) return ''
        value = value * 1000
        //new Date 在 ios safari浏览器有兼容性问题处理如下:ios不支持2027-2-22 16:23,需要改为2027/2/22 16:23 
        // ? 兼容 ios safari : 兼容其他浏览器
        let $this = new Date(value) == 'Invalid Date' ? new Date(date.replace(/-/g, "/")) : new Date(value)

        var timestamp = parseInt(Date.parse($this)) / 1000 //- 8 * 60 * 60; //(本地时间)东八区减去8小时;
        // console.log(timestamp)
        function zeroize(num) {
            return (String(num).length == 1 ? '0' : '') + num;
        }
        var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
        // console.log(curTimestamp)
        var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数
        var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
        var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

        var Y = tmDate.getFullYear(),
            m = tmDate.getMonth() + 1,
            d = tmDate.getDate();
        var H = tmDate.getHours(),
            i = tmDate.getMinutes(),
            s = tmDate.getSeconds();


        if (timestampDiff < 60) { // 一分钟以内
            return "刚刚";
        } else if (timestampDiff < 3600) { // 一小时前之内
            return Math.floor(timestampDiff / 60) + "分钟前";
        } else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
            return '今天 ' + zeroize(H) + ':' + zeroize(i)
        } else {
            var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
            if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
                return '昨天 ' + zeroize(H) + ':' + zeroize(i)
            } else if (curDate.getFullYear() == Y) {
                return zeroize(m) + '月' + zeroize(d) + '日';
            } else {
                return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日';
            }
        }
    },
    // 时间过滤器
    formatDate: value => {
        if (value == undefined) {
            return;
        }
        let date = new Date(value * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '年';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
        let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日';
        let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return Y + M + D + h + m + s;
    },
    //微信时间
    wxleftTime: value => {
        if (value == undefined) {
            return;
        }
        const date = new Date(value * 1000);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        if (new Date(Number(value) * 1000).toDateString() === new Date().toDateString()) {
            return `${hours}:${minutes}`;
        } else {
            return `${year}/${month}/${day}`;
        }
    },
    //千分位
    numberToCurrencyNo: value => {
        if (!value) return 0.00
        // 获取整数部分
        const intPart = Math.trunc(value)
        // 整数部分处理,增加,
        const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
        // 预定义小数部分
        let floatPart = ''
        // 将数值截取为小数部分和整数部分
        const valueArray = value.toString().split('.')
        if (valueArray.length === 2) { // 有小数部分
            floatPart = valueArray[1].toString() // 取得小数部分
            return intPartFormat + '.' + floatPart
        }
        return intPartFormat + floatPart

    }
}

2.在main.js 注册

import { filters } from './utils/filters'
// 定义全局自定义过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

3.页面使用

{{ item.createtime | dateFormat }}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/933504.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flask返回中文Unicode编码(乱码)解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

VMware:安装centos网络信息不可用

我们今天要处理的就是在vmware中安装centos出现网络不可用&#xff0c;导致无法安装系统的问题直接上图&#xff0c;我们在主机直接 cmdipconfig 发现IPV4地址都不一样&#xff0c;导致我们无法ping通虚拟机 那我们如何解决呢~~~~ 打开自己VM【编辑】【虚拟网络编辑器】【更…

MperReduce学习笔记下

自定义InputFormat合并小文件 案例需求 无论hdfs还是mapreduce&#xff0c;对于小文件都有损效率&#xff0c;实践中&#xff0c;又难免面临处理大量小文件的场景&#xff0c;此时&#xff0c;就需要有相应解决方案。 案例分析 小文件的优化无非以下几种方式&#xff1a; …

【MySQL 探索者日志 】第二弹 —— 数据库基础

MySQL系列学习笔记&#xff1a; MySQL探索者日志__Zwy的博客-CSDN博客 各位于晏&#xff0c;亦菲们&#xff0c;请点赞关注&#xff01; 我的个人主页&#xff1a; _Zwy-CSDN博客 目录 1、MySQL服务器&#xff0c;数据库&#xff0c;表关系 2、MySQL登录连接服务器 3、MyS…

flink终止提交给yarn的任务

接上文&#xff1a;一文说清flink从编码到部署上线 1.查看正在执行的flink 访问地址&#xff08;参考&#xff09;&#xff1a;http://10.86.97.191:8099/cluster/apps 2.终止任务 yarn application -kill appID 本文为&#xff1a; yarn application -kill application_17…

CentOS虚拟机开机出现问题

CentOS虚拟机断电或强制关机&#xff0c;再开机出现问题 错误原因&#xff1a; failed to mount /sysroot.&#xff08;无法挂载/ sysroot。&#xff09; Dependency failed for Initrd root File System.&#xff08;Initrd根文件系统的依赖关系失败。&#xff09; Dependency…

可靠的人形探测,未完待续(I)

HI&#xff0c;there&#xff01;从紧张的项目中出来冒个泡&#xff01; 刚好想要验证一下mmWave在有人检测方面的应用&#xff0c;就看到了这个活动 - 瞌睡了有枕头属于是&#xff0c;活动策划好评&#xff01; 朋友曾关注汽车相关的技术领域&#xff0c;跟我吐槽过&#xff0…

web斗地主游戏实现指北

前后端通信 作为一个即时多人游戏&#xff0c;不论是即时聊天还是更新玩家状态&#xff0c;都需要服务端有主动推送功能&#xff0c;或者客户端轮询。轮询的时间间隔可能导致游玩体验差&#xff0c;因为不即时更新&#xff0c;而且请求数量太多可能会打崩服务器。 建议在cs间…

基于Qt的文字处理软件(二)

这期文章我们进行主窗口的一些函数的定义&#xff0c;同时导入一些文字处理软件的状态栏会用到的图标。下面图片是图标导入到项目后的一个示例&#xff0c;图标可以到阿里矢量图标库里面找到。 一、导入图标资源: 1.首先在项目目录的位置创建一个images的文件,然后将收集好的图…

Halcon_数据类型_ROI_仿射变换_投影变换

文章目录 算子快捷键一、Halcon数据类型Iconic (图标)Control (控制)Tuple &#xff08;数组&#xff09; 二、ROI&#xff08;区域&#xff09;1.代码创建ROI2.手动创建ROI 三、图形预处理1.图像的变换与矫正平移 -hom_mat2d_translate旋转缩放-HomMat2D&#xff1a;输入的仿射…

C语言(指针基础练习)

删除数组中的元素 数组的元素在内存地址中是连续的&#xff0c;不能单独删除数组中的某个元素&#xff0c;只能覆盖。 #include <stdio.h> #include <stdbool.h>// 函数声明 int deleteElement(int arr[], int size, int element);int main() {int arr[] {1, 2, 3…

甘肃美食之选:食家巷方形饼

甘肃食家巷方形饼&#xff0c;顾名思义&#xff0c;其形状呈规整的方形。这种独特的外形并非偶然&#xff0c;而是源于当地传统的制作工艺。制作方形饼的师傅们&#xff0c;精心挑选优质的面粉&#xff0c;加入适量的水和其他配料&#xff0c;揉成光滑的面团。经过一段时间的发…

共享GitLab中CICD自动生成的软件包

0 Preface/Foreword 1 分享软件包地址 为了方便给接收对象方便下载固件&#xff0c;在下载固件时候&#xff0c;而无需打开网页&#xff0c;直接输入地址&#xff0c;弹出的对话框是将固件另存为。 或者进入CICD页面&#xff0c;找到job&#xff0c;在Download的标签上单击右键…

区块链钱包开发:全面功能设计方案解析

区块链钱包是连接用户与区块链世界的核心工具&#xff0c;为用户提供了存储、管理和交易加密资产的便捷途径。随着区块链应用的广泛普及&#xff0c;钱包的功能需求和技术复杂度也在不断增加。如何设计和开发一款功能全面、安全可靠的区块链钱包&#xff0c;成为区块链项目成功…

计算机网络-IPSec VPN工作原理

一、IPSec VPN工作原理 昨天我们大致了解了IPSec是什么&#xff0c;今天来学习下它的工作原理。 IPsec的基本工作流程如下&#xff1a; 通过IKE协商第一阶段协商出IKE SA。 使用IKE SA加密IKE协商第二阶段的报文&#xff0c;即IPsec SA。 使用IPsec SA加密数据。 IPsec基本工作…

“切片赋值”创建列表批量操作“新”方法(Python)

[start:end]切片赋值&#xff0c;扩展了list批量增减元素的操作能力。 (笔记模板由python脚本于2024年12月06日 15:07:56创建&#xff0c;本篇笔记适合研python基础的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;…

电脑无法识别usb设备怎么办?电脑无法识别usb解决方法

usb设备是我们常解除的外部操作以及存储设备&#xff0c;它可以方便用户数据传输以及操作输入。但在使用过程中&#xff0c;大家基本都碰到过电脑无法识别usb设备这种情况。这种情况下&#xff0c;我们应该怎么办呢&#xff1f;下面将为你介绍几种可能的原因和解决方法&#xf…

【机器学习】分类器

在机器学习(Machine Learning&#xff0c;ML)中&#xff0c;分类器泛指算法或模型&#xff0c;用于将输入数据分为不同的类别或标签。分类器是监督学习的一部分&#xff0c;它依据已知的数据集中的特征和标签进行训练&#xff0c;并根据这些学习到的知识对新的未标记数据进行分…

路径规划之启发式算法之十一:布谷鸟搜索算法(Cuckoo Search,CS)

布谷鸟搜索算法&#xff08;Cuckoo Search&#xff0c;CS&#xff09;是一种新兴的自然启发式算法&#xff0c;由剑桥大学的杨新社教授和S.戴布&#xff08;Xin-She Yang和Suash Deb&#xff09;于2009年提出。该算法基于布谷鸟的寄生性育雏&#xff08;巢寄生&#xff09;行为…

Java-JMX (官方文档解读)

JMX 简介 JMX&#xff08;Java Management Extensions&#xff09;是Java平台的一个标准管理框架&#xff0c;自Java 1.5版本起成为Java 平台标准版 (Java SE 平台) 的标准组成部分。JMX 技术提供了一种简单、标准的方法来管理资源&#xff08;例如应用程序、设备和服务&#x…