vue点击搜索改变搜索框长度

1、首先打开vue，创建logo和搜索框部分的组件。

2、其次新建一个空的Vue对象，使用“bus”触发事件并传递参数。

3、最后使用vue控制input输入长度和获取输入内容的长度，就可以点击搜索改变搜索框长度了。

首先

vue的点击事件

是用

@click

=

“clickfun()”

属性

在html中绑定的,

在点击的函数中

添加$event

参数就可以

比如

<button

@click

=

“clickfun($event)”>点击</button>

methods:

{

clickfun(e)

{

//

etarget

是你当前点击的元素

//

ecurrentTarget

是你绑定事件的元素

}

},

以上这篇vue

的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue如何获取点击事件源的方法VUE中v-on:click事件中获取当前dom元素的代码vue获取当前点击的元素并传值的实例vue获取dom元素注意事项在Vue组件中获取全局的点击事件方法

提高用户体验感,输入框自动聚焦并键盘控制下拉菜单的选项上下移

效果如图:

初期使用的el-dropdown下拉菜单,组件默认可键盘上下移

但是键盘按上下移不生效

可能因为我的el-dropdown-item是由数组遍历出来的,文档的菜单是写死的

换成el-popover组件,内部用ul和li实现遍历菜单

后续需要在input框自动聚焦后再触发键盘上下移事件

实现自动聚焦,首先想到的方法是 给el-input 添加ref，获取后调用focus()

但是不生效,

后续查看element官方文档可用popover的show event手动给el-input获取焦点

还是不生效,

对焦需要下拉打开后执行,也就是dom更新后所以添加 this$nextTick生效

完成搜索输入框的自动对焦后添加键盘事件,

添加的键盘事件让用户看到选择的选项样式变化以外,滚轮是不会变动的,

继续提升用户体验感,需要让滚轮随着用户的 *** 作而滑动

1通过拖拽实现：可以使用vue-draggable组件实现，可以实现拖拽排序；

2通过点击按钮实现：可以在每个输入框后面添加上移和下移的按钮，点击按钮实现调整顺序；

3通过键盘快捷键实现：可以在输入框获取焦点的时候，添加上键盘快捷键，比如Ctrl+上下箭头，实现调整顺序。

实际项目中我们获取选择的数据的id；这时候

需要配合使用v-bind，才能获取到选择的那条数据的id值，其实就是id赋值给value属性

<template>

<div>

<select

v-model="select"

>

<option

v-for="(a,index)

in

arr"

:key="index"

:value="aid">{{

aname

}}</option>

</select>

<p>您选择的名字的Id是：{{select}}</p>

</div>

</template>

js代码

<script>

export

default

{

data(){

return{

select:'',

arr:[

{id:'1',name:'html'},

{id:'2',name:'css'},

{id:'3',name:'js'},

]

}

}

}

</script>

拓展知识：vue获取id以及重定向路由方法

1获取ID的方法：

let

orderId=this$routequeryid;

2路由重定向方法

this$routerpush(this$routequeryredirect

||

'/login')

以上这篇vue *** 作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:Vuejs获取被选择的option的value和text值方法vue如何通过id从列表页跳转到对应的详情页vue实现在表格里,取每行的id的方法

以上就是关于vue点击搜索改变搜索框长度全部的内容，包括:vue点击搜索改变搜索框长度、vue 的点击事件获取当前点击的元素方法、Vue element下拉菜单实现键盘事件上下移等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！