element-ui el-input 密码输入框自定义显示隐藏图标

准备图标或者图片

 

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

 最终效果