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

Posted 2020-11-19 smile轉角

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