uni-app中uni-easyinput type="password" 显示两个小眼睛
uni-app中uni-easyinput type=“password” 显示两个小眼睛
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10专业版 | HBuilderX |
示例代码：
<uni-easyinput type="password" v-model="valiFormData.old_password" placeholder="请输入密码"></uni-easyinput>操作步骤：
- edge最新版浏览器官网实例中直接随意输入字符
预期结果：
- 当使用uni-easyinput type=password 时只出现一个小眼睛
实际结果：
- 当uni-easyinput type=password 时不出现两个小眼睛
bug描述：
edge浏览器下使用uni-easyinput type=“password” 的情况下，源码中input v-else :type="type == ‘password’ ? ‘text’ 这一段代码并未生效，控制台查看input属性typo仍为password,导致页面出现两个眼睛，官网示例中也有这个bug
6 回复
/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue
在这个组件添加就可去除
/去除ie edge的密码框默认出现的小眼睛/
.uni-easyinput__content-input ::-ms-reveal {
display: none;
}
在 uni-app 中使用 uni-easyinput 组件时，如果你将 type 设置为 "password"，默认情况下会显示一个密码输入框，并且会有一个小眼睛图标用于切换密码的可见性。如果你希望显示两个小眼睛图标，可以通过自定义样式或使用其他组件来实现。
以下是一个简单的示例，展示如何使用 uni-easyinput 并自定义显示两个小眼睛图标：
<template>
<view>
<uni-easyinput
v-model="password"
type="password"
placeholder="请输入密码"
:passwordIcon="false"
>
<template #right>
<view class="eye-icon" @click="togglePasswordVisibility">
<uni-icons :type="isPasswordVisible ? 'eye' : 'eye-slash'" size="20" color="#999"></uni-icons>
</view>
<view class="eye-icon" @click="togglePasswordVisibility">
<uni-icons :type="isPasswordVisible ? 'eye' : 'eye-slash'" size="20" color="#999"></uni-icons>
</view>
</template>
</uni-easyinput>
</view>
</template>
<script>
export default {
data() {
return {
password: '',
isPasswordVisible: false
};
},
methods: {
togglePasswordVisibility() {
this.isPasswordVisible = !this.isPasswordVisible;
this.$refs.easyInput.type = this.isPasswordVisible ? 'text' : 'password';
}
}
};
</script>
<style>
.eye-icon {
margin-left: 10px;
cursor: pointer;
}
</style>