element 官网动态编辑标签，获取焦点报错问题

最新推荐文章于 2024-03-07 10:00:49 发布

转载最新推荐文章于 2024-03-07 10:00:49 发布 · 217 阅读

文章标签：

#vue.js #javascript #elementui

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

element

5 篇文章

订阅专栏

这段代码展示了在Vue.js中如何创建一个局部自定义指令v-focus，该指令使得el-input组件在渲染后自动获取焦点。当点击NewTag按钮时，输入框变为可见并可以输入，用户按下回车键或失去焦点时会触发处理函数。

<template>
<el-input
  v-focus
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
</template>

<script>
export default{
	directives: {
	  //注册一个局部的自定义指令 v-focus
	  focus: {
	    // 指令的定义
	    inserted: function (el) {
	      // 聚焦元素
	      el.querySelector('input').focus()
	    }
	  }
	}
	method:{
		showInput() {
		   this.inputVisible = true;
	   },
	}
}
</script>

这个是转载的用来记录