Vue input placeholder占位文本暗文（密文）显示

最近有个openwrt的web前端配置的需求，c/c++老程序员迫不得已来学习写前端，发文来记录学习的过程。

里面有个需求是账号管理，用于用户配置设备的账号密码，placeholder显示原账号密码，入下图：
后面感觉密码直接显示好像不太好，希望占位文本的密码默认显示暗文，通过后面的眼睛来显示明文，我看了下element官网说明，show-password和type='password’只能控制输入的文字暗文显示，并不能满足我placeholder密文显示的需求，而且show-password自带的眼睛也没有相关的event，我就想到，可以通过input的suffix slots自定义眼睛，来达到我想要的效果，以下是效果展示：

下面展示相关代码：
HTML部分

<el-input 
	:disabled="cloudAccount.as_dev_account" 
	:type="showPassword1?'text':'password'" 
	v-model="form.password1" 
	:placeholder="showPassword1?old_password:scrit_password" 
	@input="passwordChange" 
	:maxlength="16">
		<img
			slot="suffix"
			style="display: flex;align-items: center; width:18px; height:18"
	        :src="showPassword1?'/icons/login/password_enable.png':'/icons/login/password_disable.png'"
	        alt
	        @mouseout="showPassword1=false"
	        @mousedown="showPassword1=true"
	        @mouseup="showPassword1=false"
	    />
</el-input>;

JavaScript部分

data() {
	return {
		showPassword1: false,
		old_password: '',
		scrit_password: '********'
	}
}

以上就是我的一点小思路，新手前端上路，大家多多指教