Как использовать директиву V-Click-Outside?

Question

[aLeXxX_03]

У меня есть компонент, который находится внутри другого компонента.

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

Но нужно сделать так, чтобы при клике за пределами компонента-потомка, т.е. при клике по родительскому компоненту происходило закрытие меню.
Т.е. закрытие и по кнопке меню, и по компоненту-родителю.

Как это сделать?

Я нашел, что нужно сделать вот так:

spoiler

v-show="show"
    v-click-outside="onClickOutside"

- вставить в div-потомок, что я и сделал.
А так же добавить в компоненте-потомке:

export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    onClickOutside() {
      this.show = false;
    }
  }
};

Я все, что в спойлере вставил в компонент-потомок, но это не сработало. Т.е. при клике по тому, что вне кнопки-меню и компонента-потомка - ничего не происходит.
Т.е. при клике по свободному месту на экране меню не закрывается.

ЧТО Я ДЕЛАЮ НЕ ТАК?

С меня благодарность.

Answer 1

[Алексей Ярков]

Я нашел, что нужно сделать вот так

Там где это написано есть ещё информация. Рекомендую ознакомиться.
Кстати по вашей ссылке можно и к демке перейти. Там увидеть магические строки:

import vco from "v-click-outside";

Vue.use(vco);

Comments

[aLeXxX_03]

Если вы про это npm install --save v-click-outside , то я это сделал

А взял я отсюда это, там больше ничего и нет про это https://webdevblog.ru/15-obyazatelnyh-direktiv-vue...

[Алексей Ярков]

aLeXxX_03, ну тогда показывайте код обоих компонентов))

[aLeXxX_03]

Вот в этом вопросе у меня ВЕСЬ код Как сделать закрытие меню по нажатию на любую область экрана?

И вот отдельный кусок выглядит так с использованием V-Click-Outside(под спойлером с названием: "вложенный в Header компонент HeaderBottom"):

<div
        v-bind:class="{ catalogOpen: boolean }"
        class="catalog"
        v-on:click="menu"
        v-show="show"
        v-click-outside="onClickOutside"
      >
        <div>
          <div />
          <div />
          <div />
        </div>

export default {
  data() {
    return {
      boolean: false,
      show: true,
    };
  },
  methods: {
    menu() {
      this.boolean = !this.boolean;
    },
    onClickOutside() {
      this.show = false;
    },
  },
};

[Алексей Ярков]

aLeXxX_03, ответ посмотрите, обновил

[aLeXxX_03]

Алексей Ярков, сделал, как вы сказали, выглядит это так:

import { createApp } from "vue";
import { createPinia } from "pinia";
import vco from "v-click-outside";

import App from "./App.vue";
import router from "./router";

Vue.use(vco);
createApp(App).use(createPinia()).use(router).mount("#app");

Но почему-то не работает - просто белый фон на странице.
Если делаю так, то просто не работает, но страница отображается:

createApp(App).use(vco).use(createPinia()).use(router).mount("#app");

[Алексей Ярков]

aLeXxX_03, по вашей ссылке демо есть. Открывайте, сравнивайте с тем что написали. По ощущениям вы просто копипастите, не задумываясь о том, что написано. Или делайте свой пример на codesandbox.io и будем разбираться.

[aLeXxX_03]

Алексей Ярков, мне непонятна демка от слова совсем. Я не вижу связи с моим случаем в этой демке, вообще

[aLeXxX_03]

Алексей Ярков, а нормальных учебных материалов по этой директиве нет

[aLeXxX_03]

Алексей Ярков, в демке той даже окон никаких нет, я вообще не понимаю, что это за пример такой... Где там модальное окно?
Словно демка не соответствует назначению v-click-outside

[Алексей Ярков]

aLeXxX_03, какие вам материалы нужны? Есть гитхаб разработчика. Это не встроенный функционал vue, чтобы какие-то обучающие материалы искать )) Там документации на 2 строчки ))

Я не вижу связи с моим случаем в этой демке, вообще

Вы хотя бы на версию Vue посмотрите. Демка для 2 версии сделана и всё работает. У вас 3 версия. Она вообще поддерживается этим пакетом?

[Алексей Ярков]

aLeXxX_03,

Где там модальное окно?

Для чего? Вы код смотрели? А в консоль заглянули?

[aLeXxX_03]

Алексей Ярков, вот в этом и проблема... У меня vue 3... А я даже не догнал, что это для 2-ой версии Vue... Видимо не работает)

[Алексей Ярков]

aLeXxX_03,

А я даже не догнал, что это для 2-ой версии Vue

А открыв демо один раз это сразу видно )) Ну и в гитхаб сходить не мешало бы ))

[aLeXxX_03]

Алексей Ярков, а как тогда быть на 3-й версии Vue? Тут описана у меня ситуация, как её решить на 3-м VUE?
Подскажите, пожалуйста. Уже 3-4 дня бодаюсь с этим, а оказалось все дело в версии...

[aLeXxX_03]

Алексей Ярков, Как сделать закрытие меню по нажатию на любую область экрана? вот тут описана моя ситуация(забыл вставить ссылку в прошлом сообщ.)

[aLeXxX_03]

Алексей Ярков, наверное вот это подойдет? Вроде для 3-й VUE
https://www.npmjs.com/package/click-outside-vue3

[Алексей Ярков]

aLeXxX_03,

наверное вот это подойдет

Ну пробуйте )) Наверное подойдёт. А вообще по вашей ссылке на ваш вопрос вам ответили как сделать. Но вам же готовое надо ))

[aLeXxX_03]

Алексей Ярков, я бы скорее сказал, что не прям готовое, но чтобы хотя бы какое-то объяснение, как это все работает, а там бы я сам разобрался

[aLeXxX_03]

Алексей Ярков, было объяснение*

[Алексей Ярков]

aLeXxX_03, так загляните в исходники директивы на гитхабе, там 3 строчки. Какое нужно объяснение? Что именно непонятно?