Vant Search 搜索
Vant Search 组建主要提供各种风格的框实现。
import Vue from 'vue'; import { Search } from 'vant'; Vue.use(Search);
v-model 用于控制框中的,background 可以框外部背景色
<van-search v-model="value" placeholder="请输入关键词" />
Search 组件提供了search和cancel事件,search事件在点击上的/回车按钮后触发,cancel事件在点击框右侧取消按钮时触发
<form action="/"> <van-search v-model="value" show-action placeholder="请输入关键词" @search="onSearch" @cancel="onCancel" /> </form>
import { Toast } from 'vant'; export default { data() { return { value: '' }; }, methods: { onSearch(val) { Toast(val); }, onCancel() { Toast('取消'); } } }
通过 input-align 设置框的对齐方式,可选值为center、right
<van-search v-model="value" placeholder="请输入关键词" input-align="center" />
通过disabled禁用框
<van-search v-model="value" disabled placeholder="请输入关键词" />
通过background可以设置框外部的背景色,通过shape设置框的形状,可选值为round
<van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入关键词" />
使用action插槽可以右侧按钮的。使用插槽后,cancel事件将不再触发
<van-search v-model="value" show-action placeholder="请输入关键词" @search="onSearch" > <div slot="action" @click="onSearch"></div> </van-search>