Cегодня хотел вам рассказать о реактивном фреймворке Vue. Он создан для разработки пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с  инструментами и дополнительными библиотеками.

 

Если вы не хотите вникать в разработку и ищите как можно быстро создать сайт, прибегнув к готовым бесплатным и не только шаблонам, тогда вы можете найти интересные примеры у наших партнеров:

Как использовать:

Начнем с того, нам нужно инициализировать компонент  v-show=»false» / display: none в контейнере  для изменения слайдера компонента, но может быть исключение ( ползунок не может быть использован, потому что компонент не может инициализировать размер или положение ползунка ), для этого существует следующее решение:

  • использовать v-if instead вместо v-show или display: none.
  • использовать prop show управления.
  • После появления компонента вызвать метод refresh.

Используем для vue1.x:

У нас будет следующая разметка:

Используется только в версии vue1.x:

Используем для vue2.x:

Так как и выше, для этой версии у нас будет своя разметка, которая отличается от предыдущей версии:

Также инициализация будет для версии vue2.x будет отличаться:

Используем с Browserify (vueify):

Также компонент содержит множество опций, вот некоторые из них.

Опции

Props Тип По умолчанию Описание
direction строка Горизонтально Задайте направление компонента, необязательное значение: [‘horizontal’, ‘vertical’]
event-type строка Авто Тип события, необязательное значение: [‘auto’,’none’]
width число Авто Ширина компонента
height число 6 Высота компонента
dot-size число 16 Определяет ширину и высоту точки слайдера. изменить значение в width и height используя dot-width и dot-heightдля точки
dot-width число значение dot-size точки Ширина ползунков. Если задано, отображает значение размера точки
dot-height число значение dot-size точки Высота ползунков. Если задано, отображает значение размера точки
min число 0 Минимальное числовое значение, которое можно выбрать
max число 100 Максимальное числовое значение, которое можно выбрать
interval число 1 Интервал между значениями
show значение true Отображение компонента
speed число 0,5 Время перехода
disabled значение  false Отключить компоненты
debug значение true Если нет необходимости печатать ошибки в рабочей среде, можно задать значение process.env.NODE_ENV !== 'production'
merge-formatter значение null Форматирование со значением, например: merge-formatter="¥{value1} ~ ¥{value2}"илиmerge-formatter: (v1, v2) => ¥${v1} ~ ¥${v2}
stop-propagation* значение false Все события для stopPropagation
formatter значение null Форматирование значений всплывающей подсказки, например: formatter='¥{value}' илиformatter: (v) => ¥${v}
focus-style объект null Стиль ползунка, когда он сфокусирован. (Работает только при использовании клавиатуры)
use-keyboard значение false Нужно ли управлять при помощи клавиатуры (поддерживают только клавиши со стрелками).

Функции

Название Значение Описание
setValue Параметры: value [, noCallback: boolean, speed: number] Установка значений для value
setIndex Параметры: index* Установка значений для index
getValue Параметры: value Получить значения для value
getIndex Возращение: index* Получить значения для index
refresh null Обновить компонент
  • [ index ] индекс массива, в пользовательской модели данных *
  • [ index ] равно ((значение-мин) / интервал) в нормальном режиме *

Cобытия

Название Значение Описание
callback Параметры value[Number] значения изменяются при вызове функции обратного вызова. (Изменение значения прямого присваивания не вызовет обратного вызова, рекомендуется использовать метод setValue)
drag-start Параметры context[Object] Перетащите начальное значение
drag-end Параметры context[Object] Перетащите конечное значение

Модуль распространяется по свободной лицензии, по этому вы можете свободно использовать в своих проектах.

Вот и все. Готово!