利用vue自定义指令实现输入框聚焦改变父元素的样式

需求：

 

 

 

 

HTML 部分：

<div class="login_input login_Code">
    <span class="input_icon">
        <i class="icon_all captcha_icon"></i>
    </span>
    <input
            autofocus
            type="text"
            class="user login_Code_input"
            v-model.trim="params.captcha"
            @input="changeCodeInput"
            @keyup.enter="submit"
            placeholder="请输入验证码"
            v-code
    />
    <img :src="imgSrc" class="imageCode" title="看不清？换一个" @click="changeCodeImage">
</div>

 

自定义指令部分：

   export default {
        directives: {
            // 验证码输入框获取焦点以及失去焦点时value值得变化以及父元素样式的变化
            'code': {
                inserted: function (el) {
                    var parent = el.parentNode
                    el.onfocus = function () {
                        parent.className = 'login_input login_input_focus'
                    }
                    el.onblur = function () {
                        parent.className = 'login_input '
                    }
                }
            }
        }
    }