更新记录

1.0.0（2019-10-01） 下载此版本

构建完成，持续完善

平台兼容性

[TOC]

目录结构

• uni-date.vue 计时器组件组件
• uni-format.vue 时间转换组件组件
• utils.filter.js 核心业务处理脚本

计时器组件

使用方法

直接使用

index.vue

<template>
    <view class="e-page">
        {{ utils.friendlyDate(timestamp) }}
    </view>
</template>

<script>
// 直接使用办法
import utils from '@/components/shoyu-date/utils.filter.js';
// 直接使用办法 End
export default {
    data() {
        return {
            // 直接使用需要进行声明
            utils: utils,
            // 直接使用需要进行声明 End
            date: '2019-10-01 08:00:00'
        };
    },
    onLoad() {
        let that = this;
        // 时间转换为时间戳
        // 如果是时间戳直接传递，无需转换
        that.timestamp = new Date(this.date).getTime();
        console.log(that.timestamp);
    },
    methods: {}
};
</script>

组件使用

index.vue

<template>
    <view class="e-page">
        <uni-date class="inline" :timestr="date"></uni-date>
    </view>
</template>

<script>
// 组件引用办法
import uniDate from '@/components/shoyu-date/uni-date.vue';
// 组件引用办法 End

export default {
    components: { uniDate },
    data() {
        return {
            // 如果不传小时的话，计算以每天8点开始计算
            date: '2019-10-01 08:00:00',
        };
    },
    onLoad() {
        let that = this;
    },
    methods: {}
};
</script>

时间转换组件

使用方法

直接使用

index.vue

<template>
    <view class="e-page">
        {{ utils.timeTodate('Y-m-d H:i:s index', timestamp) }}
    </view>
</template>

<script>
// 直接使用办法
import utils from '@/components/shoyu-date/utils.filter.js';
// 直接使用办法 End
export default {
    data() {
        return {
            // 直接使用需要进行声明
            utils: utils,
            // 直接使用需要进行声明 End
            date: '2019-10-01 08:00:00'
        };
    },
    onLoad() {
        let that = this;
        // 时间转换为时间戳
        // 如果是时间戳直接传递，无需转换
        that.timestamp = new Date(this.date).getTime();
        console.log(that.timestamp);
    },
    methods: {}
};
</script>

组件使用

index.vue

<template>
    <view class="e-page">
        <uni-format class="inline" format="Y-m-d H:i:s index" :timestr="date"></uni-format>
    </view>
</template>

<script>
// 组件引用办法
import uniDate from '@/components/shoyu-date/uni-date.vue';
// 组件引用办法 End

export default {
    components: { uniDate },
    data() {
        return {
            // 如果不传小时的话，计算以每天8点开始计算
            date: '2019-10-01 08:00:00',
        };
    },
    onLoad() {
        let that = this;
    },
    methods: {}
};
</script>

特殊情况

组件传递时间戳的方法

index.vue

<uni-date class="inline" :timestr="timestamp"></uni-date>
<uni-format class="inline" format="Y-m-d H:i:s index" :timestr="timestamp"></uni-format>

uni-date.vue

<script>
import utils from './utils.filter.js';

export default {
    name: 'UniDate',
    data() {
        return {
            utils: utils
        };
    },
    created() {
        console.log(this.timestr);

        // 如果传递来的是时间戳
        this.timestamp = this.timestr;
        // this.timestamp = new Date(this.timestr).getTime();
    },
    props: {
        timestr: {
            type: [String],
            default: ''
        }
    }
};
</script>

uni-format.vue

<script>
import utils from './utils.filter.js';

export default {
    name: 'UniFomat',
    data() {
        return {
            utils: utils
        };
    },
    created() {
        console.log(this.timestr);

        // 如果传递来的是时间戳
        this.timestamp = this.timestr;
        // this.timestamp = new Date(this.timestr).getTime();
    },
    props: {
        format: {
            type: [String],
            default: 'Y-m-d H:i:s'
        },
        timestr: {
            type: [String],
            default: ''
        }
    }
};
</script>