input 聚焦 失焦
时间: 2024-01-18 21:03:37 浏览: 25
在Vue中,可以使用`$refs`来获取DOM元素并对其进行操作,包括聚焦和失焦。以下是两种方法:
1.使用`focus()`和`blur()`方法来聚焦和失焦:
```vue
<template>
<div>
<input ref="input" type="text">
<button @click="focusInput">聚焦</button>
<button @click="blurInput">失焦</button>
</div>
</template>
<script>
export default {
methods: {
focusInput() {
this.$refs.input.focus(); // 聚焦
},
blurInput() {
this.$refs.input.blur(); // 失焦
}
}
}
</script>
```
2.使用`focus()`方法并传递一个选项对象来指定聚焦的位置:
```vue
<template>
<div>
<input ref="input" type="text">
<button @click="focusInput">聚焦</button>
</div>
</template>
<script>
export default {
methods: {
focusInput() {
this.$refs.input.focus({ cursor: 'start' }); // 聚焦在文本的开始位置
}
}
}
</script>
```