利用vue自定义指令实现输入框聚焦时改变其父元素的样式（验证码输入框）

需求

聚焦时

div嵌套：

点击输入框1时，父组件2 的边框发生改变。

实现（以图片验证码为例）

HTML部分

<div class="login_code" for="input">
<input type="text" maxlength="6" v-model="captchaValue" placeholder="请输入图片验证" v-code>
<img :src="captchaImg" @click="captchaClick">
</div>

自定义指令部分

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

• 点赞 1
• 收藏
• 分享
• 文章举报