基于vue封裝一個帶眼睛的密碼子組件
眼睛的icon使用的是阿里的圖標(biāo)庫https://www.iconfont.cn/
【思路分析】：
首先這個密碼組件是input+icon完成的(也可以是img但是我很懶，不想寫css)
對于input來說：要做2件事情
眼睛睜開：type是text，眼睛閉上：type是password
給父組件提交用戶輸入的值
對于圖標(biāo)來說：要做2件事
可以點擊
保證 密碼-閉眼 文本-睜眼 這個效果
【核心代碼】：
flagType綁定動態(tài)的值 data中的flagType:'password',:class="[flag ? 'iconfont icon-yanjing_yincang_o': 'iconfont icon-yanjing_xianshi_o']"動態(tài)樣式toShowPassword函數(shù)，眼睛的點擊事件
<el-input
v-model="value"
:type="flagType"
ref="password"
@input="emitInput"
>
<i
slot="suffix"
class="el-input__icon eye-wrapper"
:class="[flag ? 'iconfont icon-yanjing_yincang_o': 'iconfont icon-yanjing_xianshi_o']"
@click="toShowPassword">
</i>
</el-input>【script代碼】：
```js
data() {
return {
value: '',
flag: true,
flagType: 'password',
}
},
```
```js
methods: {
toShowPassword() {
this.flag = !this.flag
this.flagType = this.flag ? 'password' : 'text'
this.$nextTick(() => {
this.$refs.password.focus()
})
},
? ? ? ?//提交數(shù)據(jù)
emitInput() {
this.$emit('input', this.value)
},
? }
```【父組件引用】：
我在父組件中設(shè)置了展示密碼的按鈕
<div style="width: 200px">
<h1>密碼組件</h1>
<toggle-passowrd v-model="form.password"></toggle-passowrd>
<el-button @click="getPassword">展示密碼</el-button>
</div>在子組件中emitInput這個方法將子組件的數(shù)據(jù)提交到了父組件，父組件通過v-model就可以拿到這個值
這里其實還涉及一個知識點，就是v-model是怎么實現(xiàn)的？其實上面的代碼可以進(jìn)行原生的改下，請看下面的代碼
<toggle-passowrd v-model="form.password"></toggle-passowrd> // 原生 <toggle-passowrd @input="setPassword" :value="form.password"></toggle-passowrd>
原生需要的方法：
setPassword(val) {
this.form.password = val
},這樣知識就串聯(lián)了起來，子組件通過emit將數(shù)據(jù)給了父組件，父組件通過子組件提交的input事件去取數(shù)據(jù)，而vue為此，提供了一個vue的指令，就是v-model，v-model就是獲取數(shù)據(jù)，并賦值數(shù)據(jù)，實現(xiàn)綁定。
以上就是基于vue封裝一個帶眼睛的密碼子組件的詳細(xì)內(nèi)容，更多關(guān)于vue帶眼睛的密碼子組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue請求后端數(shù)據(jù)和跨域問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
element-ui組件table實現(xiàn)自定義篩選功能的示例代碼
這篇文章主要介紹了element-ui組件table實現(xiàn)自定義篩選功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要為大家介紹了實時通信Socket?io的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要給大家介紹了關(guān)于vue封裝自定義分頁器組件與使用方法的相關(guān)資料,非常的好用,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue移動端輕量級的輪播組件實現(xiàn)代碼，一個簡單的移動端卡片滑動輪播組件，適用于Vue2.x。本文給大家?guī)砹藢嵗a，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了Vue項目中使用自定義字體樣式方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了vue組件掛載到全局方法的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家分享介紹了關(guān)于動態(tài)Axios的配置步驟，文中通過示例代碼介紹的非常詳細(xì)，通過這個教程大家可以很方便的實現(xiàn)動態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
本文主要介紹了Vite3遷移Webpack5的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04