在uni-app实现点击小眼睛图标来隐藏和显示手机号码

在uni-app中，你可以通过JavaScript或者Vue.js来实现点击小眼睛图标（通常表示显示/隐藏）的功能来控制手机号码的可见性。以下是一个简单的步骤说明：

1. 首先，你需要在WXML模板文件中创建一个包含手机号码和小眼睛图标的组件，例如：

<view class="item">
  <view class="tel" v-if="showPhone">{{ phoneNumber }}</view>
  <image class="eye" src="eye.png" @click="togglePhoneVisibility" />
</view>

2. 然后，在对应的JS/CSS文件里，设置初始状态（如`showPhone = false`），并编写`togglePhoneVisibility`方法：

Page({
  data: {
    phoneNumber: '隐藏的手机号',
    showPhone: false,
  },
  methods: {
    togglePhoneVisibility(e) {
      this.showPhone = !this.showPhone;
      // 如果你想同时切换小眼睛的状态，可以这样做：
      if (this.showPhone) {
        this.$el.querySelector('.eye').src = 'eye_close.png';
      } else {
        this.$el.querySelector('.eye').src = 'eye_open.png';
      }
    },
  },
})

在这个例子中，当用户点击眼睛图标时，`togglePhoneVisibility`会被触发，`showPhone`的状态会被反转，相应的手机号码会显示或隐藏。