Vue失去焦点时所触发的事件
1-html、失去焦点
<input type="text" onBlur="txtblur()"> <script> function txtblur(event){ //当前元素失去焦点 console.log(123); } </script>
2-vue2.0、失去焦点
@input 一般用于监听事件,只要输入的值变化了就会触发input
<input :type="type" :value="value" :placeholder="placeholder" :name="name" @input="$emit('input',$event.target.value)" />
@click 事件触发事件
<input type="text" @click="clickFn">
@blur 是什么?
@blur 是当元素失去焦点时所触发的事件
使用
<template> <div> <input type="text" placeholder="请输入内容" @blur="blur"/> </div> </template> <script> export default { name: "@blur_61", methods:{ blur(){ console.log("blur事件被执行") } } } </script> <style scoped> </style>
3-vue3.0、失去焦点
结构
<el-input v-model="inputValue" v-bind="$attrs" @blur="handleBlur" @input="handleInput" class="custom-input" > </el-input>
方法
const handleBlur = () => {} const handleInput = (v) => {} return { ...toRefs(state), handleBlur, handleInput };
vue div获得焦点和失去焦点
<div tabindex="0" @blur="aside1_hide()" ref="aside1" class="aside" style="width: 200px; overflow: scroll;"> <!-- background-color="#23303E" transparent --> <el-menu background-color="#23303E" text-color="#fff" active-text-color="#fff"> ... </el-menu> </div>
left_click: function() { if (!this.left_show) { this.$refs.aside1.style.left = "0" this.$refs.aside1.focus() //获得焦点 this.left_show = true } else { this.aside1_hide() } }, aside1_hide:function () { this.$refs.aside1.style.left = "-200px" this.left_show = false },
@media screen and (min-width: 1200px) { .aside { position: static; width: 200px; height: 100vh; margin: 0; padding: 0; background-color: #23303E; z-index: 100; /*移动时的过度效果*/ transition: left 500ms ease; color: #fff; } } @media screen and (max-width: 1200px) { /*隐藏在左边*/ .aside { position: fixed; /*相对于窗口固定定位*/ top: 0; left: -200px; /*隐藏在左边*/ width: 200px; height: 100vh; margin: 0; padding: 0; background-color: #23303E; z-index: 100; /*移动时的过度效果*/ transition: left 500ms ease; /*padding: 36px;*/ color: #fff; } } /*可以滚动,但隐藏滚动条*/ .aside::-webkit-scrollbar { display: none; }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章: