How to automatically focus the vue element.ui form component

the ideal effect is a full keyboard operation, so when you need to open the pop-up window, the focus will automatically focus on the form component in the pop-up window.
has tried .focus () event, onfocus attribute, autofocus and other methods, which are not successful, which may have something to do with the encapsulation of element.ui components. I hope God can answer, thank you

.
Mar.18,2021

<el-input v-model="form.site" ref="siteInput" auto-complete="off" placeholder="" ></el-input>

so when you need to open the pop-up window, follow the following code.

  self.$nextTick(function(){
       self.$refs['siteInput'].focus();        
  })

https://jsfiddle.net/L8zdcasb/1/

has this student read the document carefully? if you search the document casually, you can see a lot of related content if you search focus.

http://element-cn.eleme.io/-sharp/.


now let's answer the question I asked earlier. The project I'm working on now is a common pop-up window. The first plug-in is usually input/radio-button/datePicker and the like. If you use Jquery to get elements, that is to write an id, and get it with jquery, which is not too much to say. Due to the needs of the project, I use the ref method of vue, which is actually similar to id. If ref is dialogItem, the general way to obtain input is usually this.$refs.dialogItem.$refs.input.focus (), radio-button. If datePicker,type is date, you can use keyboard arrow keys to select a date. If type is daterange, you cannot use keyboard operation. In this case, you can directly focus on the plug-in. But this will open the date selector, the area is too large, will obscure other content, so you can write the title of dialog with span, write an input in span, set his opacity to 0, and set the focus on this input in the first way, but there is a problem that users need to press the tab key twice after opening the pop-up window to set the focus to the first plug-in on the page. If you have other types of elements, you can first console this.$refs.dialogItem, to see what's in $refs and whether there is a focus method. The above methods are written in this.$nextTick (), there is a delay in loading dialog, and elements cannot be selected without asynchronous operations.


 mounted(){
     let inputelement=document.getElementById('user')
     inputelement.focus()
   }

add an id, to your focus el-input and assume that id is user, and then write the above code in mounted to automatically get focus. It has been tested to be feasible


reason: < el-input > element is wrapped by DIV
solution: query < input > child elements to refocus

<el-input v-focus></el-input>
directives: {
  focus: {
    inserted: function (el) {
      el.querySelector('input').focus()
    }
  }
},
Menu