直播系统搭建，密码输入框自定义显示隐藏图标
<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>
以上就是 直播系统搭建，密码输入框自定义显示隐藏图标，更多内容欢迎关注之后的文章