搜索栏 Vue 组件

搜索栏 Vue 组件代表 Framework7 的搜索栏组件。

搜索栏组件

包含以下组件：

搜索栏属性

您可以在单个属性中传递所有参数params或使用单独的 props 为每个参数指定它们通过组件属性：

属性类型默认描述
<f7-searchbar> 属性
init布尔值true初始化搜索栏
值字符串
数字		允许指定搜索栏输入的值。当启用时很有用custom-search启用
form布尔值true主搜索栏元素将用作form标签而不是div
占位符字符串"搜索"输入占位符文本
disable-button布尔值true启用禁用按钮
disable-button-text字符串取消禁用按钮文本
clear-button布尔值true启用搜索栏输入清除按钮
expandable布尔值false启用可扩展搜索栏
inline布尔值false启用内联搜索栏
spellcheck布尔值在输入元素上设置spellcheck属性
search-container字符串
对象		列表块搜索的 CSS 选择器或 HTML 元素
search-in字符串.item-title列表视图元素字段中需要搜索的 CSS 选择器。通常我们通过元素标题（'.item-title'）进行搜索。它还可以传递几个元素进行搜索，例如'.item-title, .item-text'
search-item字符串li单个搜索项的 CSS 选择器。如果我们对列表视图进行搜索，那么它必须是单个列表元素li
search-group字符串.list-group组元素的 CSS 选择器。当hide-groups启用时用于隐藏组。如果我们对列表视图进行搜索，那么它通常是列表组。
search-group-title字符串.list-group-title组标题的 CSS 选择器。当hide-group-titles启用时用于隐藏组标题。如果我们对列表视图进行搜索，那么它通常是列表组标题。
found-el字符串
对象		.searchbar-found搜索栏“找到”元素的 CSS 选择器或 HTMLElement。如果未指定，搜索栏将查找页面上的.searchbar-found元素
not-found-el字符串
对象		.searchbar-not-found搜索栏“未找到”元素的 CSS 选择器或 HTMLElement。如果未指定，搜索栏将查找页面上的.searchbar-not-found元素
背景遮罩布尔值启用搜索栏背景元素。默认情况下，对于内联搜索栏禁用
backdrop-el字符串
对象		搜索栏背景元素的 CSS 选择器或 HTMLElement。如果未传递并且backdrop参数为 true，则它将查找.searchbar-backdrop元素。如果没有找到，它将自动创建一个
ignore字符串.searchbar-ignore搜索栏忽略的项目的 CSS 选择器，并始终在搜索结果中显示
custom-search布尔值false当启用时，搜索栏将不会搜索任何由search-container指定的列表块，您将能够使用自定义搜索功能，例如，调用外部 API 并显示搜索结果，以及手动显示它们
remove-diacritics布尔值false启用在搜索过程中删除/替换变音符号（á、í、ó 等）
hide-group-titles布尔值true如果启用，则搜索将考虑组标题，并在它们后面没有找到项目时隐藏它们
hide-groups布尔值true如果启用，则搜索将考虑列表视图组，并在这些组内没有找到项目时隐藏它们
outline布尔值true为 iOS 主题添加搜索栏底部细边框（细线）

搜索栏方法

<f7-searchbar> 方法
.search(query)强制搜索栏搜索传递的查询
.enable()启用/激活搜索栏
.disable()禁用/停用搜索栏
.toggle()切换搜索栏
.clear()清除搜索查询并更新结果

搜索栏事件

