Vue mobile phone, name, etc. mask

The method is dead, but the mind is flexible. According to the known methods, different requirements should be fulfilled~

Phone mask:

<span>{
   
   { phone|hidePhone }}</span>	

filters: {
  hidePhone(val) {
    if (val) {
      return `${val.substring(0, 3)}*****${val.substring(val.length - 3)}`;
    }
  }
}    

---

Name/Company Name Mask:

//不超过12位只显示第一位加*（后面隐藏多少个字多少个*），超过12位显示第一位加***********
<span>{
   
   { name | hideName }}</span>

filters: {
 hideName(val) {
   if (val.length <= 12) {
     return `${val.substring(0, 1).padEnd(val.length, "*")}`;
    } 
   else {
      return `${val.substring(0, 1)}***********`;
    }
  }
}   

---

The content exceeds x word masks

//内容超过20个字显示...
<span>{
   
   { content | hideContent}}</span>

filters: {
  hideContent(val) {
    if (!val) return "";
    if (val.length > 20) {
        return val.slice(0, 20) + "...";
      }
      return val;      
    }
}