vue定义global.js,挂载在vue原型上面使用
首先在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原型上面使用的更多相关文章
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
- 050——VUE中使用js库控制vue过渡动作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 在main.js里使用vue实例
可以用 Vue.prototype 比如 Vue.prototype.$indicator.close(); 关闭正在加载的动画
- 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元素 ...
- 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token
//使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...
- vue 之node.js 02
文档 铺垫 以前网页制作web1.0 如今是web2.0-->交互式操作 前端工具 grunt gulp webpack :打包机 作用:将项目中的js,css,img,font,html等进行 ...
- Vue解析一之挂载全局变量与方法
1.在mian.js里面进行Vue对象的原型连的挂载Vue.prototype.$ajax = Ajax; 2.使用Mixin: VuVue.mixin({ data(){ return { Host ...
- 06Vue.js快速入门-Vue组件化开发
组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
- require.js 加载 vue组件 r.js 合并压缩
https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...
随机推荐
- windows安装mysql(5.7.26版本)压缩包
1.解压安装包,进入文件夹,并创建一个data文件夹! 2.修改 my-default.ini 文件 [mysql] default-character-set=utf8 [mysqld] port ...
- R的数据结构--向量
向量:用于存储数值型.字符型或逻辑型数据的一维数组,只可以包含一种数据 向量的创建与运算 创建向量 # 创建简单向量 l <- c(2, 2, 1, 3, 8) # [1] 2 2 1 3 8 ...
- MyBatis-05-解决属性名和字段名不一致的问题
5.解决属性名和字段名不一致的问题 1.问题 数据库中的字段 新建一个项目,拷贝之前的,测试实体类字段不一致的情况. public class User { private int id; priva ...
- BZOJ5206 [Jsoi2017]原力[根号分治]
这是一个三元环计数的裸题,只是多了一个颜色的区分和权值的计算罢了. 有一种根号分治的做法(by gxz) 这种复杂度的证明特别显然,思路非常简单,不过带一个log,可以用unordered_map或者 ...
- mobx是什么?有什么优点?
mobx是一个简单可扩展的状态管理库. mobx vs redux mobx是学习成本更低,性能更好的状态解决方案. mobx开发难度低: mobx代码量少: mobx渲染性能好: mobx参考
- Qbxt 模拟赛 Day4 T2 gcd(矩阵乘法快速幂)
/* 矩阵乘法+快速幂. 一开始迷之题意.. 这个gcd有个规律. a b b c=a*x+b(x为常数). 然后要使b+c最小的话. 那x就等于1咯. 那么问题转化为求 a b b a+b 就是斐波 ...
- Linux网络命令——ifconfig、ifup、ifdown
这三个命令的用途都是启动网络接口,不过,ifup 与 ifdown 仅就 /etc/sysconfig/network- scripts 内的 ifcfg-ethx(x为数字)进行启动或关闭的操作,并 ...
- 利用Python构建时间序列模型解决实际问题的正确姿势
要本着应用到实际工作中目的去学时间序列分析,才能深入浅出的学会,不要纠结于理论,只听我的,我有信心说明白. 本章内容 趋势分析 序列分解 序列预测 序列分解 统计学基础铺垫 划分 时间序列按照季节性划 ...
- single-pass单遍聚类方法
一.通常关于文本聚类也都是针对已有的一堆历史数据进行聚类,比如常用的方法有kmeans,dbscan等.如果有个需求需要针对流式文本进行聚类(即来一条聚一条),那么这些方法都不太适用了,当然也有很多其 ...
- javascript中的Date数据类型
javascript中,Date代表日期对象,其常见的用法如下: 一.Date的构造函数 有四种形式的Date构造函数,详见下面代码的注释: //1.构造函数没有参数,则返回当前日期的Date对象 v ...