基于react vant实现弹窗搜索功能_Javascript

搜索 - search 组件

弹出层的顶部用到了search组件

1. action

search组件中需要自定义右侧的按钮，可以使用showaction（默认文字为取消）+ actiontext自定义按钮文字；也可以使用action自定义右边部分操作区域
官网文档使用方法1：

<search
  showaction
  label="地址"
  actiontext={<div onclick={() => toast.info(value)}>搜索</div>}
  value={value}
  onchange={setvalue}
  placeholder="请输入搜索关键词"
/>

2. value

value 用于控制搜索框中的文字

value绑定的变量，通过onchange更新即可

3.点击进行搜索

// 搜索关键词
const onsearchclinic = async () => {
    // 前置校验
    if (!searchname) {
      toast('请输入名称关键字再进行搜索')
      return
    }
    // 开始搜索
    try {
      setsearchloading('loading')
      const {
        data: { rows },
      } = await triggercliniclist()
      const _rows = [...rows].map((item) => ({
        ...item,
        value: item.code,
        text: item.name,
      }))
      setcliniclist(_rows)
      setsearchloading('sucess')
    } catch (error) {
      setsearchloading('sucess')
    }
}

数据列表 - list 组件

list 组件滚动到底部时，会触发 onload 事件，此时可以发起异步操作并更新数据，若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
react-vant - list 内部包含了防止并发的重复请求的逻辑，使用中不需要额外处理

如果有分页，则可以使用onload事件，项目中为全量返回，所以不需要这个。

选择则某个诊所之后进行反显

搜索的字段和外层最终反显的字段分为两个记录，关闭的时候或者每次打开的时候要清除内部的字段（看业务要求）

const [clinicname, setclinicname] = usestate('') // 外层业务字段
  const [searchname, setsearchname] = usestate('') // 弹窗记录搜索的关键字
// 点击cell，进行选择
const setclinichandle = (v: any) => {
    // 更新外层输入框名称
    // 关闭弹窗
    oncloseclinicpop()
}

占位组件 - empty

占位组件的图片有两个状态：1.图片显示 2. loading显示

占位组件的文案有两个状态：1.初始化时的搜索提醒 2. 搜索结果为空时的提醒

  // loading -- 加载中，wait -- 初始化， sucess -- 搜索完成（不论结果如何）
  const [searchloading, setsearchloading] = usestate<'wait' | 'loading' | 'sucess'>('wait')

其他小细节

点击外层按钮，唤起弹窗时自动聚焦到搜索输入框

const searchref = useref<searchinstance | any>(null)
// 显示
const onshowclinicpop = () => {
    // do something 点击前校验，清空搜索关键词 onclearclinic
    setshowclinicpop(true) // 弹窗
    settimeout(() => {
      if (searchref && searchref.current) {
        searchref.current?.focus() // 设置焦点
      }
    }, 0)
 }
// 关闭弹窗
const oncloseclinicpop = () => {
    if (searchref && searchref.current) {
      searchref.current?.blur() // 设置焦点
    }
    setshowclinicpop(false)
}

部分代码如下

<popup
position="bottom"
round={true}
visible={showclinicpop}
onclose={oncloseclinicpop}
style={{ height: '60vh' }}
>
    <div classname="popup-header">
      <vantbutton
        style={{
          border: 'none',
          boxshadow: 'none',
          backgroundcolor: 'transparent',
          color: 'inherit',
        }}
        icon={<cross />}
        onclick={oncloseclinicpop}
      />
    </div>
    <search
      action={
        <div
          classname="search-text"
          onclick={onsearchclinic}
        >
          搜索
        </div>
      }
      value={searchname}
      onchange={(v) => {
        setsearchname(v)
      }}
      placeholder="输入名称关键字"
      onsearch={onsearchclinic}
      onclear={onclearclinic}
      ref={searchref}
    />
    <div style={{ height: 'calc(60vh - 98px)', overflowy: 'auto' }}>
      {cliniclist?.length > 0 ? (
        <list
          onload={() => new promise(() => {})}
          finished={true}
        >
          {cliniclist.map((item, index) => (
            <cell
              key={index}
              value={item.text}
              islink
              arrowdirection="right"
              valueclass="text-[#323232]"
              onclick={() => {
                setclinichandle(item.code)
              }}
            />
          ))}
        </list>
      ) : (
        <empty
          image={
            searchloading === 'loading' ? (
              <div classname="empty-loading">
                <loading type="ball" />
              </div>
            ) : (
              'search'
            )
          }
          description={
            searchloading === 'sucess'
              ? '搜索列表为空'
              : searchloading === 'wait'
                ? '点击搜索查找您的诊所'
                : ''
          }
        />
      )}
    </div>
</popup>

到此这篇关于基于react vant实现弹窗搜索功能的文章就介绍到这了,更多相关react vant弹窗搜索内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！