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 обертки является search-input-wrapper который вы можете переопределить, предоставив класс(ы) компоненту SearchInput .

Класс и стили, привязанные к компоненту SearchInput будут добавлены в оболочку div .

События

События, привязанные к компоненту SearchInput будут переданы элементу input .

Имя	Описание	Возвращаемое значение
обновление:модельвалуе	Обновленная связанная модель	string

Реквизит

Имя	Тип	Описание	По умолчанию
тип	нить	Тип поля ввода. Разрешенные типы: search и text	search
modelValue (v-модель)	нить	Значение входа	''
класс-обертка	нить	Класс CSS по умолчанию для div-обертки	search-input-wrapper
значок поиска	логическое значение	Отображает значок «поиск»	истинный
значок ярлыка	логическое значение	Отображает значок «ярлыка»	истинный
очистить значок	логическое значение	Отображает значок «открытый текст»	истинный
скрытьShortcutIconOnBlur	логическое значение	Скрывать ли значок ярлыка, когда ввод теряет фокус	истинный
ClearOnEsc	логическое значение	Очищать ли поле ввода при нажатии клавиши esc	истинный
BluOnEsc	логическое значение	Удалять ли фокус из поля ввода при нажатии клавиши esc	истинный
выберитеОнФокус	логическое значение	Выбирает текст ввода при нажатии клавиши /	истинный
ярлыкListenerEnabled	логическое значение	Включает функциональность нажатия клавиши /	истинный
ярлык	нить	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>
добавить	Добавляет элемент внутри оболочки ввода перед значком поиска.	-
добавление-внутреннее	Добавляет элемент внутри оболочки ввода после значка поиска.	-
добавить в начало	Добавляет элемент внутри оболочки ввода непосредственно после элемента ввода.	-
добавить внешний	Добавляет элемент внутри оболочки ввода сразу после значка очистки.	-