搜索工具栏 SearchBar

普通使用

label

label

label

label

<script lang="ts" setup>
import { Card, Input } from '@arco-design/web-vue'
import { SearchBar, SearchBarItem } from '@vrx-arco/pro-components'
import { ref } from 'vue'

const model = ref({ label1: undefined, label2: '', label3: '', label4: '' })
function handleSearch() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), 2000)
  })
}
</script>

<template>
  <Card>
    <SearchBar :column="2" :model="model" @search="handleSearch">
      <SearchBarItem label="label">
        <Input v-model="model.label1" placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label">
        <Input v-model="model.label2" placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label">
        <Input v-model="model.label3" placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label">
        <Input v-model="model.label4" placeholder="placeholder" />
      </SearchBarItem>
    </SearchBar>
  </Card>
</template>

搜索时验证表单

label

label

label

label

<script lang="ts" setup>
import { Card, Input } from '@arco-design/web-vue'
import { SearchBar, SearchBarItem } from '@vrx-arco/pro-components'
import { ref } from 'vue'

const model = ref({ label1: undefined, label2: '', label3: '', label4: '' })
function handleSearch() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), 2000)
  })
}
</script>

<template>
  <Card>
    <SearchBar :column="2" :model="model" valid-on-button-click @search="handleSearch">
      <SearchBarItem label="label" field="label1" required>
        <Input v-model="model.label1" placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label">
        <Input v-model="model.label2" placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label">
        <Input v-model="model.label3" placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label">
        <Input v-model="model.label4" placeholder="placeholder" />
      </SearchBarItem>
    </SearchBar>
  </Card>
</template>

自动劫持子元素

劫持<search-bar-item> 第一个元素 自动绑定 v-model

label

label

label

label

<script lang="ts" setup>
import { Card, Input } from '@arco-design/web-vue'
import { SearchBar, SearchBarItem } from '@vrx-arco/pro-components'
import { ref } from 'vue'

const model = ref({ label1: undefined, label2: '', label3: '', label4: '' })
function handleSearch() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), 2000)
  })
}
</script>

<template>
  <Card>
    <SearchBar
      auto-update
      :column="2"
      :model="model"
      reset-on-button-click
      valid-on-button-click
      @search="handleSearch"
    >
      <SearchBarItem label="label" field="label1">
        <Input placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label" field="label2">
        <Input placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label" field="label3">
        <Input placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label" field="label4">
        <Input placeholder="placeholder" />
      </SearchBarItem>
    </SearchBar>
  </Card>
</template>

隐藏重置按钮

label

label

<script lang="ts" setup>
import { Card, Input } from '@arco-design/web-vue'
import { SearchBar, SearchBarItem } from '@vrx-arco/pro-components'
import { ref } from 'vue'

const model = ref({ label1: undefined, label2: '', })
function handleSearch() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), 2000)
  })
}
</script>

<template>
  <Card>
    <SearchBar
      auto-update
      :column="2"
      :model="model"
      hide-reset
      @search="handleSearch"
    >
      <SearchBarItem label="label" field="label1">
        <Input placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label" field="label2">
        <Input placeholder="placeholder" />
      </SearchBarItem>
    </SearchBar>
  </Card>
</template>

隐藏操作栏

label

label

<script lang="ts" setup>
import { Card, Input } from '@arco-design/web-vue'
import { SearchBar, SearchBarItem } from '@vrx-arco/pro-components'
import { ref } from 'vue'

const model = ref({ label1: undefined, label2: '', })
</script>

<template>
  <Card>
    <SearchBar
      auto-update
      :column="2"
      :model="model"
      hide-action
    >
      <SearchBarItem label="label" field="label1">
        <Input placeholder="placeholder" />
      </SearchBarItem>
      <SearchBarItem label="label" field="label2">
        <Input placeholder="placeholder" />
      </SearchBarItem>
    </SearchBar>
  </Card>
</template>

API

<search-bar> Props

暂无数据

<search-bar> Events

暂无数据

<search-bar-item> Props

暂无数据