【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>

 4.效果：

 

相關資料：

• https://zhidao.baidu.com/question/588776134256604845.html

 

作者：smile.轉角

QQ：493177502