搜索栏 Vue 组件

搜索栏组件
搜索栏属性
搜索栏事件
示例

搜索栏允许用户在列表视图元素中进行搜索。或者它可以用作您自定义搜索实现的视觉 UI 组件。

搜索栏组件

以下组件包含在内

搜索栏

搜索栏属性

名称	类型	默认值	描述
clearButton	布尔值	true	添加输入清除按钮
颜色	对象		包含 Tailwind CSS 颜色类别的对象
colors.inputBgIos	字符串	''
colors.inputBgMaterial	字符串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.placeholderIos	字符串	''
colors.placeholderMaterial	字符串	'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant'
组件	字符串	'div'	组件的 HTML 元素
disableButton	布尔值	false	添加用于取消搜索的按钮并设置其初始状态
disableButtonText	字符串	'取消'	禁用按钮文本
inputId	字符串		输入 id 属性
inputStyle	CSSProperties		其他输入类
占位符	字符串 \| 数字	'搜索'	搜索栏占位符
值	任何		搜索栏值

搜索栏事件

名称	类型	描述
模糊	函数(e)	`模糊` 事件处理程序
更改	函数(e)	`更改` 事件处理程序
清除	函数(e)	在单击清除按钮时触发
禁用	函数(e)	在禁用搜索栏时触发
焦点	函数(e)	`焦点` 事件处理程序
输入	函数(e)	`输入` 事件处理程序

示例

Searchbar.vue

<template>
  <k-page>
    <k-navbar title="Searchbar">
      
      <template #subnavbar>
        <k-searchbar
          :value="searchQuery"
          disable-button
          disable-button-text="Cancel"
          @clear="handleClear"
          @disable="handleDisable"
          @input="handleSearch"
        >
        </k-searchbar>
      </template>
    </k-navbar>
    <k-list strong inset-material outline-ios>
      <k-list-item v-if="filteredItems.length === 0" title="Nothing found" />
      <k-list-item
        v-for="item in filteredItems"
        :key="item.title"
        :title="item.title"
      />
    </k-list>
  </k-page>
</template>
<script>
  import { ref, watch } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kSearchbar,
    kList,
    kListItem,
  } from 'konsta/vue';

  const items = [
    { title: 'FC Ajax' },
    { title: 'FC Arsenal' },
    { title: 'FC Athletic' },
    { title: 'FC Barcelona' },
    { title: 'FC Bayern München' },
    { title: 'FC Bordeaux' },
    { title: 'FC Borussia Dortmund' },
    { title: 'FC Chelsea' },
    { title: 'FC Galatasaray' },
    { title: 'FC Juventus' },
    { title: 'FC Liverpool' },
    { title: 'FC Manchester City' },
    { title: 'FC Manchester United' },
    { title: 'FC Paris Saint-Germain' },
    { title: 'FC Real Madrid' },
    { title: 'FC Tottenham Hotspur' },
    { title: 'FC Valencia' },
    { title: 'FC West Ham United' },
  ];

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kSearchbar,
      kList,
      kListItem,
    },
    setup() {
      const searchQuery = ref('');

      const handleSearch = (e) => {
        searchQuery.value = e.target.value;
      };

      const handleClear = () => {
        searchQuery.value = '';
      };

      const handleDisable = () => {
        console.log('Disable');
      };

      const filteredItems = ref(items);

      watch(searchQuery, () => {
        filteredItems.value = searchQuery.value
          ? items.filter((item) =>
              item.title.toLowerCase().includes(searchQuery.value.toLowerCase())
            )
          : items;
      });
      return {
        searchQuery,
        filteredItems,
        handleSearch,
        handleClear,
        handleDisable,
      };
    },
  };
</script>