赞助商成为赞助商

搜索栏 Vue 组件

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

搜索栏组件

包含以下组件

搜索栏属性

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

属性类型默认说明
<f7-searchbar> 属性
init布尔真初始化搜索栏
value字符串
数字		允许指定搜索栏的输入值。当与启用的custom-search结合使用时很有用
form布尔真主搜索栏元素将作为一个form标签，而不是div标签
placeholder字符串"搜索"输入占位符文本
disable-button布尔真启用禁用按钮
disable-button-text字符串取消禁用按钮文本
clear-button布尔真启用搜索栏输入清除按钮
expandable布尔false启用可扩展搜索栏
inline布尔false启用嵌入式搜索栏
spellcheck布尔在输入元素上设置spellcheck属性
search-container字符串
object		列表块的 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字符串
object		.searchbar-found搜索栏“找到”元素的 CSS 选择器或 HTMLElement。如果没有指定，搜索栏将在页面上查找.searchbar-found元素
not-found-el字符串
object		.searchbar-not-found搜索栏“未找到”元素的 CSS 选择器或 HTMLElement。如果没有指定，搜索栏将在页面上查找.searchbar-not-found元素
backdrop布尔启用搜索栏背景元素。默认情况下禁用内嵌搜索栏
backdrop-el字符串
object		搜索栏背景元素的 CSS 选择器或 HTMLElement。如果未通过且backdrop参数为 true，那么它将查找.searchbar-backdrop元素。如果没有找到，它将自动创建一个元素
ignore字符串.searchbar-ignore要被搜索栏忽略且始终出现在搜索结果中的项目的 CSS 选择器
custom-search布尔false启用后，搜索栏不会通过search-container指定的任何列表块进行搜索，并且你将可以使用自定义搜索功能，例如使用带搜索结果的外部 API 并手动显示它们
remove-diacritics布尔false启用以在搜索期间移除/替换变音符号（á、í、ó 等）
hide-group-titles布尔真如果启用，则搜索将考虑组标题，如果在组标题后面没有找到的项目，则隐藏组标题
hide-groups布尔真如果启用，则搜索会考虑列表视图组，如果这些组内没有找到项，则隐藏它们
提纲布尔真为 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)当用户点击搜索栏禁用按钮时触发事件

搜索栏插槽

Searchbar 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 组件支持 value 属性上的 v-model

<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>
改进此文档
在此页面上