element

2023-04-17 20:31| 来源: 网络整理| 查看: 265

准备图标或者图片

标签代码

中代码

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) } } }

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

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

最终效果

【本文地址】

element

element

今日新闻

推荐新闻