【vue】vue +element 搭建项目，将js函数变成vue的函数

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

demo:时间转换

1.目录

《1》在src文件夹下新建文件夹prototypefns--------在此文件夹创建util.js,

《2》在prototypefns下新建文件夹jsTime--------在此文件夹下新建datatime.js

datatime.js

/**

 * 将时间转换成时间戳

 * @param DateTime 为时间格式下的时间 2018/06/14 13:00:00或2018-06-14 13:00:00

 * @returns {number}

 * @constructor

 */

let DateToUnix = function (DateTime) {

    var oDate = new Date(Date.parse(DateTime.replace(/-/g, "/")));

    var Unix = oDate.getTime();

    return Unix;

}

let DeCa = function (Natural) {

    var NaturalNum;

    if (Natural < 10) {

        NaturalNum = "0" + Natural;

    } else {

        NaturalNum = Natural;

    }

    return NaturalNum;

}

/**

 * 将时间戳转化为时间

 * @param UnixTime 时间 格式 2018/06/14 13:00:00

 * @param ShowTime 时间展示格式 选择 2018/06/14 13:00:00或2018-06-14 13:00:00等等格式

 * @constructor

 */

let UnixToDate = function (UnixTime, ShowTime) {

    var ToUnix = new Date(UnixTime);

    var Years = ToUnix.getFullYear();//获取年 例子：2018

    var Month = ToUnix.getMonth() + 1;//获取月(0-11,0代表1月)

    var Day = ToUnix.getDate();//获取日（0-31）

    var Week = ToUnix.getDay();//获取星期（0-6；0代表星期天）

    var Hours = ToUnix.getHours();//获取小时（0-23）

    var Minutes = ToUnix.getMinutes();//获取分钟（0-59）

    var Seconds = ToUnix.getSeconds();//获取秒

    var DaTime;

    if (ShowTime == 2) {

        DaTime = Years + "/" + DeCa(Month) + "/" + DeCa(Day) + " " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds);

    } else if (ShowTime == 3) {

        DaTime = Years + "年" + DeCa(Month) + "月" + DeCa(Day) + "日 " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds);

    } else if (ShowTime == 4) {

        DaTime = Years + "年" + DeCa(Month) + "月" + DeCa(Day) + "日";

    } else if (ShowTime == 5) {

        DaTime = Years + "/" + DeCa(Month) + "/" + DeCa(Day);

    } else if (ShowTime == 6) {

        DaTime = Years + "-" + DeCa(Month) + "-" + DeCa(Day);

    } else if (ShowTime == 7) {

        DaTime = DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds);

    } else if (ShowTime == 8) {

        DaTime = DeCa(Hours) + "时" + DeCa(Minutes) + "分" + DeCa(Seconds) + "秒";

    } else if (ShowTime == 9) {

        DaTime = "星期" + Week;

    } else if (ShowTime == 10) {

        DaTime = NumBerToHanZi(Years) + "年" + NumBerToHanZi(Month) + "月" + NumBerToHanZi(Day) + "日 星期" + NumBerToHanZi(Week);

    } else if (ShowTime == 11) {

        DaTime = Years + "-" + DeCa(Month) + "-" + DeCa(Day) + " " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds) + " 星期" + Week;

    } else if (ShowTime == 12) {

        DaTime = Years + "/" + DeCa(Month) + "/" + DeCa(Day) + " " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds) + " 星期" + Week;

    } else if (ShowTime == 13) {

        DaTime = Years + "年" + DeCa(Month) + "月" + DeCa(Day) + "日 " + DeCa(Hours) + "时" + DeCa(Minutes) + "分" + DeCa(Seconds) + "秒 星期" + Week;

    } else {

        DaTime = Years + "-" + DeCa(Month) + "-" + DeCa(Day) + " " + DeCa(Hours) + ":" + DeCa(Minutes) + ":" + DeCa(Seconds);

    }

    return DaTime;

}

//将阿拉伯数字转换成汉字

