实现vue el-input框加载自动选中,二次自动选中

超、凢脫俗 2024-04-17 22:49 87阅读 0赞
  1. <el-input ref="agin" v-select="true" v-model="insertInfoBcbd"></el-input>

1、加载完成后默认为选中状态(选中和聚焦效果不能并存,insertInfoBcbd一定要赋予初始值,否则不能实现默认选中,只能默认聚焦)

directives自定义指令,定义在data同级
生命周期:

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
  • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
  • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind:只调用一次,指令与元素解绑时调用。

生命周期函数中的参数:

  • el: 指令所绑定的元素,可以用来直接操作 DOM,就是放置指令的那个元素。
  • binding: 一个对象,里面包含了几个属性,详情请见官方文档。
  • vnode:Vue 编译生成的虚拟节点。
  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用

    directives: {
    select:{ //默认选中

    1. inserted:function (el,binding) {
    2. el.querySelector('input').select();
    3. //因为el-input在input标签外面还包了其他标签,所以要通过querySelector选中input框
    4. }

    },
    focus:{ //默认聚焦

    1. inserted:function (el,binding) {
    2. el.querySelector('input').focus();
    3. }

    }
    }

2、二次自动选中(在需要二次自动选中的地方写如下代码即可)

  1. this.$nextTick( () =>{
  2. this.$refs.agin.select()//自动选中
  3. this.$refs.agin.focus()//自动聚焦
  4. } )

发表评论

表情:
评论列表 (有 0 条评论,87人围观)

还没有评论,来说两句吧...

相关阅读

    相关 自动

    类自动加载 > 在编写面向对象程序时,每个类新建一个PHP文件,这会带来一个烦恼:每个脚本的开头,都需要`require`一个长长的列表。这就需要一种自动加载机制。 >

    相关 Vue自动路由

    每次创建页面之后,都需要手动引入模块,创建路由,很麻烦。 这里使用webpack中的require.context来实现创建页面之后,自动加载路由。 同时,因为编写加载