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>
附加	在輸入包裝器內、搜尋圖示之前新增一個項目	-
附加內部	在輸入包裝器內的搜尋圖示之後新增一個項目	-
前置	在輸入包裝器內直接在輸入元素之後新增一個項目	-
前置外層	在輸入包裝器內直接在清除圖示之後新增一個項目	-