首先在src目录下创建global目录,在global目录下创建index.js。

export default {
install(Vue) {
var that = this
// 1. 添加全局方法或属性
// ue.global = this
// 2. 添加全局资源
// 3. 注入组件
Vue.mixin({
created() {
this.global = that
}
})
// 大于一的整数验证,this.$jfjl,所有验证方法无判空功能,如若判空,请用required: true
Vue.prototype.$zsReg = (rule, value, callback) => {
let reg = /^(([-]\d+)|[-])?$/; //大于一的整数
if (reg.test(value) || !value) {
callback();
} else {
return callback(new Error("请输入大于1的整数"));
}
}
// 金额的校验
Vue.prototype.$jeReg = (rule, value, callback) => {
if (value > || value < ) {
callback(new Error("请输入小于200并且大于1的数字"));
} else {
let reg = /(^[-]([-]+)?(\.[-]{,})?$)|(^(){}$)|(^[-]\.[-]([-])?$)/; //1-200的数字,小数点后保留两位
if (reg.test(value)) {
callback();
} else {
return callback(new Error("请输入正确的金额"));
}
}
}
Vue.prototype.$jeRegMax = (rule, value, callback) => {
let reg = /(^[-]([-]+)?(\.[-]{,})?$)|(^(){}$)|(^[-]\.[-]([-])?$)/; //小数点后保留两位
if (reg.test(value) || !value) {
callback();
} else {
return callback(new Error("请输入正确的金额"));
}
}
// 手机号的验证
Vue.prototype.$sjhReg = (rule, value, callback) => {
let reg = /^[]\d{}$/; //手机号码正则
if (reg.test(value)) {
callback();
} else {
return callback(new Error("请输入正确的手机号"));
}
}
// 密码校验
Vue.prototype.$parsswordReg = (rule, value, callback) => {
let reg = /^(?![-]*$)[a-zA-Z0-]{,}$/; //密码校验
if (reg.test(value)) {
callback();
} else {
return callback(new Error("密码需要包含6-20位数字或字母,至少包含一位字母"));
}
}
Vue.prototype.$webReg = (rule, value, callback) => {
let reg = /^([hH][tT]{}[pP]:\/\/|[hH][tT]{}[pP][sS]:\/\/)(([A-Za-z0--~]+)\.)+([A-Za-z0--~\/])+$/; //网址的校验
if (reg.test(value)) {
callback();
} else {
return callback(new Error("链接地址不正确"));
}
}
Vue.prototype.$dateFormat = (timestamp) => {
var date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + < ? '' + (date.getMonth() + ) : date.getMonth() + ) + '-';
var D = (date.getDate() < ? '' + date.getDate() : date.getDate()) + ' ';
var h = (date.getHours() < ? '' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < ? '' + date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < ? '' + date.getSeconds() : date.getSeconds());
return Y + M + D + h + m + s;
}
Vue.prototype.$dateFormatDay = (timestamp) => {
var date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + < ? '' + (date.getMonth() + ) : date.getMonth() + ) + '-';
var D = (date.getDate() < ? '' + date.getDate() : date.getDate()) + ' ';
return Y + M + D;
}
}
}

  这里面是常用的几个element-ui自定义验证和时间格式化的代码,可以参考写一下自己需要的格式化或者验证规则。

  然后我们需要在main.js引入global,并且使用它

import global from './global'
Vue.use(global)

  之后我们就可以直接在页面中使用this.的方法调用这些自定义规则了。

vue定义global.js,挂载在vue原型上面使用的更多相关文章

  1. 关于Vue中main.js,App.vue,index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

  2. 050——VUE中使用js库控制vue过渡动作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue 在main.js里使用vue实例

    可以用 Vue.prototype 比如 Vue.prototype.$indicator.close(); 关闭正在加载的动画

  4. VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i

    <script> export default {     name:'header'       //  不要使用内置或保留的HTML元素 , 改为Header或者置或保留的HTML元素 ...

  5. 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token

    //使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...

  6. vue 之node.js 02

    文档 铺垫 以前网页制作web1.0 如今是web2.0-->交互式操作 前端工具 grunt gulp webpack :打包机 作用:将项目中的js,css,img,font,html等进行 ...

  7. Vue解析一之挂载全局变量与方法

    1.在mian.js里面进行Vue对象的原型连的挂载Vue.prototype.$ajax = Ajax; 2.使用Mixin: VuVue.mixin({ data(){ return { Host ...

  8. 06Vue.js快速入门-Vue组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  9. require.js 加载 vue组件 r.js 合并压缩

    https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

随机推荐

  1. VS2017 Nuget服务器搭建,简易版

    熟悉Visual Studio 的小伙伴肯定听说过“Nuget”这个词,关于Nuget是如何如何方便就不再赘述了,这里主要介绍一下如何搭建个人的Nuget服务器. 直奔主题 第一步:打开VS2017 ...

  2. C# HttpClient使用 网络(一)

    一.异步调用web服务  GetAsync() static void Main(string[] args) { Console.WriteLine("In main before cal ...

  3. Python 3 格式化字符串的几种方法!

    Python 3 格式化字符串的几种方法! %s和%d,%s是用来给字符串占位置,%d是给数字占位置,简单解释下: a = 'this is %s %s' % ('an','apple') 程序输出的 ...

  4. 解决蓝牙鼠标在 Ubuntu 中单位时间内断开的问题

    1 查询你的鼠标的蓝牙地址 1.1 如:E1:DE:02:05:5E:F5 2 将查询到的设备地址写入配置文件 /etc/bluetooth/main.conf # Use vendor id sou ...

  5. Can't load Microsoft.ReportViewer.ProcessingObjectModel.dll

    本机的时候是能正常看到report,但deploy到别的机器上却不行,按说从本机拷个dll过去就可以,但怎么也找不到. 原来要在cmd那里输入C:\WINDOWS\assembly\GAC_MSIL ...

  6. 【csp模拟赛5】加减法--宽搜维护联通快

    题目大意: 一开始想用并查集,发现很难维护联通块的代表元素,所以用了宽搜,开数组会炸,所以开一个优先队列维护,每扫完一个联通块,统计答案,清空优先队列,!!千万记住注意数组的大小!!! 代码: #in ...

  7. CaoHaha's staff (HDU 6154)(2017中国大学生程序设计竞赛 - 网络选拔赛)

    Problem Description "You shall not pass!" After shouted out that,the Force Staff appered i ...

  8. Windows下安装Elasticsearch6.4.1和Head,IK分词器

    所需运行环境 1.安装jdk1.8(步骤略) 2.安装git(步骤略)3.安装nodejs(步骤略) 一.ElasticSearch的安装 下载elasticsearch6.4.1,将下载后的es解压 ...

  9. JAVA之G1与CMS垃圾回收

    G1 GC,全称Garbage-FirstGarbage Collector,通过-XX:+UseG1GC参数来启用,作为体验版随着JDK 6u14版本面世,在JDK 7u4版本发行时被正式推出,相信 ...

  10. Netfilter 之 钩子函数调用

    本篇主要从三层协议栈调用函数NF_HOOK说起,不断深入,分析某个钩子点中所有钩子函数的调用流程,但是本文不包含规则介绍和核心的规则匹配流程,后续文章将继续分析: NF_HOOK函数先调用了nf_ho ...