基于vue封裝一個(gè)帶眼睛的密碼子組件

更新時(shí)間：2023年09月15日 08:35:30 作者：小孔菜菜

這篇文章給大家介紹了基于vue封裝一個(gè)帶眼睛的密碼子組件的方法,文章中有詳細(xì)的代碼講解,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

眼睛的icon使用的是阿里的圖標(biāo)庫(kù)https://www.iconfont.cn/

【思路分析】：

首先這個(gè)密碼組件是input+icon完成的(也可以是img但是我很懶，不想寫(xiě)css)

對(duì)于input來(lái)說(shuō)：要做2件事情

眼睛睜開(kāi)：type是text，眼睛閉上：type是password
給父組件提交用戶輸入的值

對(duì)于圖標(biāo)來(lái)說(shuō)：要做2件事

可以點(diǎn)擊
保證密碼-閉眼文本-睜眼這個(gè)效果

【核心代碼】：

flagType綁定動(dòng)態(tài)的值 data中的flagType:'password',
:class="[flag ? 'iconfont icon-yanjing_yincang_o': 'iconfont icon-yanjing_xianshi_o']"動(dòng)態(tài)樣式
toShowPassword函數(shù)，眼睛的點(diǎn)擊事件

    <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這個(gè)方法將子組件的數(shù)據(jù)提交到了父組件，父組件通過(guò)v-model就可以拿到這個(gè)值

這里其實(shí)還涉及一個(gè)知識(shí)點(diǎn)，就是v-model是怎么實(shí)現(xiàn)的？其實(shí)上面的代碼可以進(jìn)行原生的改下，請(qǐng)看下面的代碼

<toggle-passowrd v-model="form.password"></toggle-passowrd>
// 原生
<toggle-passowrd @input="setPassword" :value="form.password"></toggle-passowrd>

原生需要的方法：

    setPassword(val) {
        this.form.password = val
    },

這樣知識(shí)就串聯(lián)了起來(lái)，子組件通過(guò)emit將數(shù)據(jù)給了父組件，父組件通過(guò)子組件提交的input事件去取數(shù)據(jù)，而vue為此，提供了一個(gè)vue的指令，就是v-model，v-model就是獲取數(shù)據(jù)，并賦值數(shù)據(jù)，實(shí)現(xiàn)綁定。

以上就是基于vue封裝一個(gè)帶眼睛的密碼子組件的詳細(xì)內(nèi)容，更多關(guān)于vue帶眼睛的密碼子組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: