vue input组件设置失焦与聚焦

我在iview-admin这个后台管理系统中，使用input输入框失焦时触发了一个axios请求，但是，当我从其它页面，携带input输入框的数据进入该页面，进行数据填充的时候发现，数据填充没有问题，但是因为没有触及到失焦事件，所以axios请求没有触发

把失焦事件改为@on-change事件也触发不了，所以我就在接收到其他页面的数据的同时，手动执行了聚焦与失焦事件，代码如下:

这是input输入框的内容：

<Input ref="input" v-model="inputData" @on-blur="inputChange" placeholder="请输入..."/>

设置聚焦与失焦

this.$refs.input.focus();      // 聚焦this.inputData = '111';  // 给输入框赋值this.$refs.input.blur();   // 失焦

当然，在vue给出的官网文档中，也可以指定聚焦的位置，例如：

this.$refs.input.focus({cursor: 'start'    // 聚焦在文本的开始位置
});

所以，请具体需求，具体使用，谢谢！

vue input组件设置失焦与聚焦相关推荐

Ant Design Vue Input 输入框设置只读
<a-input v-model="A" placeholder="请输入"/> 只读 readonly 需要写成 readOnly <a-i ...
微信input组件添加清除图标,点击清空不生效
微信小程序中使用input组件,点击上面的清空图标不生效问题问题原因:在真机调试中,因为微信小程序中input组件的层级在聚焦时会最高,会覆盖清空图标,所以点击不生效,在pc开发者工具中是不存在问题 ...
Unity进阶课程【一】Input Field 组件的失焦和使用
Unity组件讲解 Input Field 咱就是说,Unity组件这么多,有多少是我们敢很自信的讲出它的所有用法和功能的,呦呦~开始思考了,书到用时方恨少,有些时候用到是时候,真是急得上网查了个遍, ...
设置input标签禁用_Vue造轮子 | input组件
服务区的晚霞设计 input组件单独使用时,在样式上并没有多花里胡哨,较为简洁纯粹.相较于element组件库中的input组件,这里的实现上应该也就只有边框颜色没有特意设计(element有主题系 ...
antd 给input设置值_Antd 中 Input 组件默认值的显示
1.input标签中有placeholder可以显示默认值但是有少量样式的问题(字体颜色会淡一点) placeholder属性 2.用Input组件中的defaultValue属性 defaultV ...
vue input失焦事件
@blur.native.capture="defocus(node, data)" //失焦v-focus //聚焦 directives: { //和生命周期同级focus: ...
Vue组件设置缓存kepp-alive 后如何获取数据
Vue组件设置缓存kepp-alive 后如何获取数据解决方案 : beforeRouteEnter activated beforeRouteEnter 每次进去组件渲染时,都会执行beforeR ...
vue antd a-table组件设置表头鼠标移入悬浮显示（自定义的表头）
1.看之前,请先异步另一篇文章 antdv table组件封装成全局组件以及携带自定义表头展示 2.具体需求,鼠标移入显示文本 3.参考大佬的文章:a-table组件设置表头鼠标移入悬浮显示 4.在公 ...
jq input输入框失焦、聚焦
input自动填写完成顺序聚焦 html <input type="text" id='name' name="one" maxlength=" ...

vue input组件设置失焦与聚焦

vue input组件设置失焦与聚焦相关推荐

最新文章

热门文章