vue 号码隐私保护组件

手机号码和身份证等需要隐藏可以用这组件,点击显示隐藏切换 效果

vue2版本

<template>
  <div class="yq-privacy-star-wrap">
    <template v-if="isShow">
      <div
        class="yq-privacy-star-text"
        :style="`color: ${textColor};font-size: ${textSize};`"
      >{{ originText }}</div>
      <div
        class="yq-privacy-star-btn"
        :style="`color: ${buttonColor}`"
        @click="handleChange"
        v-if="buttonShow"
      >隐藏</div>
    </template>
    <template v-else>
      <div
        class="yq-privacy-star-text"
        :style="`color: ${textColor};font-size: ${textSize};`"
      >{{ showText }}</div>
      <div
        class="yq-privacy-star-btn"
        :style="`color: ${buttonColor}`"
        @click="handleChange"
        v-if="buttonShow"
      >显示</div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    /**
     * 需要加星的文字
     **/
    text: {
      type: String,
      default: '',
    },
    /**
     * 文字大小
     * */
    textSize: {
      type: String,
      default: '16px',
    },
    /**
     * 文字颜色
     * */
    textColor: {
      type: String,
      default: '#000',
    },
    /**
     * 头部需要显示的文字数量
     * */
    beforeNum: {
      type: Number,
      default: 1,
    },
    /**
     * 尾部需要显示的文字数量
     * */
    afterNum: {
      type: Number,
      default: 1,
    },
    /**
     * 中间需要显示的星星数量
     * */
    starNum: {
      type: Number,
      default: 1,
    },
    /**
     * 是否需要 显示和隐藏 按钮
     * */
    buttonShow: {
      type: Boolean,
      default: true,
    },
    buttonColor: {
      type: String,
      default: '#1A73E8',
    },
  },

  data(){
      return {
        isShow:false,
        originText:"",
        showText:''
      }
    },
 
  mounted() {
    this.formatText(this.text)
  },

  methods: {
    formatText(val) {
      if (val) {
        this.originText = val
        this.showText = val
        if (val.length >= this.beforeNum + this.afterNum) {
          this.showText = val.substring(0, this.beforeNum)
          for (let i = 0; i < this.starNum; i++) {
            this.showText += '*'
          }
          this.showText += val.substring(val.length - this.afterNum, val.length)
        }
      } else {
        this.originText = '-'
        this.showText = '-'
      }
    },

    handleChange() {
      this.isShow = !this.isShow
    },
  },

  watch: {
    text(val) {
      this.formatText(val)
    },
  },

}
</script>

<style scoped>
.yq-privacy-star-wrap {
  width: auto;
  height: auto;
  display: flex;
}
.yq-privacy-star-text {
}
.yq-privacy-star-btn {
  margin-left: 5px;
  font-size: 10px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
</style>

vue3版本

<script setup>
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
  /**
   * 需要加星的文字
   **/
  text: {
    type: String,
    default: '',
  },
  /**
   * 文字大小
   * */
  textSize: {
    type: String,
    default: '16px',
  },
  /**
   * 文字颜色
   * */
  textColor: {
    type: String,
    default: '#000',
  },
  /**
   * 头部需要显示的文字数量
   * */
  beforeNum: {
    type: Number,
    default: 1,
  },
  /**
   * 尾部需要显示的文字数量
   * */
  afterNum: {
    type: Number,
    default: 1,
  },
  /**
   * 中间需要显示的星星数量
   * */
  starNum: {
    type: Number,
    default: 1,
  },
  /**
   * 是否需要 显示和隐藏 按钮
   * */
  buttonShow: {
    type: Boolean,
    default: true,
  },
  buttonColor: {
    type: String,
    default: '#1A73E8',
  },
});

const showText = ref('');
const originText = ref('');
const isShow = ref(false);

function formatText(val) {
  if (val) {
    originText.value = val;
    showText.value = val;
    if (val.length >= props.beforeNum + props.afterNum) {
      showText.value = val.substring(0, props.beforeNum);
      for (let i = 0; i < props.starNum; i++) {
        showText.value += '*';
      }
      showText.value += val.substring(val.length - props.afterNum, val.length);
    }
  } else {
    originText.value = '-';
    showText.value = '-';
  }
}

function handleChange() {
  isShow.value = !isShow.value;
}

watch(
  () => props.text,
  () => {
    formatText(text)
  },
);

onMounted(() => {
  formatText(props.text)
})
</script>

<template>
 <div class="hb-privacy-star-wrap">
    <template v-if="isShow">
      <div class="hb-privacy-star-text" :style="`color: ${textColor};font-size: ${textSize};`">{{ originText }}</div>
      <div class="hb-privacy-star-btn" :style="`color: ${buttonColor}`" @click="handleChange" v-if="buttonShow">隐藏</div>
    </template>
    <template v-else>
      <div class="hb-privacy-star-text" :style="`color: ${textColor};font-size: ${textSize};`">{{ showText }}</div>
      <div class="hb-privacy-star-btn" :style="`color: ${buttonColor}`" @click="handleChange" v-if="buttonShow">显示</div>
    </template>
  </div>
</template>

<style scoped>
.hb-privacy-star-wrap{
  width: auto;
  height: auto;
  display: flex;
}
.hb-privacy-star-text{

}
.hb-privacy-star-btn{
  margin-left: 5px;
  font-size: 10px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
</style>