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 = /^(([1-9]\d+)|[1-9])?$/; //大于一的整数
      if (reg.test(value) || !value) {
        callback();
      } else {
        return callback(new Error("请输入大于1的整数"));
      }
    }
    // 金额的校验
    Vue.prototype.$jeReg = (rule, value, callback) => {
      if (value > 200 || value < 1) {
        callback(new Error("请输入小于200并且大于1的数字"));
      } else {
        let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/; //1-200的数字,小数点后保留两位
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的金额"));
        }
      }
    }
    Vue.prototype.$jeRegMax = (rule, value, callback) => {
      let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/; //小数点后保留两位
      if (reg.test(value) || !value) {
        callback();
      } else {
        return callback(new Error("请输入正确的金额"));
      }
    }
    // 手机号的验证
    Vue.prototype.$sjhReg = (rule, value, callback) => {
      let reg = /^1[345789]\d{9}$/; //手机号码正则
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入正确的手机号"));
      }
    }
    // 密码校验
    Vue.prototype.$parsswordReg = (rule, value, callback) => {
      let reg = /^(?![0-9]*$)[a-zA-Z0-9]{6,20}$/; //密码校验
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("密码需要包含6-20位数字或字母,至少包含一位字母"));
      }
    }
    Vue.prototype.$webReg = (rule, value, callback) => {
      let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/; //网址的校验
      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() + 1 < 10 ? ‘0‘ + (date.getMonth() + 1) : date.getMonth() + 1) + ‘-‘;
      var D = (date.getDate() < 10 ? ‘0‘ + date.getDate() : date.getDate()) + ‘ ‘;
      var h = (date.getHours() < 10 ? ‘0‘ + date.getHours() : date.getHours()) + ‘:‘;
      var m = (date.getMinutes() < 10 ? ‘0‘ + date.getMinutes() : date.getMinutes()) + ‘:‘;
      var s = (date.getSeconds() < 10 ? ‘0‘ + 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() + 1 < 10 ? ‘0‘ + (date.getMonth() + 1) : date.getMonth() + 1) + ‘-‘;
      var D = (date.getDate() < 10 ? ‘0‘ + date.getDate() : date.getDate()) + ‘ ‘;
      return Y + M + D;
    }
  }
}

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

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

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

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

原文地址:https://www.cnblogs.com/gitByLegend/p/11441999.html

时间: 2024-11-05 03:29:36

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

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元素之外的名称就好了 } </script> 原文地址:https://www.cnblogs.com/500m/p/11780472.html

vue 之node.js 02

文档 铺垫 以前网页制作web1.0 如今是web2.0-->交互式操作 前端工具 grunt gulp webpack :打包机 作用:将项目中的js,css,img,font,html等进行捆绑 编译成一个.js文件进行加载 请求 // img src , css href , audio src a href 都是对服务器发起一次请求 并行操作 ---> 异步 amd 和 cmd 模板化 异步模块定义 ---自己百度 什么是node.js 一种后端语言 # Node.js 是一个基于 C

node js构建一个vue并启动它

安装node js,到运行VUE的简单过程 1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行Node.js command prompt(node -v查看安装版本) 3.安装npm(由于现在版本的nodejs已经集成npm所以无需安装,可以用npm -v 查看版本) 4.注册cnpm来代替npm 使用命令:npm install cnpm -g --registry=https://registry.npm.taobao.org5.安装v

Vue过渡效果之JS过渡

前面的话 与CSS过渡不同,JS过渡主要通过事件进行触发.本文将详细介绍Vue过渡效果之JS过渡 事件钩子 JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子 <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled&

使用 Vue 和 epub.js 制作电子书阅读器

ePub 简介 ePub 是一种电子书的标准格式,平时我看的电子书大部分是这种格式.在手机上我一般用"多看"阅读 ePub 电子书,在 Windows 上找不到用起来比较顺心的软件,所以很久之前就想折腾一下,自己开发一个 ePub 电子书阅读器.这两天趁着有空,做了一个简单的阅读器.虽然还有些 bug,但基本功能算是齐全了.自己开发的有很多好处,以后只要稍微修改一下,就可以实现导出 HTML 或者 导出 Markdown 的功能,方便保存读书笔记,这一点比大多数软件好用多了. epub

最新的vue没有dev-server.js文件,如何进行后台数据模拟?

参照:https://blog.csdn.net/qq_34645412/article/details/78833860 最新的vue里dev-server.js被替换成了webpack-dev-conf.js 在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改 第一步,在const portfinder = require('portfinder')后添加 //第一步 const express = require('express') const app = exp

vue使用fetch.js发送post请求java后台无法获取参数值

问题:前台vue使用fetch.js发送post请求后,后台 request.getParameter()无法获取到参数值 思路:查阅后,原因为fetch中头文件Content-type这个Header为application/x-www-form-urlencoded导致request请求中的form data变成request payload 处理办法:后台controller中使用流接受数据后,在进行查询操作既可. vue代码 /** * 获取行业大类 */ export const ha

Vue 融入flexible.js scss(sass)文件 添加scss文件 sass

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "He

Vue(踩坑)vue.esm.js?efeb:628 [Vue warn]: Error in render: &quot;TypeError: Cannot read property &#39;0&#39; of undefined&quot; found in

1.项目报错如下 2.原因: 异步显示的数据先显示vuex中的初始数据,再显示请求的数据,一开始在vuex中state中的初始数据为空,报错是因为在显示初始数据的时候报错 3.解决:避免在没有数据的时候显示解析(有数据才解析) 有数据的时候div才存在,用v-if控制一下 5.总结:表达式有一层表达式(a),二层表达式(a.b),三层表达式(a.b.c), 当表达式三层的时候就有问题:比如a开始为空,a.b:的结果为undefined, a.b.c你再取的时候就会报错了 Vue(踩坑)vue.e