欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element input輸入框自動獲取焦點的實現(xiàn)

 更新時間：2021年10月01日 09:16:12   作者：蘿卜砸大坑  
本文主要介紹了element input輸入框自動獲取焦點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近項目中在做表單的時候，需要自動滾動到評論框，并且讓評論框自動聚焦，這就需要手動觸發(fā)輸入框的 focus 狀態(tài)。

但是，element并不支持autofocus屬性，那就只能通過原生的js效果獲取聚焦效果了

document.getElementById("input").focus();

或者利用vue的ref屬性也可以實現(xiàn)聚焦效果：

原理其實很簡單，Element 已經(jīng)提供了 focus 方法，但是文檔并沒有寫明如何去調(diào)用,下面是在el-input標簽上加入ref屬性，然后在需要的地方直接調(diào)用方法就可以了

<el-input v-model="input" placeholder="請輸入內(nèi)容" ref="input"></el-input>

this.$nextTick(() => {
      this.$refs.input.focus()
    })

注意：一個頁面只能有一個聚焦效果

last , vue也支持自定義指令

當頁面加載時，該元素將獲得焦點 (注意：autofocus 在移動版 Safari 上不工作)。事實上，只要你在打開這個頁面后還沒點擊過任何內(nèi)容，這個輸入框就應(yīng)當還是處于聚焦狀態(tài)。現(xiàn)在讓我們用指令來實現(xiàn)這個功能：

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
    // element-ui
    el.children[0].focus()
    // 元素有變化，如show或者父元素變化可以加延時或判斷
    setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

參考：vue自定義指令 https://cn.vuejs.org/v2/guide/custom-directive.html

到此這篇關(guān)于element input輸入框自動獲取焦點的實現(xiàn)的文章就介紹到這了,更多相關(guān)element input輸入框自動獲取焦點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue實現(xiàn)購物車完整功能

    vue實現(xiàn)購物車完整功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車完整功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-01-01
  • vue前端通過騰訊接口獲取用戶ip的全過程

    vue前端通過騰訊接口獲取用戶ip的全過程

    今天在寫項目掉接口的時候有一個接口需要到了用戶的ip地址,查了半天覺得這個方法不錯,下面這篇文章主要給大家介紹了關(guān)于vue前端通過騰訊接口獲取用戶ip的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作

    vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作

    這篇文章主要介紹了vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue el-date-picker 開始日期不能大于結(jié)束日期的實現(xiàn)代碼

    vue el-date-picker 開始日期不能大于結(jié)束日期的實現(xiàn)代碼

    這篇文章主要介紹了vue el-date-picker 開始日期不能大于結(jié)束日期的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-01-01
  • 使用idea創(chuàng)建vue項目的圖文教程

    使用idea創(chuàng)建vue項目的圖文教程

    Vue.js是一套構(gòu)建用戶界面的框架,只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合,下面這篇文章主要給大家介紹了關(guān)于使用idea創(chuàng)建vue項目的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • Vue項目數(shù)據(jù)動態(tài)過濾實踐及實現(xiàn)思路

    Vue項目數(shù)據(jù)動態(tài)過濾實踐及實現(xiàn)思路

    這篇文章主要介紹了Vue項目數(shù)據(jù)動態(tài)過濾實踐,，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-09-09
  • Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解

    Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解

    計算屬性就是 Vue 實例選項中的 computed，computed 的值是一個對象類型，對象中的屬性值為函數(shù)，而且這個函數(shù)沒辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語法之計算屬性(computed)、偵聽器(watch)、過濾器(filters)詳解,需要的朋友可以參考下
    2022-11-11
  • 詳解Vue 全局變量，局部變量

    詳解Vue 全局變量，局部變量

    這篇文章主要介紹了Vue全局變量局部變量，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue?props使用typescript自定義類型的方法實例

    vue?props使用typescript自定義類型的方法實例

    這篇文章主要給大家介紹了關(guān)于vue?props使用typescript自定義類型的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2023-01-01
  • Vue?(Vuex)中?store?基本用法

    Vue?(Vuex)中?store?基本用法

    Vuex?是一個專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下
    2023-01-01

最新評論