let NumBerToHanZi = function (Numbers) {

    var strIns, chnStr = '';

    var chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];

    while (Numbers > 0) {

        var v = Numbers % 10;

        strIns = chnNumChar[v];

        chnStr = chnNumChar[v] + chnStr;

        Numbers = Math.floor(Numbers / 10);

    }

    return chnStr;

}

// 计算时间差

let DownTime = function (EndTime) {

    //如果为时间戳

    var EndTimes = new Date(EndTime).getTime();//结束时间

    var NowTime = new Date().getTime();//当前时间

    var DeltaT = EndTimes - NowTime;

    //计算出相差天数

    var days = Math.floor(DeltaT / (24 * 3600 * 1000));

    //计算出小时数

    var leave1 = DeltaT % (24 * 3600 * 1000);

    var H = Math.floor(leave1 / (3600 * 1000));

    //计算相差分钟数

    var leave2 = leave1 % (3600 * 1000);

    var M = Math.floor(leave2 / (60 * 1000));

    //计算相差秒数

    var leave3 = leave2 % (60 * 1000);

    var S = Math.round(leave3 / 1000);

    var reminder;

    if (DeltaT > 0) {

        if (days != "") {

            reminder = days + "天 " + H + "小时 " + M + " 分钟" + S + " 秒";

        } else if (days == "" || H != "") {

            reminder = H + "小时 " + M + " 分钟" + S + " 秒";

        }

    } else {

        reminder = "请注意！时间到了！";

    }

    return reminder;

}

export { DateToUnix, UnixToDate, NumBerToHanZi, DownTime }

util.js

import { DateToUnix, UnixToDate, NumBerToHanZi, DownTime } from '@/prototypefns/jsTime/datatime';

export default{

    install (Vue,options) {

        /*时间转换器*/

        Vue.prototype.dateToUnix = DateToUnix;//转换时间戳

        Vue.prototype.unixToDate = UnixToDate;//转换时间

        Vue.prototype.downTime = DownTime;//倒计时

        Vue.prototype.numBerToHanZi = NumBerToHanZi;//转汉字

    }

}

2.在main.js引入，并全局注册

import util from '@/prototypefns/util'

Vue.use(util);

3.应用

 <!--

    des:将js函数变成vue的函数

  -->

<template>

    <div class="app-container ">

        <div class="input">

            <input type="text " value="2018-06-15 11:23:39">

            <span class="input-btn" @click="toUnix">转换时间戳</span>

            <span v-text="unixTime"></span>

        </div>

        <div class="input">

            <input type="text "  value="1529033019000">

            <span class="input-btn" @click="toDate">转换时间</span>

            <span v-text="dateTime"></span>

        </div>

        <div class="input">

            <input type="text "  value="2018/12/12 23:59:59">

            <span class="input-btn" @click="toDownTime">倒计时</span>

            <span v-text="downTimeRes"></span>

        </div>

        <div class="input">

            <input type="text "  value="123456789">

            <span class="input-btn" @click="toHanZi">转汉字</span>

            <span v-text="hanZi"></span>

        </div>

    </div>

</template>

<script>

    export default {

        data() {

            return {

                 requestData: [{

                    "id": "2",

                    "name": "JAVA",

                    "parentid": "0",

                    "order": "2",

                }],

                requestJson:'',

                unixTime:'',

                dateTime:'',

                downTimeRes:'',

                hanZi:''

            }

        },

        created(){

            this.requestJson = this.json2html(this.requestData);

        },

        methods: {

            toUnix(){

                this.unixTime = this.dateToUnix('2018-06-15 11:23:39');

            },

            toDate(){

                this.dateTime = this.unixToDate(Number('1529033019000'));

            },

            toDownTime(){

                this.downTimeRes = this.downTime('2018/12/12 23:59:59');

            },

            toHanZi(){

                this.hanZi = this.numBerToHanZi('123456789');

            }

        },

    }

</script>

<style>

    .input{

        display: flex;

    }

    .input-btn{

        display: block;

        background: red;

        color: #fff;

        font-size: 12px;

        height: 20px;

        line-height: 20px;

        width: 100px;

        text-align: center;

        cursor: pointer;

        margin: 0 50px;

    }

</style>