Vue中的@blur/@focus事件解讀
更新時(shí)間：2023年03月04日 14:28:12 作者：年輕即出發(fā)
這篇文章主要介紹了Vue中的@blur/@focus事件解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue的@blur/@focus事件
@blur是當(dāng)元素失去焦點(diǎn)時(shí)所觸發(fā)的事件@focus是元素獲取焦點(diǎn)時(shí)所觸發(fā)的事件
<template>
<div>
<!--
@blur 當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)blur事件
-->
<div>
<input type="text" placeholder="請(qǐng)輸入內(nèi)容" @blur="blurText"/>
</div>
</div>
</template>
<script>
export default {
name: "commitText",
methods:{
blurText(){
console.log("blur事件被執(zhí)行了")
}
}
}
</script>
<style scoped>
</style>focus和blur事件，改變選中時(shí)搜索框的背景色
template
<div class="search-box" ref="searchBoxOfChatRoom"> ?? ?<i class="fa fa-search" aria-hidden="true"></i> ?? ?<input ?? ??? ?ref="searchOfChatRoom" ?? ??? ?class="chatroom-search" ?? ??? ?type="search" ?? ??? ?placeholder="搜索群成員" ?? ??? ?@focus="changBackground(1)" ?? ??? ?@blur="changBackground(2)" ?? ?> </div>
js
changBackground (flag) {
? switch (flag) {
? ? case 1:
? ? ? console.log('獲取焦距')
? ? ? this.$refs.searchBoxOfChatRoom.style.background = 'white'
? ? ? this.$refs.searchOfChatRoom.style.background = 'white'
? ? ? break
? ? case 2:
? ? ? console.log('失去焦距')
? ? ? this.$refs.searchBoxOfChatRoom.style.background = '#dadada'
? ? ? this.$refs.searchOfChatRoom.style.background = '#dadada'
? ? ? break
? ? default:
? ? ? break
? }
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue實(shí)現(xiàn)全局菜單搜索框的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要給大家介紹了關(guān)于vue組件的路由高亮問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue-router路由模式詳解(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目
這篇文章主要介紹了Vue項(xiàng)目如何根據(jù)不同運(yùn)行環(huán)境打包項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別
這篇文章主要介紹了vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue3+ts封裝axios實(shí)例以及解決跨域問(wèn)題
在前端開(kāi)發(fā)中,使用axios進(jìn)行數(shù)據(jù)請(qǐng)求是常見(jiàn)的做法,封裝axios可以統(tǒng)一請(qǐng)求頭處理、方便接口管理、配置多攔截器等,提高代碼的可維護(hù)性和重用性,本文詳細(xì)記錄了axios的封裝過(guò)程,包括安裝、配置跨域處理、接口管理文件的創(chuàng)建等2024-09-09
antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了antv完成區(qū)間柱形圖一列多柱配置實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue3使用vuedraggable和grid實(shí)現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實(shí)現(xiàn)自定義拖拽布局方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
如何啟動(dòng)一個(gè)Vue.js項(xiàng)目
這篇文章主要介紹了如何啟動(dòng)一個(gè)Vue.js項(xiàng)目，對(duì)Vue.js感興趣的同學(xué)，可以參考下2021-04-04
使用Vue指令實(shí)現(xiàn)Markdown渲染和代碼高亮
在前端開(kāi)發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁(yè)面上,同時(shí)還希望能夠?qū)Υa塊進(jìn)行高亮顯示,今天我將分享一段代碼,通過(guò)Vue指令實(shí)現(xiàn)了這個(gè)功能,需要的朋友可以參考下2023-09-09