【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既可以实现父子组件之间的通信,也可 ...
随机推荐
- 前端数据可视化echarts.js
一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...
- 用函数式编程对JavaScript进行断舍离
译者按: 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! 原文: How I rediscovered my love for ...
- mybatis加载属性
1): <dataSource>的<property>标签加载属性 在 properties 元素体内定义的属性首先被读取 然后会读取 properties 元素中 resou ...
- Less 结合 nth-child 选择器循环生成样式
问题描述: 实现头像的堆叠效果 从第二个头像开始,每个头像都会盖住前一个头像上,遮盖的宽度为 30px 实现叠加的方式有很多,比如给每个头像添加 translateX 属性,或者使用负值 margin ...
- gulp简介
简介 gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏 ...
- HTML5中的input type为file控件限制上传文件类型及扩展
简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...
- 个人练习:使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- SAP MM 按采购订单查询付款信息的报表?
SAP MM 按采购订单查询付款信息的报表? 上午给P3项目采购部门用户做了一个采购相关的报表的培训.培训过程中,客户的采购部门经理提出了一个问题:有没有报表能查询到各个采购订单的付款情况,显示采购订 ...
- 一文读懂机器学习大杀器XGBoost原理
http://blog.itpub.net/31542119/viewspace-2199549/ XGBoost是boosting算法的其中一种.Boosting算法的思想是将许多弱分类器集成在一起 ...
- Javascript 流程控制
流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成.在正常情况下,程序中 的语句时按照书写顺序执行的,这种结构称为顺序结构.除了顺序结构之外还有选择结构和循环结构. 1.选择 ...