الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

vue-search-input

مكون إدخال بحث 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
قيمة النموذج (v-model) خيط قيمة المدخلات ''
WrapperClass خيط فئة CSS الافتراضية لـ div المجمّع search-input-wrapper
searchIcon منطقية يعرض أيقونة "البحث". حقيقي
ShortcutIcon منطقية يعرض أيقونة "الاختصار". حقيقي
ClearIcon منطقية يعرض أيقونة "مسح النص". حقيقي
إخفاءShortcutIconOnBlur منطقية ما إذا كان سيتم إخفاء رمز الاختصار عندما يفقد الإدخال التركيز حقيقي
ClearOnEsc منطقية ما إذا كان سيتم مسح حقل الإدخال عند الضغط على مفتاح esc حقيقي
BlurOnEsc منطقية ما إذا كان سيتم إخراج التركيز من حقل الإدخال عند الضغط على المفتاح esc حقيقي
حددOnFocus منطقية لتحديد نص الإدخال عند / الضغط على المفاتيح حقيقي
ShortListenerEnabled منطقية لتمكين وظيفة الضغط على المفتاح / حقيقي
ShortcutKey خيط 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>
إلحاق لإضافة عنصر داخل غلاف الإدخال، قبل رمز البحث -
إلحاق الداخلية لإضافة عنصر داخل غلاف الإدخال، بعد رمز البحث -
إضافة مسبقة يضيف عنصرًا داخل غلاف الإدخال مباشرةً بعد عنصر الإدخال -
prepend-outer يضيف عنصرًا داخل غلاف الإدخال مباشرة بعد الأيقونة الواضحة -
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل