用小眼睛图标控制手机号脱敏显示

用的是vue框架，以及ant design vue 组件库，代码如下：

<template>
  <a-form :form="form">
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="手机号"
    >
      <a-input  disabled v-model="mobile">
        <a-icon
          slot="suffix"
          @click="onEye"
          :type="isEyeOpen ? 'eye' : 'eye-invisible'"
        />
      </a-input>
    </a-form-item>
  </a-form>
</template>

<script>
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 }
}
export default {
  data () {
    return {
      realMobile: '13522221106',
      mobile: '',
      isEyeOpen: false,
      formItemLayout,
      form: this.$form.createForm(this, { name: 'mobile' })
    }
  },
  created () {
    this.mobile = this.hidePhoneNum(this.realMobile)
  },
  methods: {
    hidePhoneNum (phoneNum) {
      if (!phoneNum || !phoneNum.length) {
        console.error('hidePhoneNum, phone num is invalid')
        return
      }
      const reg = /^(\d{3})\d*(\d{4})$/
      return phoneNum.replace(reg, '$1****$2')
    },
    onEye () {
      console.log(`onEye: ${this.isEyeOpen}`)
      this.isEyeOpen = !this.isEyeOpen
      this.mobile = this.isEyeOpen ? this.realMobile : this.hidePhoneNum(this.realMobile)
    }
  }
}
</script>

需要引入 import { Form, Input, Icon } from 'ant-design-vue'

Vue.use(Form)

Vue.use(Input)

Vue.use(Icon)

可以自己看下效果