nvue 密码输入框 小眼睛
时间: 2023-06-15 22:08:05 浏览: 77
你想在 nvue 中实现密码输入框的小眼睛效果,可以使用 uni-icons 中的图标库,其中有“eye”和“eye-off”两个图标,分别表示显示密码和隐藏密码。具体实现步骤如下:
1. 在 nvue 页面中引入 uni-icons 组件库
```html
<template>
<view>
<uni-icons></uni-icons>
</view>
</template>
<script>
import uniIcons from '@/uni-icons/uni-icons.vue'
export default {
components: {
uniIcons
}
}
</script>
```
2. 在密码输入框旁边添加一个小眼睛图标,并设置点击事件
```html
<template>
<view>
<input type="password" v-model="password" />
<uni-icons class="eye-icon" :name="eyeIcon" @click="togglePassword"></uni-icons>
</view>
</template>
<script>
import uniIcons from '@/uni-icons/uni-icons.vue'
export default {
components: {
uniIcons
},
data() {
return {
password: '',
showPassword: false
}
},
computed: {
eyeIcon() {
return this.showPassword ? 'eye' : 'eye-off'
}
},
methods: {
togglePassword() {
this.showPassword = !this.showPassword
}
}
}
</script>
<style scoped>
.eye-icon {
position: absolute;
right: 10px;
top: 10px;
font-size: 26px;
color: #999;
cursor: pointer;
}
</style>
```
3. 在点击事件中切换密码输入框的 input type 属性
```html
<template>
<view>
<input :type="showPassword ? 'text' : 'password'" v-model="password" />
<uni-icons class="eye-icon" :name="eyeIcon" @click="togglePassword"></uni-icons>
</view>
</template>
<script>
import uniIcons from '@/uni-icons/uni-icons.vue'
export default {
components: {
uniIcons
},
data() {
return {
password: '',
showPassword: false
}
},
computed: {
eyeIcon() {
return this.showPassword ? 'eye' : 'eye-off'
}
},
methods: {
togglePassword() {
this.showPassword = !this.showPassword
}
}
}
</script>
<style scoped>
.eye-icon {
position: absolute;
right: 10px;
top: 10px;
font-size: 26px;
color: #999;
cursor: pointer;
}
</style>
```
通过上述步骤,你就可以在 nvue 中实现密码输入框的小眼睛效果了。