vue search input

vue-搜索输入

一个 Vue.js 3 搜索输入组件，受到 Storybook 和 GitHub 的全局搜索输入的启发。

SearchInput组件显示带有一些内置附加功能的搜索输入。

特征：

• 按键盘上的/键可随时关注搜索输入。
• 包括默认的 CSS 样式，但也可以轻松添加自己的样式。
• 通过slots完全可定制的图标
• 在搜索输入的右侧显示一个x图标，用于在内部键入值时清除文本。
• 当搜索输入具有焦点（可配置）时，按esc键可以清除搜索文本。

重要提示：建议您在每个页面上仅包含一次SearchInput组件。
如果存在多个SearchInput组件，则显示的第一个组件将优先于/按键获得焦点。

带有示例的演示

https://vue-search-input.vercel.app

安装

npm i vue-search-input

用法

 < template >
  < SearchInput v-model =" searchVal " />
</ template >

< script >
import { ref } from 'vue'
import SearchInput from 'vue-search-input'
// Optionally import default styling
import 'vue-search-input/dist/styles.css'

const searchVal = ref ( '' )

export default {
  components : {
    SearchInput
  } ,
  setup ( ) {
    return {
      searchVal
    }
  }
}
</ script > 

造型

vue-search-input包含默认样式 ( dist/styles.css )，您可以将其用作创建自己的 CSS 的基础。所有组件的元素都位于div内，该 div 充当图标和输入的包装器。包装器div的默认类是search-input-wrapper您可以通过向SearchInput组件提供类来覆盖它。

绑定到SearchInput组件的类和样式将添加到包装器div 。

活动

绑定到SearchInput组件的事件将传递到input元素。

姓名	描述	返回值
更新：模型值	更新后的绑定模型	string

道具

姓名	类型	描述	默认
类型	细绳	输入字段的类型。允许的类型是search和text	search
模型值（v-模型）	细绳	输入的值	''
包装类	细绳	包装器 div 的默认 CSS 类	search-input-wrapper
搜索图标	布尔值	显示“搜索”图标	真的
快捷方式图标	布尔值	显示“快捷方式”图标	真的
清除图标	布尔值	显示“明文”图标	真的
隐藏快捷方式图标模糊	布尔值	输入失去焦点时是否隐藏快捷方式图标	真的
清除Esc	布尔值	按下esc键时是否清除输入字段	真的
Esc 上模糊	布尔值	按下esc键时是否将焦点移出输入字段	真的
选择焦点	布尔值	选择/按键时输入的文本	真的
快捷方式侦听器已启用	布尔值	启用/按键功能	真的
快捷键	细绳	快捷功能的key	/

老虎机

vue-search-input包含一些默认图标，但您也可以使用可用的slots自定义它们以满足您的需求。

姓名	描述	默认内容
搜索图标	搜索图标的插槽	<i class="search-icon search"></i>
快捷方式图标	快捷方式图标的插槽	<i class="search-icon shortcut" title='Press "/" to search'></i>
清晰图标	清晰图标的插槽 { clear: () => void }清除输入的函数	<button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
附加	在输入包装器内、搜索图标之前添加一个项目	-
附加内部	在输入包装器内的搜索图标之后添加一个项目	-
前置	在输入包装器内直接在输入元素之后添加一个项目	-
前置外层	在输入包装器内直接在清除图标之后添加一个项目	-