uni-app input输入款点击小眼睛显示或隐藏密码

1、demo.vue

<template>

<view class="container">     

     <view class="pwd-view input_view">
         <input type="text" :password="showPassword" placeholder="请输入密码" value="" placeholder-class="pstyle" />
         <view  :class="[!showPassword ? 'icon iconfont iconopeneye' : 'icon iconfont iconcloseeye']" @click="showPwd"></view>

         //上面的iconfont是引用的阿里iconfont
     </view> 

</view>

</template>

2、js部分

<script>
    export default {
        data() {
            return {
                showPassword: true
            }
        },
        methods: {
            showPwd: function() {
                this.showPassword = !this.showPassword;
            }
        }
    }
</script>

3、css

input{
    font-size: 28upx;
    color: #333333;
    padding: 30upx 0;
}

.pwd-view{

   width: 698upx;
    margin: 20upx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}