首页 > 其他分享 >uniapp中使用过滤器filters来格式化时间

uniapp中使用过滤器filters来格式化时间

时间:2023-08-18 22:12:46浏览次数:33  
标签:uniapp 格式化 color height width filters date return font

uniapp中使用过滤器filters来格式化时间 看那个创云商城源码的时候看到的,觉得蛮有用的,扒下来备用,应该也能直接用于JS

 

 

<template>
    <view class="mix-timeline">
        <view class="cell" v-for="(item, index) in list" :key="index">
            <view class="left column center">
                <text class="time">{{ item.time | date('H:i') }}</text>
                <text class="date">{{ item.time | date('m/d') }}</text>
            </view>
            <view class="cen center">
                <view class="circle center"></view>
            </view>
            <view class="right column">
                <text class="title">{{ item.title }}</text>
                <text v-if="item.tip" class="tip">{{ item.tip }}</text>
            </view>
        </view>
    </view>
</template>

<script>
    /**
     * 时间轴
     * {
     *    title: 标题
     *    tip: 小字
     *    time: 时间戳
     *    }  
     */
    export default {
        data() {
            return {
                
            };
        },
        filters:{
            /**
             * 格式化时间戳 Y-m-d H:i:s
             * @param {Number} timestamp 2023-01-01 19:20:30  
             * @param {String} format Y-m-d H:i:s
             * @return {String}
             */
            date:function (timeStamp, format='Y-m-d H:i'){
                let _date = new Date(timeStamp),
                    Y = _date.getFullYear(),
                    m = _date.getMonth() + 1,
                    d = _date.getDate(),
                    H = _date.getHours(),
                    i = _date.getMinutes(),
                    s = _date.getSeconds();
                
                m = m < 10 ? '0' + m : m;
                d = d < 10 ? '0' + d : d;
                H = H < 10 ? '0' + H : H;
                i = i < 10 ? '0' + i : i;
                s = s < 10 ? '0' + s : s;
                
                return format.replace(/[YmdHis]/g, key=>{
                    return {Y,m,d,H,i,s}[key];
                });
            }
        },
        props: {
            list: {
                type: Array,
                default(){
                    return []
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .mix-timeline{
        
    }
    .cell{
        display: flex;
        align-items: flex-start;
        width: 100%;
        padding: 0 30rpx 0;
        
        &:first-child .circle{
            &:before{
                background-color: $base-color;
            }
            &:after{
                content: '';
                position: absolute;
                width: 28rpx;
                height: 28rpx;
                background-color: #f9e0eb;
                border-radius: 100rpx;
            }
        }
        &:last-child .right:before{
            display: none;
        }
    }
    .left{
        
        .time{
            font-size: 26rpx;
            color: #333;
            line-height: 44rpx;
        }
        .date{
            font-size: 20rpx;
            color: #333;
        }
    }
    .cen{
        width: 80rpx;
        height: 44rpx;
        
        .circle{
            width: 16rpx;
            height: 16rpx;
            position: relative;
            z-index: 1;
            
            &:before{
                content: '';
                width: 16rpx;
                height: 16rpx;
                background-color: #ddd;
                border-radius: 100rpx;
                position: relative;
                z-index: 5;
            }
        }
    }
    .right{
        flex: 1;
        padding-bottom: 30rpx;
        position: relative;
        min-height: 96rpx;
        
        &:before{
            content: '';
            width: 2rpx;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            background-color: #ddd;
            transform: translate(-42rpx, 22rpx);
        }
        .title{
            font-size: 28rpx;
            color: #333;
            line-height: 44rpx;
            font-weight: 700;
        }
        .tip{
            margin-top: 6rpx;
            font-size: 24rpx;
            color: #999;
            line-height: 36rpx;
        }
    }
    


</style>

 

 

 

标签:uniapp,格式化,color,height,width,filters,date,return,font
From: https://www.cnblogs.com/niunan/p/17641721.html

相关文章

  • uniapp 分类界面实现
    左右两侧分别使用scroll-view包裹,保证滑动互不干扰,如果使用pageScroll事件监听,左右会有干扰使用到的标签<scroll-viewclass="categories_view"scroll-y:scroll-top="cateTop">计算右侧、左侧每个分类的高度、距离顶部的距离、和窗口的大小使......
  • uniapp项目的一些点
     1.应用需要发布到不同服务器,也即不同的登陆方式,接口地址、文件地址不一致。解决:需要一台公共服务器,在切换登陆方式的时候在这个公共服务器获取信息,拿到不同登录方式的前缀路径。在切换后将前缀地址设置为接口地址和前缀地址。2.app发布到应用商店2.1.使用uniapp......
  • uniapp各端发布
    uniapp打包安卓app在代码里面给axios接口配置后端接口地址后,在hbuilderx里面选用云打包,输入证书密码进行打包(证书生成在uniapp后台)uniapp打包iosapp(ios需要开发者账号并且需要上传ipa到apple的渠道)在hbuildx里面选用云打包,输入设定的密码进行打包(证书生成在ios开发平台......
  • 基于微服务+Java+Spring Cloud Vue +UniApp +MySql实现的智慧工地云平台源码
    智慧工地概念智慧工地是一种崭新的工程全生命周期管理理念,是指运用信息化手段,通过对工程项目进行精确设计和施工模拟,围绕施工过程管理,建立互联协同、智能生产、科学管理的施工项目信息化生态圈,并将此数据在虚拟现实环境下与物联网采集到的工程信息进行数据挖掘分析,提供过程趋势预测......
  • uniapp外卖软件系统源码出售带搭建
      外卖点餐软件开发技术难度大,涉及到了软件的各个首页界面,三端的功能界面,都需要考虑进去。特别的管理端的数据管理,外卖时的地理位置实时的获取,后台派送的数据统计,计费方式等功能。  外卖软件系统的源码包含了软件的所有核心代码,包括前端界面、后端逻辑和数据库等。如果您......
  • uniapp,微信小程序获取用户手机号
    1.获取手机号的按钮<buttonv-if="!mobile"class="btns"style="margin-top:-100rpx;"open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号码</button>2.获取手机号的函数getPhoneNumber()getPhoneNu......
  • uniapp上拉加载下拉刷新
    page.json配置 {   "path":"pages/my/index",   "style":{    "enablePullDownRefresh":true,//关键    "onReachBottomDistance":50,关键    "app-plus":{     "pullToRef......
  • windows使用命令格式化U盘
    1、DISKPART命令格式化U盘Diskpart是Windows下一个非常强大的磁盘管理工具,可以用于删除、创建、格式化分区等操作。使用CMD命令行执行Diskpart命令,也可以对U盘进行格式化。1.连接U盘,打开CMD命令行窗口。2.在命令行窗口中输入“diskpart”进入磁盘管理工具。3.输入“listd......
  • 用uniapp开发打包多端应用完整指南
    一、uni-app项目介绍用uni-app开发多端项目,一套代码可同时打包出各端小程序、h5和app,uni-app支持通过HBuilderX可视化界面和vue-cli命令行两种方式创建项目,下面示例项目采用HBuilderX可视化界面的方式创建,cli项目可参考uni文档,大部分流程都是通用的。项目结构:├──common......
  • uniapp中连接数据库问题
    教程中的代码//获取数据库内容router.get('/api/goods/search',function(req,res,next){connection.query("select*fromgoods_search",function(error,results,fields){if(error)throwerror;con......