效果
文章来源：https://www.toymoban.com/news/detail-730479.html
文章来源地址https://www.toymoban.com/news/detail-730479.html
代码
<template>
<view class="container">
<view class="item_left">
<view>密码</view>
<view class="eye_position" @tap='toggleShowPassword'>
<image :src='eye' v-if='isShowPassword' />
<image :src='eye_close' v-if='!isShowPassword' />
</view>
</view>
<view class="item_right">
<input data-type="password" :password='isShowPassword' value="123456789">
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShowPassword: true,
eye: getApp().globalData.icon + 'index/mine/eye.png',
eye_close: getApp().globalData.icon + 'index/mine/eye_close.png',
}
},
onLoad() {
},
methods: {
//密码是否显示
toggleShowPassword: function(e) {
var isShowPassword = !this.isShowPassword;
this.isShowPassword = isShowPassword
},
}
}
</script>
<style lang="scss">
.container {
display: flex;
align-items: center;
border:1px solid black;
padding:2%;
.item_left {
width: 30%;
display: flex;
.eye_position {
margin: 0px;
padding: 0px;
width: 45rpx;
height: 45rpx;
padding-right: 2%;
}
.eye_position image {
margin: 0px;
padding: 0px;
width: 45rpx;
height: 45rpx;
}
}
.item_right {
width: 70%;
text-align: right;
color: #8c8c8c;
input {
border: 1px solid #0199fe;
padding: 2%;
}
}
}
</style>到了这里，关于uni-app：实现密码框内容展示与隐藏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
