1. 首先给该组件注册一个失去焦点的事件
<a-input-search
placeholder="请输入搜索产品名称"
class="header_input"
@search="onSearch"
@focus="focusSearch"
@input="searchValue"
v-model="searchText"
ref="a_input_search"
/>
通过ref来获取dom节点
2. 获取焦点的事件
focusSearch() {
//搜索框获取焦点事件
// 获取dom元素,更改他的样式
console.log(this.$refs.a_input_search.$el);
this.$refs.a_input_search.$el.style = "margin-left:300px;width:250px;";
},
因为a-input-search是一个组件,这个组件中控制样式的并不是ref获取的这个dom,而是它下面的$el, 所以给$el设置样式
效果如下: