Search-搜索框

目录

1.引入

2.基本使用

3.具体使用

补充:

---

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;
}