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

Question

我正在尝试在vuetify v-dialog内使用quill.js编辑器，但是当用户单击当前打开的下拉列表外时，工具栏下拉列表未关闭。

我做了一个小提琴：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/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;
}

尝试。它对我有用。