【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
【vue】vue +element 搭建项目,将js函数变成vue的函数的更多相关文章
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
- 使用VUE CLI3.0搭建项目vue2+scss+element简易版
1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...
- 【vue】vue +element 搭建项目,mock模拟数据(纯干货)
1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...
- 【vue】vue +element 搭建项目,vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
- 【vue】使用vue+element搭建项目,Tree树形控件使用
1.依赖安装 本例中,使用render-content进行树节点内容的自定义,因此需要支持JSX语法.(见参考资料第3个) 在Git bash中运行一下指令 cnpm install\ babel-p ...
- 【vue】vue +element 搭建项目,vue-cli 如何打包上线
以自己的项目为例 第一步:手动修改config文件夹中的index.js文件中的build对象,将 assetsPublicPath 中的 “/” ,改为 “你实际的加载路径” 如图: 第二步:执行( ...
- 【vue】vue +element 搭建项目,要求既支持pc端又支持移动端
使用场景:有适配pc端改为适配pc端和移动端,使用2套css 代码实现App.vue created: function () { if(document.documentElement.client ...
- 【vue】vue +element 搭建项目,组件之间通信
父子组件通信 父 通过props属性给 子传递数据 子 操作 父 this.$parent.XXX 子通过$emit传递参数 或者通过vue-bus vue-bus既可以实现父子组件之间的通信,也可 ...
随机推荐
- 整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
- Angular6+ng-zorro实现登录页面
一.效果图 二.html代码 <div class="login-container"> <div class="login-box"> ...
- Eclipse For JavaSE安装、配置、测试
Eclipse For JavaSE安装.配置.测试(win7_64bit) 目录 1.概述 2.本文用到的工具 3.安装与配置 4.JavaSE开发测试 5.ADT安装与Android开发测试 6. ...
- Windows系统java下载与安装
Windows系统java下载与安装 一.前言 作者:深圳-风尘 联系方式:QQ群[585499566] 博客:https://www.cnblogs.com/1fengchen1/ 能读懂本文档人: ...
- WPF:完美自定义MeaagseBox 动画 反弹 背景模糊 扁平化
不知道为什么,WPF的MeaageBox的风格还停留在Win 2000的风格... 很久前就想自己封装一个MessageBox出来,但是都只是简单的封装,不怎么具有通用性.这次终于搞完了. 使用方法和 ...
- js数组的用法以及数组根据下标(数值或字符)移除元素
1.创建数组var array = new Array();var array = new Array(size);//指定数组的长度var array = new Array(item1,item2 ...
- View体系第二篇:View滑动
View滑动的基本思想:当点击事件传到View时,系统记下触摸点的坐标,手指移动时系统记下触摸后的坐标并计算出偏移量,然后根据偏移量修正View坐标. 实现View滑动共有6种方法:layout()方 ...
- 用C++对C++语法格式进行分析
前言 最近C++项目需要用到脚本,这就关系到如何绑定对象到脚本运行环境.因使用到多套脚本语言,所以现有的绑定技术,都不能满足需求.所以只能寻求解析C++的头文件,再根据描述进行绑定.起初发现boost ...
- Android 官方DEMO BasicNetworking
本示例演示如何使用Android API检查网络连接. Demo下载地址:https://github.com/googlesamples/android-BasicNetworking/#readm ...
- coTurn 使用测试方法
做个记录 1.从"../examples/etc/" 目录拷贝turnserver.conf文件到"/usr/local/etc/"目录 2.修改配置文件 主要 ...