Abr@X@bra.ru
Vue.js Пишем крутое меню подсветки как в Medium
Vue.js Пишем крутое меню подсветки как в Medium

Vue.js Пишем крутое меню подсветки как в Medium

17.01.2019
76

Крутая особенность в Medium - это меню подсветки, которое появляется при выборе текста. Это меню содержит кнопки, которые позволяют выполнять определенные действия с выделенным текстом, такие как выделение и публикация в соцсети.

Если вам нравится эта функция и вы хотите, чтобы она была на вашем сайте, я покажу вам, как создать повторно используемый компонент, который включает это поведение в содержащемся в нем тексте.

Вы можете попробовать demo на CodePen:


Создание нового проекта с Vue CLI 3

С помощью мгновенного прототипирования Vue CLI 3 мы можем быстро запустить приложение Vue с помощью всего одного * .vue файла.

Убедитесь, что у вас Vue CLI 3 установлен глобально:


В этом приложении нам понадобятся только два файла: App.vue и Highlightable.vue.

Highlightable.vue - наш многократно используемый компонент меню подсветки. А App.vue является компонентом главной страницы.

Создайте оба файла в любом каталоге; затем запустите vue serve в App.vue.


Реализация App.vue

В App.vue мы добавим два абзаца. Тот, который может быть выделен, и тот, который не может.

Мы также импортируем и используем Highlightable.vue, даже не создавая его. (Это полезно, чтобы увидеть, как мы собираемся использовать его.)

Вот как это должно выглядеть в конце:


Как вы можете видеть выше, мы обрабатываем два события из Highlightable. Эти два события являются действиями кнопок в меню выделения. Это всего лишь примеры. Вы можете изменить их на что угодно.

Реализация Highlightable.vue

Раздел шаблона состоит из двух частей: элемент меню с кнопками и <slot /> для отображения текста.

Давайте начнем с этого кода в шаблоне:


Обратите внимание, что мы используем showMenu, который мы еще не создали, чтобы определить, следует ли нам отображать меню.

Теперь давайте перейдем к стилям.

Добавьте следующий CSS в раздел <style>:


Здесь нет ничего сложного.  Класс menu для главного меню. menu:after для маленького треугольника (стрелка) в центре нижней части меню.

Здесь важно отметить, что .menu имеет position absolute. Нам нужно разместить его над выделенным текстом.

Наконец, давайте перейдем к разделу <script>.

Давайте начнем с данных.


  1. х и у для позиционирования меню.

  2. showMenu, чтобы показать / скрыть меню.

  3. selectedText будет содержать фактическое содержание выбранного текста.

Теперь перейдем к вычислению.


У нас есть только одно вычисляемое свойство, которое возвращает элемент, используемый в секции slot Highlightable. В нашем примере это будет тег <p> между <highlightable> </ highlightable>.

Затем давайте добавим функции в mounted, beforeDestroy.


Мы используем их для прослушивания события mouseup, которое мы обрабатываем внутри метода onMouseup.

Теперь давайте создадим метод onMouseup.



Теперь давайте обновим шаблон Highlightable.vue, чтобы отразить новые изменения.


Изменения:

  1. Применяются позиции к элементу меню.

  2. Добавлен @mousedown.prevent = "" к элементу меню, чтобы меню не закрывалось при щелчке внутри него.

  3. Добавлен @mousedown.prevent = "handleAction ('share')" на кнопке общего доступа для обработки действия, на которое нажали. То же самое для действия основного момента.

Обратите внимание, что мы используем событие mousedown вместо click, чтобы предотвратить выделение текста, что приведет к закрытию меню.

Последнее, что нам нужно сделать, это добавить метод handleAction.


Этот метод генерирует событие action и передает выделенный текст вместе с ним.

С этим мы закончили! 

Теперь у вас есть компонент многократного использования, который вы можете использовать для отображения выделенного меню для выделенного текста, как это делает Medium.





Vue.js
Читайте также:
Vue.js + GSAP =  Крутая анимация

Vue.js + GSAP =  Крутая анимация

Vue.js - это структура Javascript, которая одновременно является мощной и простой. С помощью Vue CLI мы можем быстро вне...
Читать
Vue.js – эффект увеличения изображения как на medium.com

Vue.js – эффект увеличения изображения как на medium.com

Данный эффект делает красивое масштабирование изображения.
Читать
Vue.js 2 + Firebase

Vue.js 2 + Firebase

Создание веб-приложений в режиме реального времени с использованием Vue.js 2 и Firebase.
Читать