С направляющими для каждого
Как известно опытным разработчикам, иногда использование пакета другого человека для решения какой-либо функции вашего приложения в конечном итоге требует больше времени, чем позволяет сэкономить. Озвученные системы и отсутствие нестандартных решений часто загоняют нас в яму, из-за которой мы вообще сожалеем о том, что когда-либо устанавливали их.
Хотя у меня тоже был этот опыт много раз, есть несколько пакетов, на которые я полагаюсь во многих проектах и которые оказались очень полезными в долгосрочной перспективе. После тестирования множества вариантов для каждой из проблем, которые решают эти пакеты, я перечислил ниже свои личные предпочтения, основанные на простоте использования, разнообразии функций и визуальной привлекательности.
Нажмите Off, чтобы закрыть
Бывают случаи, когда нам нужно вызвать событие, когда пользователь щелкает за пределами элемента. Чаще всего это используется, когда вы хотите закрыть раскрывающееся меню или диалоговое окно, щелкнув в стороне от него. Это важный пакет, который я использую почти в каждом приложении, которое создаю.
Лучший выбор: vue-clickaway
использование
Обычно я устанавливаю его в main.js, чтобы его можно было использовать в моем приложении. Если вы используете его только на одной или двух страницах, вы, вероятно, захотите импортировать его по отдельности.
Если вы импортируете его индивидуально, помните, что директивы должны быть представлены в директивах:
✅ directives: { onClickaway }
а не компоненты:
❌ components: { onClickaway }
Сделать его доступным глобально (в main.js):
import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)
В шаблоне:
Представьте, что у меня есть полное поле выбора, включая список из li элементов (здесь не показаны). Вышеупомянутая кнопка используется для запуска моего списка настраиваемых элементов поля выбора, и когда я нажимаю за пределами этого элемента, я запускаю метод, закрывающий список параметров. Это гораздо лучший UX, чем заставлять пользователя всегда нажимать кнопку «закрыть X» в углу вашего элемента. Мы можем получить эту функциональность, просто добавив к нашей кнопке следующее: v-on-clickaway=“closeMethodName”.
Примечание. Вы всегда должны использовать vue-clickaway с методом close, а не с методом toggle. Я имею в виду, что метод, связанный с v-on-clickaway, должен быть примерно таким:
closeMethod() {
this.showSomething = false
}
а не так:
toggleMethod() {
this.showSomething = !this.showSomething
}
Если вы используете метод toggle, то всякий раз, когда вы щелкаете за пределами этого элемента, он будет открываться, а затем закрывать элемент снова и снова, независимо от того, на что вы нажимаете. Скорее всего, это не тот результат, который вам нужен, поэтому просто не забудьте использовать close метод, чтобы этого не произошло.
Тосты (панель уведомлений)
Лучший выбор: vue-toastification
У вас есть множество вариантов тостов и подобных уведомлений, но я большой поклонник vue-toastification Маронато. Он предоставляет множество вариантов для большинства ваших крайних случаев, а стили и анимация обеспечивают отличное взаимодействие с пользователем, которое намного превосходит другие пакеты.
использование
Vue-toastification дает вам несколько способов использовать его в своей документации. Вы можете сделать это на уровне компонентов, на глобальном уровне или даже внутри Vuex, если вы предпочитаете отображать всплывающие сообщения на основе действий, связанных с состоянием или сервером.
Использовать глобально (в main.js):
Вы можете управлять стилями отдельно в каждом компоненте, но в приведенном выше случае я делаю его доступным повсюду в моем приложении, импортируя его в main.js, а затем устанавливая параметры, которые я хочу использовать там. Это избавляет меня от необходимости писать одни и те же свойства параметров каждый раз, когда я хочу их использовать. Vue-toastification имеет отличную игровую площадку, где вы можете видеть результаты каждой опоры опций и просто копировать и вставлять нужные опции, как я сделал выше.
Вариант 1. Использование тостов в компоненте (шаблоне)
<button @click="showToast">Show toast</button> 
Вариант 2. Вызов тоста при обнаружении ошибки (или успеха) в действии Vuex
Вы можете изменить тип тоста, который хотите, просто изменив слово .error на .success, .info, .warning, или вы можете полностью удалить его, чтобы получить default всплывающее уведомление.
Тосты позволяют отображать сообщения в зависимости от изменений состояния в реальном времени или при возникновении непредвиденной ошибки, что значительно улучшает взаимодействие с пользователем. Тосты обеспечивают лучшую визуальную индикацию, чем модальные окна или уродливые окна предупреждений, например, когда пользователю нужно будет дополнительно щелкнуть, чтобы закрыть. Пользователи оценят, что вы дали им визуальную подсказку о том, что пошло не так, не позволяя им смотреть на экран, тупо ожидая, что произойдет что-то, чего никогда не произойдет. Также полезно подтвердить, что выполняемое ими действие было успешно выполнено.
Таблицы
Лучший выбор: vue-good-table
Таблицы являются неотъемлемой частью многих веб-приложений, и выбор неправильного приложения может отправить вас на путь бесконечной боли. Попробовав длинный список вариантов пакетов таблиц, я уверен, что vue-good-table удовлетворит большинство ваших требований к таблицам. Это не просто хороший стол для развлечения. Он действительно хорош и предоставляет больше возможностей и функций, чем вы можете себе представить.
использование
В приведенном ниже случае я привязываю свои :rows данные к геттеру Vuex с именем getOrderHistory.
Определение моих столбцов в локальном data():
label - это отображаемый заголовок столбца, а field - это данные, к которым я привязываюсь в моем геттере Vuex.
Выше я также использую некоторые параметры настройки vue-good-table, такие как установка формата ввода и вывода моих дат (что позволяет мне взять долгую временную метку, предоставленную сервером, и изменить ее на что-то более читабельный для моих пользователей). Я также использую formatFn для форматирования цены, вызывая отдельный метод, который я назвал toLocale. Затем я настраиваю внешний вид каждой ячейки, привязывая tdClass к классу, который я установил в своем local<style>. Vue-good-table действительно имеет бесконечную встроенную настраиваемость, и они охватывают очень широкий спектр крайних случаев.
Пользовательские шаблоны
Vue-good-table также отлично работает с настраиваемыми шаблонами, так что вы можете легко вставить кнопку, поле выбора или что-нибудь еще, что вам нравится, прямо в ячейки своей таблицы. Для этого вы просто используете v-if, чтобы определить, куда его следует вводить.
Чтобы добавить еще один настраиваемый столбец, просто добавьте v-else-if после закрывающего тега v-if (промежуток в приведенном выше случае), а затем добавьте туда логику для вашего второго настраиваемого шаблона. Независимо от того, что вам нужно, vue-good-table поможет вам.
Выбор даты
Лучший выбор: vue2-datepicker
Ах, выбор даты. Важный компонент многих приложений, которые живут в дикой природе. В этом списке больше вариантов выбора дат, чем что-либо еще в этом списке, но vue2-datepicker, созданный Mengxiong, - это то, к чему я постоянно возвращаюсь. Его легко стилизовать, он предоставляет широкий спектр опций для выбора дат и диапазонов дат, а также имеет приятный и удобный пользовательский интерфейс. Он даже поддерживает язык i18n и локализацию формата даты.
ПРИМЕЧАНИЕ. Хотя пакет называется vue2-datepicker, у вас не должно возникнуть проблем с добавлением этого (или других пакетов, перечисленных здесь) в приложение Vue 3.0.
использование
Импортируйте компонент или представление, чтобы его можно было использовать.
import DatePicker from 'vue2-datepicker'; // styles import 'vue2-datepicker/index.css';
В шаблоне:
Здесь я использую опцию диапазона, чтобы позволить пользователю выбрать диапазон дат, и v-model вставляю введенную пользователем дату в значение данных, называемое dateRange. dateRange затем используется vue-good-table (см. Ниже) для сортировки результатов моей таблицы. Я также использую параметры событий @clear и @input для запуска методов, которые сбрасывают таблицу (resetList) или отправляют запрос к серверу для данных таблицы (searchDate). Vue2-datepicker предлагает гораздо больше опций и событий для вашего удобства, но именно эти я использую чаще всего.
Рейтинги пользователей
Лучший выбор: vue-star-rating
Хотя вы можете использовать эту функцию не в каждом проекте, для любого сайта, для которого требуется элемент пользовательского рейтинга (например, Amazon или Rotten Tomatoes), я предпочитаю vue-star-rating. Самостоятельная разработка может показаться тривиальной задачей, но если вдаваться в подробности, звездные рейтинги могут быстро стать сложнее, чем вы ожидали. Он позволяет использовать пользовательские формы SVG, если вам нужно что-то особенное, и имеет легкую настройку размера, интервала и цвета.
Эти параметры упрощают v-model присвоение рейтингов пользователям в любом месте, где вы хотите их использовать, и вы можете сделать рейтинг изменяемым или доступным только для чтения с помощью одного параметра.
Если вам когда-нибудь понадобится больше возможностей, ознакомьтесь с расширенным пакетом разработчика vue-rate-it .
использование
В шаблоне (с опциями):
Импортируйте его в компонент или представление:
Если вы ищете библиотеку определенного типа, не указанную здесь, оставьте заметку в комментариях, и я постараюсь предоставить вам несколько вариантов.
