کتابخانه
vue-select یه کامپوننت Vue برای ساخت لیست کشویی پیشرفته است. کارهایی رو انجام می ده که تگ select معمولی HTML نمی تونه: جستجو بین گزینه ها، انتخاب چندتایی، ساخت گزینه جدید و گرفتن گزینه ها از سرور. سبکه، راحت سفارشی می شه و مجوزش MIT هست.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۵۰ کیلوبایت· ۲۶ فایل· انتشار
SHA-256: e9bac4199c7ba8ffa3b47830a24d3d33d0958c0baedeea2e338d3cd1f28a3dbd
تگ select معمولی HTML برای چند تا گزینه کارش رو راه می ندازه. ولی همین که لیست شهرها یا دسته بندی ها از چند ده تا بیشتر می شه، اذیت می کنه. نمی شه توش جستجو کرد، هماهنگ کردن ظاهرش با طراحی سایت سخته و انتخاب چندتایی با نگه داشتن Ctrl تجربه خوبی برای کاربر نیست. vue-select برای همین ساخته شده. یه کامپوننت Vue سبکه که جای select معمولی می شینه و کارهایی رو که ازش انتظار داری انجام می ده.
کارهای اصلیش اینان: جستجو و فیلتر داخل لیست، انتخاب تکی و چندتایی، ساخت گزینه جدید توسط خود کاربر (حالت تگ)، گرفتن گزینه ها از سرور موقع تایپ و تغییر ظاهر بخش های مختلف با اسلات ها. گزینه ها می تونن آرایه ساده ای از متن باشن یا آبجکت هایی با فیلد دلخواه برای عنوان و مقدار. با v-model هم مثل بقیه فیلدهای فرم Vue بهش وصل می شه. حجمش سنگین نیست، برای همین توی پروژه های کوچک هم دردسر درست نمی کنه.
مناسب کیه؟ اگه فرانت سایتت با Vue نوشته شده، مثلاً پنل مدیریت، فرم سفارش، فیلتر محصولات فروشگاه یا صفحه ثبت نام با انتخاب استان و شهر، خیلی راحت جا می افته. توسعه دهنده های وردپرسی هم که توی افزونه یا قالب سفارشی خودشون از Vue استفاده می کنن، می تونن ازش کمک بگیرن. ولی اگه صفحه ات Vue نداره و فقط یه فرم ساده با دو سه گزینه داری، آوردن Vue فقط برای یه لیست کشویی کار درستی نیست. همون select معمولی یا یه کتابخونه مستقل از فریم ورک بهتره.
چند نکته موقع انتخاب و استفاده. اول، نسخه Vue پروژه ات رو چک کن، چون برای Vue قدیمی و جدید خط انتشار جدا وجود داره. دوم، فایل CSS کتابخونه رو جدا به صفحه اضافه کن، وگرنه لیست بدون استایل میاد. سوم، توی سایت فارسی حتماً حالت راست به چپ رو تنظیم کن و اگه جستجو برات مهمه، با «ی» و «ک» عربی و فارسی تست بگیر. ممکنه لازم بشه تابع فیلتر خودت رو بنویسی. نسخه های رسمی و بدون تغییر vue-select توی مخزن داخلی ما هم هست، پس وقتی دسترسی به منابع خارجی قطع یا کند باشه، می تونی از همین جا برداری.
بعد از راه انداختن، یه بار با لیست طولانی و یه بار روی موبایل تستش کن. اگه گزینه ها از سرور میان، حالت بارگذاری و حالت «نتیجه ای پیدا نشد» رو هم بررسی کن تا کاربر وسط کار گیج نشه.
vue-select یه کامپوننت Vue برای ساخت لیست کشویی پیشرفته است. select معمولی فقط انتخاب ساده رو پشتیبانی می کنه، ولی این کامپوننت جستجو بین گزینه ها، انتخاب چندتایی، ساخت گزینه جدید و سفارشی سازی ظاهر رو هم داره و مثل یه فیلد معمولی با v-model وصل می شه.
برای Vue قدیمی و جدید خط انتشار جداگانه ای وجود داره. قبل از نصب مطمئن شو نسخه ای که برمی داری با Vue پروژه ات هماهنگه، وگرنه موقع ثبت کامپوننت خطا می گیری. توضیح همین صفحه رو برای نسخه موجود توی مخزن هم چک کن.
بله. کتابخونه یه رویداد برای تایپ توی کادر جستجو می ده. باهاش درخواستی به API می فرستی و بعد آرایه options رو با نتیجه پر می کنی. برای لیست های بزرگ مثل محصولات یا کاربرها خیلی به درد می خوره، چون لازم نیست همه چیز یک جا بارگذاری بشه.
کتابخونه تنظیم راست به چپ داره، پس توی سایت فارسی می شه ازش استفاده کرد. فقط ظاهرش رو حتماً تست کن. اگه توی جستجو بین «ی» و «ک» عربی و فارسی فرق می ذاره، می تونی تابع فیلتر خودت رو بنویسی و بهش بدی.
نه، این کتابخونه به Vue نیاز داره و مستقل از فریم ورک کار نمی کنه. اگه قالب یا افزونه سفارشی ات از Vue استفاده می کنه، اضافه کردنش راحته. برای صفحه های معمولی وردپرس که Vue ندارن، بهتره سراغ یه کتابخونه مستقل از فریم ورک بری.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.