在 Vant4 中,van-search 是用于搜索的组件。以下是一个简单的例子,演示如何在 Vant4 中使用搜索组件:

首先,确保你已经安装了 Vant4:
npm install vant@next

然后,在你的 Vue 组件中引入 van-search:
<template>
  <div>
    <van-search
      v-model="keyword"
      placeholder="请输入关键字"
      @search="onSearch"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import { Search } from 'vant';
import 'vant/lib/index.css'; // 引入样式

export default {
  components: {
    [Search.name]: Search,
  },
  setup() {
    const keyword = ref('');

    const onSearch = () => {
      // 在这里处理搜索事件
      console.log('搜索关键字', keyword.value);
    };

    return {
      keyword,
      onSearch,
    };
  },
};
</script>

在上面的例子中,我们使用了 van-search 组件,并通过 v-model 指令将搜索框中的关键字与一个 Vue 变量 keyword 进行双向绑定。

我们设置了 placeholder 属性来显示搜索框的占位符。监听了 @search 事件,当用户点击搜索按钮或按下回车键时触发,可以在这里处理搜索的逻辑。

你可以根据需要自定义 van-search 组件的样式和其他属性。


转载请注明出处:http://www.zyzy.cn/article/detail/5812/Vant