全局封装并使用方法Vue

序：

项目中一般必不可少会遇到，同一个方法多个页面或者组件都需要用到，这个时候我们可以封装一个全局方法，方便使用。本文章以limit-input.js为例（使用功能实现不做使用参考）。

文件存放位置：

一般位于src/utils下

limit-input.js内容

export default {
  /**
    * 只能输入大于0的正整数（不能以0开头）
    * @param {string} value
    * @returns {string | number} 返回空字符或数字
    */
   integerFn(value) {
       let reg = /[1-9]{1}[0-9]*$/;
       let strArray = value.split("");
       let newStrs = "";
       for (let i = 0; i < strArray.length; i  ) {
           if (reg.test(strArray[i])) {
               newStrs  = strArray[i];
           } else if (i > 0 && strArray[i] === "0") {
               newStrs  = strArray[i];
           }
       }
       if (newStrs - 0 > 0) {
           return newStrs - 0;
       } else {
           return "";
       }
   }
};

main.js文件

// 将限制函数文件绑定到vue原型上，供全局使用
import limit from "./utils/limit-fuction";
Vue.prototype.$limit = limit;

vue组件中使用：

 <el-input v-model="signValue" @input="(e) => (signValue = $limit.integerFn(e))"></el-input>

这篇好文章是转载于：学新通技术网