Vue使用全局工具库函数-原创手记-慕课网

场景描述

是这样的，在开发项目的时候，我封装了一个工具库函数用来封装全局通用的业务代码，比如判断中文姓名或者身份证的正误，下面是代码示例

export function isPersonName(val) {
  let pattern = /^[\u4E00-\u9FA5]{2,4}$/;
  if(pattern.test(val)) {
    return true;
  } 
  return false;
}

调用以上的封装函数

import { isPersonName } from "@/utils/format.js"
if(!isPersonName(this.visitingPersonName) || this.visitingPersonName == "") {
  this.$toast({
    message: `请填写正确的就诊人姓名`,
    position: "middle",
    duration: 2000
  });
  return false;
}

问题再现

此时有了另一个需求，就是需要隐藏身份证中间的年月日，我同样使用相同的方式将其封装在工具库函数中

export function interceptIdCard(val) {
  return val.replace(/(\d{4})\d*([0-9a-zA-Z]{4})/,"$1******$2");
}

在调用的时候就出现问题了

import { interceptIdCard } from "@/utils/format.js"
<div class="item-footer">{{interceptIdCard(item.visitingPersonIdentification)}}</div>

[Vue warn]: Property or method “interceptIdCard” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

看错误提示是interceptIdCard 这个函数对象并未写入Vue实例中，然而为什么第一个栗子却能够跑通呢？这让我百思不得其解，后来只能将interceptIdCard 函数写在Vue实例中methods集合里面才得以正常运行

<div class="item-footer">{{interceptIdCard(item.visitingPersonIdentification)}}</div>

methods: {
  interceptIdCard(val){
    return val.replace(/(\d{4})\d*([0-9a-zA-Z]{4})/,"$1****$2");
  }
}

以上是我在开发中的一些分享，如果有人知道如何解决文中的问题，希望告知下啦。

后记

解决这个问题了，其实简单的很，怎么自己就想不到，我好菜啊。下面看解决方法

export function interceptIdCard(val) {
  return val.replace(/(\d{4})\d*([0-9a-zA-Z]{4})/,"$1******$2");
}

在组件中引用

<div class="item-footer">{{interceptIdCards(item.visitingPersonIdentification)}}</div>

import { interceptIdCard } from "@/utils/format.js";
// 切割身份证正则表达式
interceptIdCards(val) {
  return interceptIdCard(val);
}

真的是菜死了，麻蛋！