直播商城源码，密码输入框自定义显示隐藏图标

直播商城源码，密码输入框自定义显示隐藏图标

 <el-input>标签代码

<el-input ref="pwdInput"
          :type="pwdObj.pwdType"
          v-model="password"
          @focus="focusEnd($event)">
  <!-- input中加图标必须要有slot="suffix"属性，不然无法显示图标 -->
  <el-image slot="suffix"
            class="img-sty"
            :src="getIconUrl(pwdObj.pwdType === 'text' ? 'offeye' : 'openeye')"
            fit="scale-down"
            @click="changeye('pwdType', 'pwdInput')" />
</el-input>
 <script type="text/javascript">中代码
<script>
  export default {
data() {
return {
            password: '',
pwdObj: { pwdType: 'password'}
}
},
computed: {
// 获取图标
getIconUrl() {
return function (name, type = 'svg') {
return require(`@/assets/img/icons/${name}.${type}`)
}
},
methods: {
//点击图标控制密码的显示和隐藏
changeye(typeName, refName) {
this.$set(
this.pwdObj,
`${typeName}`,
this.pwdObj[`${typeName}`] === 'password' ? 'text' : 'password'
)
this.$refs[`${refName}`].focus()
},
//点击查看密码图标使光标定位到最后
focusEnd(e) {
//input获取光标显示在最后
const obj = e.srcElement,
// obj.focus()
len = obj.value.length
//光标定位要加上 setTimeOut，不然就会重新光标定位失败
setTimeout(() => {
obj.selectionStart = obj.selectionEnd = len
}, 60)
}
}
}
</script>

​

 可能自定义图标后，显示的位置没那么准确，根据需要通过css调整

.img-sty {
  cursor: pointer;
  margin-top: 10px;
}

 以上就是 直播商城源码，密码输入框自定义显示隐藏图标，更多内容欢迎关注之后的文章