點擊眼睛圖標顯示密碼,再次點擊圖標隱藏密碼
一、知識點:
- 帶
icon
的輸入框,可以通過prefix-icon
和suffix-icon
屬性在input
組件首部和尾部增加顯示圖標,也可以通過slot
來放置圖標。 - 因爲圖標涉及點擊事件,帶
icon
的輸入框,採用的是slot
方式。 slot="suffix"
表示,圖標會出現在input 的尾部;
二、實現思路
- 要變化的有,圖標樣式和input的顯示方式
- 定義一個
flag
默認false,綁定input 的type值,flag爲true時,type爲text
類型(可以看見數字,實現顯示密碼),否則爲password
類型(隱藏密碼) - 圖標隨之改變,也需綁定class,點擊圖標時,改變
flag
的值
<template>
<div class="login-container">
<el-input v-model="pwd" :type="[flag?'text':'password']" style="border:1px solid #fff;width:250px;" placeholder="請輸入密碼">
<i slot="suffix" :class="[flag?'el-icon-minus':'el-icon-view']" style="margin-top:8px;font-size:18px;" autocomplete="auto" @click="flag=!flag" />
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
pwd: '123456',
flag: false
}
}
}
</script>