目录
1.引入
import { Search } from 'vant';
Vue.use(Search);
2.基本使用
<van-search v-model="value" placeholder="请输入搜索关键词" />
data() {
return {
value: '',
};
},
3.具体使用
- label:设置左侧文本
- left-icon:设置左边图标
- shape:设置形状
- show-action:显示右边取消
- action-text:设置右边文本
- right-icon:设置右边图标
search
:事件在点击键盘上的搜索/回车按钮后触发cancel
: 事件在点击搜索框右侧取消按钮时触发
<van-search
v-model="value"
shape="round"
show-action
action-text='搜索'
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
/>
export default {
data() {
return {
value: '',
};
},
methods: {
onSearch(val) {
console.log(val);//val为输入框文本
},
onCancel() {
console.log('取消');
},
},
};
补充:
修改右边按钮背景颜色
.van-search__action{
background-color: red;
}