事件参数描述
<f7-searchbar> 事件
searchbar:search(searchbar, query, previousQuery)在搜索期间（搜索字段更改）将触发事件。作为参数事件接收搜索栏实例、搜索查询和以前的查询
searchbar:clear(searchbar, previousQuery)当用户点击搜索栏输入“清除”按钮时将触发事件。作为参数事件接收搜索栏实例和以前的查询
searchbar:enable(searchbar)当搜索栏变为活动状态时将触发事件
searchbar:disable(searchbar)当搜索栏变为非活动/禁用状态时将触发事件
change(event)当搜索栏输入元素上发生“change”事件时将触发事件
input(event)当搜索栏输入元素上发生“input”事件时将触发事件
focus(event)当搜索栏输入元素上发生“focus”事件时将触发事件
blur(event)当搜索栏输入元素上发生“blur”事件时将触发事件
click:clear(event)当用户点击输入“清除”按钮时将触发事件
click:disable(event)当用户点击搜索栏禁用按钮时将触发事件

搜索栏插槽

搜索栏 Vue 组件为自定义元素提供了额外的插槽：

无插槽：

<f7-searchbar
  disable-button-text="Cancel"
  placeholder="Search in items"
  :clear-button="true"
></f7-searchbar>

<!-- Renders to: -->

<form class="searchbar">
  <div class="searchbar-inner">
    <div class="searchbar-input-wrap">
      <input type="search" placeholder="Search">
      <i class="searchbar-icon"></i>
      <span class="input-clear-button"></span>
    </div>
    <span class="searchbar-disable-button">Cancel</span>
  </div>
</form>

带插槽：

<f7-searchbar
  disable-button-text="Cancel"
  placeholder="Search in items"
  :clear-button="true"
>
  <div slot="inner-start">Inner Start</div>
  <div slot="inner-end">Inner End</div>
  <div slot="input-wrap-start">Input Wrap Start</div>
  <div slot="input-wrap-end">Input Wrap End</div>
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
</f7-searchbar>

<!-- Renders to: -->

<form class="searchbar">
  <div slot="before-inner">Before Inner</div>
  <div class="searchbar-inner">
    <div slot="inner-start">Inner Start</div>
    <div class="searchbar-input-wrap">
      <div slot="input-wrap-start">Input Wrap Start</div>
      <input type="search" placeholder="Search">
      <i class="searchbar-icon"></i>
      <span class="input-clear-button"></span>
      <div slot="input-wrap-end">Input Wrap End</div>
    </div>
    <span class="searchbar-disable-button">Cancel</span>
    <div slot="inner-end">Inner End</div>
  </div>
  <div slot="after-inner">After Inner</div>
</form>

搜索栏 v-model

f7-searchbar组件支持v-modelonvalueprop:

<template>
  ...
  <f7-searchbar
    search-container=".search-list"
    v-model:value="searchQuery"
  />
  ...
</template>
<script>
  export default {
    data() {
      searchQuery: '',
    },
    ...
  };
</script>

示例

访问其初始化的实例

searchbar.vue
<template>
  <f7-page>
    <f7-navbar title="Searchbar">
      <f7-subnavbar :inner="false">
        <f7-searchbar search-container=".search-list" search-in=".item-title"></f7-searchbar>
      </f7-subnavbar>
    </f7-navbar>
    <f7-list strong-ios outline-ios dividers-ios class="searchbar-not-found">
      <f7-list-item title="Nothing found" />
    </f7-list>
    <f7-list strong-ios outline-ios dividers-ios class="search-list searchbar-found">
      <f7-list-item title="Acura" />
      <f7-list-item title="Audi" />
      <f7-list-item title="BMW" />
      <f7-list-item title="Cadillac" />
      <f7-list-item title="Chevrolet" />
      <f7-list-item title="Chrysler" />
      <f7-list-item title="Dodge" />
      <f7-list-item title="Ferrari" />
      <f7-list-item title="Ford" />
      <f7-list-item title="GMC" />
      <f7-list-item title="Honda" />
      <f7-list-item title="Hummer" />
      <f7-list-item title="Hyundai" />
      <f7-list-item title="Infiniti" />
      <f7-list-item title="Isuzu" />
      <f7-list-item title="Jaguar" />
      <f7-list-item title="Jeep" />
      <f7-list-item title="Kia" />
      <f7-list-item title="Lamborghini" />
      <f7-list-item title="Land Rover" />
      <f7-list-item title="Lexus" />
      <f7-list-item title="Lincoln" />
      <f7-list-item title="Lotus" />
      <f7-list-item title="Mazda" />
      <f7-list-item title="Mercedes-Benz" />
      <f7-list-item title="Mercury" />
      <f7-list-item title="Mitsubishi" />
      <f7-list-item title="Nissan" />
      <f7-list-item title="Oldsmobile" />
      <f7-list-item title="Peugeot" />
      <f7-list-item title="Pontiac" />
      <f7-list-item title="Porsche" />
      <f7-list-item title="Regal" />
      <f7-list-item title="Saab" />
      <f7-list-item title="Saturn" />
      <f7-list-item title="Subaru" />
      <f7-list-item title="Suzuki" />
      <f7-list-item title="Toyota" />
      <f7-list-item title="Volkswagen" />
      <f7-list-item title="Volvo" />
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Searchbar,
  f7Subnavbar,
  f7List,
  f7ListItem,
  theme,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Searchbar,
    f7Subnavbar,
    f7List,
    f7ListItem,
  },
  data() {
    return {
      theme,
    };
  },
};
</script>

