16 Июнь 2022

Дружим JQuery Bootstrap Tooltip и Vue JS с помощью кастомной директивы

posted in VUE JS |

В продолжении предыдущей статьи, уже в собственном авторстве как элемент модуля

В отдельном файле

import Vue from 'vue'

const tooltip = Vue.directive('tooltip', {
   inserted(el, binding) {
        $(el).tooltip({
            trigger: 'hover',
            placement: binding.arg
        })
    },
});

export default tooltip;

import Vue from 'vue'

const tooltip = Vue.directive('tooltip', {

inserted(el, binding) {

$(el).tooltip({

trigger: 'hover',

placement: binding.arg

})

});

export default tooltip;

В vue компоненте импортируем этот файл (путь вставляем свой)

import tooltip from "../../directives/Tooltip.js";

1	import tooltip from "../../directives/Tooltip.js";

добавляем соответствующую опцию

directives:{
    tooltip
  },

directives:{

tooltip

и используем как обычную директиву vue

в моём случае

<a v-tooltip:top title="Повернуть макет на 90° против часовой стрелки" ... > ... </a>

1	<a v-tooltip:top title="Повернуть макет на 90° против часовой стрелки" ... > ... </a>

Дока по директивам

Запись опубликована on 16.06.2022 at 09:23 and is filed under VUE JS. Вы можете читать комментарии, используя RSS-ленту. Вы можете оставить комментарий, или отправить трекбек с Вашего сайта.

Пн	Вт	Ср	Чт	Пт	Сб	Вс
« Мар
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Дружим JQuery Bootstrap Tooltip и Vue JS с помощью кастомной директивы

Оставить комментарий