vue环境如何实现div|vue环境如何实现div focus blur焦点事件 vue环境如何实现divfocusblur焦点

vue div focus blur焦点事件
vue div 获得焦点和失去焦点

vue div focus blur焦点事件

onfocus获取焦点事件与onblur失去焦点事件本身是input类用的
input类如果是点击后才加载的话需要做个延时器，否则会报错

setTimeout(()=>{this.$refs.aside.focus()},100)

div想支持则需要加上tabindex="0"属性//0或者以上
但是在vue环境中，加上这个也不支持，而移动端无法使用鼠标事件

{dialaingIsShow =false}'>dsadasd

dialaing(){this.$refs.aside.focus()this.dialaingIsShow = true},

就可以了

vue 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; }

【vue环境如何实现div|vue环境如何实现div focus blur焦点事件】以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。