Quill.js 在 Vuetify v-dialog 中无法正常工作

Question

我正在尝试在 Vuetify v-dialog 中使用 Quill.js 编辑器，但是当用户在当前打开的下拉菜单之外单击时，工具栏下拉菜单不会关闭。

我做了一个 js Fiddle： https://jsfiddle.net/6d7bef5n/

<div id="app">
  <v-app>
     <quill-editor v-model="content"></quill-editor>
     <v-dialog v-model="dialog">
        <quill-editor v-model="contentKo"></quill-editor>
      </v-dialog>
     <v-btn @click.stop="dialog = !dialog">Open Quill in a Modal</v-btn>
  </v-app>
</div>

Vue.use(VueQuillEditor)

Vue.use(VueQuillEditor)
new Vue({
  el: "#app",
  data() {
    return {
      content: "I'm OK",
      contentKo: "I'm Wrong, Toolbar dropdowns are not closing on blur",
      dialog: false
    }
  }
});

似乎 v-dialog 组件在他的内容槽内的事件上做错了，可能是打开/关闭行为，但没有找到什么。

谢谢

Answer 1

正如@MarlburroW 指出的那样，当用户在对话框内部单击时，Vuetify 的 VDialog 组件会停止单击事件的传播。

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDialog/VDialog.js#L284

在我的例子中，我有一个自定义指令，可以检测目标元素之外的点击，例如下拉组件。这行得通，但是如果您在 Vuetify 的对话框中使用这样的组件，自定义指令将不起作用，因为 VDialog 停止了点击事件的传播。

Vuetify 有自己的外部点击指令，它们用于菜单、选择...等。它不会受到这个问题的影响。

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/click-outside.ts

我查看了 Vuetify 的指令和我自己的指令之间的区别，它起作用的原因是它们使用捕获而不是冒泡事件侦听器。

下面的codepen演示了它：

https://codepen.io/geersch/pen/LoLgYK

onClick = function (e) { console.log('The click event bubbled up.'); };

document.body.addEventListener('click', onClick, { capture: true });
// document.body.addEventListener('click', onClick, { capture: false });

dialog = document.querySelector('#dialog');
dialog.addEventListener('click', function (e) {
    e.stopPropagation();
});

所以我只是将指令更改为也使用捕获。

Answer 2

.quill-editor {
  user-select: auto !important;
  -moz-user-select: auto !important;
  -webkit-user-select: auto !important;
  -ms-user-select: auto !important;
}

试试看。它对我有用。