Question

我正在尝试在Vuetify v对话框中使用Quill.js编辑器，但是当用户在当前打开的下拉列表之外单击时，工具栏的下拉列表并未关闭。

我做了一个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

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

尝试一下。它对我有用。

Answer 2

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

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

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

Vuetify具有其自己的外部click指令，它们可用于菜单，选择...等。它不受此问题的困扰。

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

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

以下代码笔对此进行了演示：

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();
});

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

Quill.js在Vuetify v对话中无法正常工作

2 个答案: