精华内容
下载资源
问答
  • el-input 输入框回车刷新页面问题
    2021-10-09 11:54:34

    偶然间发现的 弹窗里的el-input 输入后 回车 会导致整个页面刷新
    由于项目是刷新就回首页 所以看起来奇奇怪怪的

    研究研究:
    发现如果 el-form表单里只有一个el-input的时候 点回车 就会触发刷新页面

    解决方法:
    在<el-form 上加 @submit.native.prevent>

    更多相关内容
  • vue element-ui el-input 动态获取 焦点 使用 ref <el-input ref="ref"/> //进行 获取 焦点 ... //进行 加载好后 获取焦点 this.$nextTick(() => { this.$refs.inputNumberRef.focus() }) ...

    vue element-ui el-input 动态获取 焦点

    使用 ref

     <el-input ref="ref"/>
     //进行 获取 焦点 
     this.$refs.ref.focus()
    

    如果是动态的 显示 例如:v-if 或 v-show 结合用 需要加载完成后在获取

     //进行 加载好后 获取焦点
          this.$nextTick(() => {
            this.$refs.inputNumberRef.focus()
          })
    
    展开全文
  • element input输入框自动获取焦点

    万次阅读 2019-10-25 14:25:40
    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态。 但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了 document....

    博客地址:http://www.globm.top/blog/1/detail/43
    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态。

    但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了

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

    或者利用vue的ref属性也可以实现聚焦效果:

    原理其实很简单,Element 已经提供了 focus 方法,但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性,然后在需要的地方直接调用方法就可以了

    <el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>
    
    this.$nextTick(() => {
          this.$refs.input.focus()
        })
    

    注意:一个页面只能有一个聚焦效果


    last , vue也支持自定义指令
    当页面加载时,该元素将获得焦点 (注意:autofocus 在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能:

    // 注册一个全局自定义指令 `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

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue</title> <script src="js/vue.js"></script> <style>...页面载入.

     添加一个自定义指令,有两种方式:

    •  通过 Vue.directive() 函数注册一个全局的指令。
    •  通过组件的 directives 属性,对该组件添加一个局部的指令。

    钩子函数:inserted 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>vue</title>
    	<script src="js/vue.js"></script>
    	<style>
    	</style>
    </head>
    <body>
    	<div id = "app">
    		<p>页面载入时,input 元素自动获取焦点:</p>
    		<input  v-focus/>
    		<input/>
    		<input/>
    		<input/>
    	</div>
    <script>
        // 注册一个全局自定义指令 v-focus
    	Vue.directive('focus',{
         // 当绑定元素插入到 DOM 中
    		inserted:function(el){
              // 聚焦元素
    			el.focus()
    		}
    	})
    	
    	var app = new Vue({
    		el:"#app",
    		data:{
    		
    		}
    	})
    </script>
    
    </body>
    </html>
    

    展开全文
  • //directives与data同级directives: { focus: { inserted: function (el, {value}) { console.log(el,{value}) if (value) { el.focus(); ...
  • 最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框...原理其实很简单,Element 已经提供了 focus 方法,但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性,然后在需要的地方直接调用方
  • el-cascader:懒加载子级数据、可搜索

    千次阅读 2020-11-04 15:24:20
    一个级联控件的功能,既要能够支持懒加载子级数据(因为数据量大),又要能够支持搜索功能(省得用户往下滚动下拉框) <el-cascader ref="regionDom" key="bbigdd" filterable :before-filter="filterRegion...
  • 但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。 解决方案: 借助动态绑定ref属性,在this.$nextTick调用focus()方法。 在线运行 <div id="app"> <...
  • 在element中用回答因为是动态加载,编辑回显也是需要提前把...然后vue文件中data里面新增两个字段来保存,一个是保存value的数组,一个是将label拼接“/”后作为字符串保存起来,当该字符串有值就把el-cascader的...
  • vue中页面上的input自动获取焦点

    千次阅读 2020-03-18 20:02:13
    这个问题看了网上的一些资料有一定的帮助,但我还是...el-input v-model="ghStats.authCode" ref="gain" @keyup.enter="onSubmit" autofocus="autofocus" > </el-input> this.$nextTick(() => { ...
  • ie9不支持flex布局ie9里,css行数过多会不加载,需要用CSSSplitWebpackPlugin 分割new CSSSplitWebpackPlugin({ size: 4000, filename:utils.assetsPath('css/[name]-[part].[ext]'),}),9以下不支持websocket9 ...
  • 在vue的element中怎么获取到循环里面的每一个input焦点呢?求大佬指教
  • 包括对el-table的动态渲染、单元格编辑;对于无缝滚动的实现,优化大数据量下的页面卡顿问题。 1. el-table实现动态渲染列 常规使用el-table <template> <el-table ref="multipleTable" :data="data" &...
  • 但是有上千条用户数据,一次性查询加载会导致页面有很长时间(大概4~5s)的空白期,用户体验很不友好。 故需要进行优化,针对这个问题,网上解决方案也挺多的,此处参考 ...
  • 获取焦点 # 重新获取焦掉后,会将指定标签中的css样式删除,这里为标记错误的css样式(将文本框标红) $("form input").focus(function () { $(this).next().text("").parent().parent().removeClass("has-...
  • 因为在项目中是一个input输入点击出弹窗输入修改系数(产品就是要的这样的,…)所以就会很明显的看到点点击table input获取焦点时,弹窗弹出,焦点还在table input上,所以就要做成弹窗的input自动获取焦点,本来...
  • 首先我们要搞清楚通过clearable清空内容后重新输入未触发搜索的原因:清空后输入框未失去焦点。 接下来我们来解决这个问题: <el-autocomplete :fetch-suggestions = "queryList" clearable @clear="setBlur()...
  • 在测试中这个input框可以显示,调用该组件手动点击获取焦点即可,但是上线后这个输入框要定位到屏幕外的就算是可以显示在屏幕中肯定不能要求用户去点击,故而若能找到一个方法可以在调用就使其获取到焦点,不...
  • vue进入页面自动获取input焦点

    千次阅读 2018-11-20 10:37:53
    input v-focus type="text"&gt;  全局注册 我放在utils.js里面 import Vue from 'vue' // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中…… ...
  • 在使用elementUI,点击table组件中的某个单元格,会弹出一个popover,并且popover中包含input输入框,如果只是给input添加autofocus属性是没有效果的。当然这里也是分两种情况。 第一:点击table组件中的一个...
  • 项目需求:由于表单中的一个el-select中的数据过多,下拉框用户体验不好,因此需要做成有懒加载且分页的下拉框。后又因为该功能需要多选,并且打开表单要能够正确回显。这些需求加起来,导致问题变得复杂起来。我在...
  • 使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似) //html部分 编号:&lt;input type="text" v-model='newId' id='inputId'&gt; //vue对象 var vm = new ...
  • 最近有一个项目表单中有密码框,但是在浏览器上获取input焦点后就会出现之前记住的账号密码信息,产品 要求不需要显示这个下拉框。...当输入框有值时input设置为password类型,没有值或者清空值重新渲染input框为tex
  • 记录项目中使用 el-autocomplete 遇到的问题
  • vue进入页面自动获取焦点

    千次阅读 2020-05-20 17:07:40
    效果如图: 代码如下: directives与data处于同级位置 directives: { focus: { inserted: function (el, {value}) { console.log(el, {value}) if (value) { el.focus() } } } }, ...
  • 1、问题 在vue项目中,使用element-ui...可在全局定义自动获得焦点的自定义指令,之后在所有单文件组件中都可使用v-focus使用该全局自定义指令,代码如下: a、在main.js中定义全局指令: Vue.directive('focus',{ in
  • el-table/element-ui 表格实现行编辑

    千次阅读 2021-12-15 18:15:48
    珊妹儿最近一直项目需求要用el-table实现行编辑,这个功能嘛,是我领导写的,我呢,拿出来给大家借鉴一下,... showEdit: false, //是否可编辑,默认加载完数据不是可编辑状态,获取焦点后才可编辑 disabled: true, /

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,880
精华内容 1,152
关键字:

el-input 加载时自动获取焦点