vue環(huán)境如何實(shí)現(xiàn)div?focus?blur焦點(diǎn)事件
vue div focus blur焦點(diǎn)事件
onfocus獲取焦點(diǎn)事件與onblur失去焦點(diǎn)事件本身是input類用的input類如果是點(diǎn)擊后才加載的話需要做個(gè)延時(shí)器,否則會(huì)報(bào)錯(cuò)
setTimeout(()=>{
? ? this.$refs.aside.focus()
},100)div想支持則需要加上tabindex="0"屬性//0或者以上
但是在vue環(huán)境中,加上這個(gè)也不支持,而移動(dòng)端無法使用鼠標(biāo)事件
<div tabindex="0" hidefocus="true" ref="aside" class="aside" @click="dialaing()" @blur='()=>{dialaingIsShow =false}'>
? ? <div v-show="dialaingIsShow" class="dialaing">dsadasd</div>
</div>dialaing(){
? ? ? ?this.$refs.aside.focus()
? ? ? ?this.dialaingIsShow = true
},就可以了
vue div 獲得焦點(diǎn)和失去焦點(diǎn)
<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() //獲得焦點(diǎn)
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;
/*移動(dòng)時(shí)的過度效果*/
transition: left 500ms ease;
color: #fff;
}
}
@media screen and (max-width: 1200px) {
/*隱藏在左邊*/
.aside {
position: fixed;
/*相對(duì)于窗口固定定位*/
top: 0;
left: -200px;
/*隱藏在左邊*/
width: 200px;
height: 100vh;
margin: 0;
padding: 0;
background-color: #23303E;
z-index: 100;
/*移動(dòng)時(shí)的過度效果*/
transition: left 500ms ease;
/*padding: 36px;*/
color: #fff;
}
}
/*可以滾動(dòng),但隱藏滾動(dòng)條*/
.aside::-webkit-scrollbar {
display: none;
}以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
自帶氣泡提示的vue校驗(yàn)插件(vue-verify-pop)
這篇文章主要為大家詳細(xì)介紹了自帶氣泡提示的vue校驗(yàn)插件,vue-verify-pop的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
Vue?響應(yīng)式系統(tǒng)依賴收集過程原理解析
Vue 初始化時(shí)就會(huì)通過 Object.defineProperty 攔截屬性的 getter 和 setter ,為對(duì)象的每個(gè)值創(chuàng)建一個(gè) dep 并用 Dep.addSub() 來存儲(chǔ)該屬性值的 watcher 列表,這篇文章主要介紹了Vue?響應(yīng)式系統(tǒng)依賴收集過程分析,需要的朋友可以參考下2022-06-06
vue-router路由懶加載及實(shí)現(xiàn)的3種方式
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實(shí)現(xiàn)的3種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue中實(shí)現(xiàn)深度監(jiān)聽的方法小結(jié)
在Vue中,深度監(jiān)聽是一種非常常見且重要的功能,它可以讓我們監(jiān)聽對(duì)象內(nèi)部的所有屬性,并對(duì)這些屬性的變化做出相應(yīng)的處理,在本篇博客中,我將為大家介紹Vue中如何實(shí)現(xiàn)深度監(jiān)聽的方法,需要的朋友可以參考下2024-09-09
vue + any-touch實(shí)現(xiàn)一個(gè)iscroll 實(shí)現(xiàn)拖拽和滑動(dòng)動(dòng)畫效果
這篇文章主要介紹了vue + any-touch實(shí)現(xiàn)一個(gè)iscroll實(shí)現(xiàn)拖拽和滑動(dòng)動(dòng)畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04