可扩展搜索栏

searchbar-expandable.vue
<template>
  <f7-page>
    <f7-navbar title="Searchbar">
      <f7-nav-right>
        <f7-link
          class="searchbar-enable"
          data-searchbar=".searchbar-demo"
          icon-ios="f7:search"
          icon-md="material:search"
        />
      </f7-nav-right>
      <f7-searchbar
        class="searchbar-demo"
        expandable
        search-container=".search-list"
        search-in=".item-title"
      />
    </f7-navbar>
    <f7-list strong-ios outline-ios dividers-ios class="searchbar-not-found">
      <f7-list-item title="Nothing found" />
    </f7-list>
    <f7-list strong-ios outline-ios dividers-ios class="search-list searchbar-found">
      <f7-list-item title="Acura" />
      <f7-list-item title="Audi" />
      <f7-list-item title="BMW" />
      <f7-list-item title="Cadillac " />
      <f7-list-item title="Chevrolet " />
      <f7-list-item title="Chrysler " />
      <f7-list-item title="Dodge " />
      <f7-list-item title="Ferrari " />
      <f7-list-item title="Ford " />
      <f7-list-item title="GMC " />
      <f7-list-item title="Honda" />
      <f7-list-item title="Hummer" />
      <f7-list-item title="Hyundai" />
      <f7-list-item title="Infiniti " />
      <f7-list-item title="Isuzu " />
      <f7-list-item title="Jaguar " />
      <f7-list-item title="Jeep " />
      <f7-list-item title="Kia" />
      <f7-list-item title="Lamborghini " />
      <f7-list-item title="Land Rover" />
      <f7-list-item title="Lexus " />
      <f7-list-item title="Lincoln " />
      <f7-list-item title="Lotus " />
      <f7-list-item title="Mazda" />
      <f7-list-item title="Mercedes-Benz" />
      <f7-list-item title="Mercury " />
      <f7-list-item title="Mitsubishi" />
      <f7-list-item title="Nissan " />
      <f7-list-item title="Oldsmobile " />
      <f7-list-item title="Peugeot " />
      <f7-list-item title="Pontiac " />
      <f7-list-item title="Porsche" />
      <f7-list-item title="Regal" />
      <f7-list-item title="Saab " />
      <f7-list-item title="Saturn " />
      <f7-list-item title="Subaru " />
      <f7-list-item title="Suzuki " />
      <f7-list-item title="Toyota" />
      <f7-list-item title="Volkswagen" />
      <f7-list-item title="Volvo" />
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Searchbar,
  f7List,
  f7ListItem,
  f7Link,
  f7NavRight,
  theme,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Searchbar,
    f7List,
    f7ListItem,
    f7Link,
    f7NavRight,
  },
  data() {
    return {
      theme,
    };
  },
};
</script>
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