Vue Quill css仅应用于我的第一个Quill Editor组件+如何自定义工具栏

Question

我在 vue-quill 包中遇到了一个奇怪的 CSS 问题。在我的项目中，我有评论，每个评论都有自己的鹅毛笔编辑器来回答评论。出于调试目的，我已将

isOpen

属性更改为 true。这意味着，默认情况下，每条评论下方都会显示一个羽毛笔编辑器。

但是，雪主题CSS仅适用于第一个羽毛笔编辑器，所有其他编辑器根本没有样式。

这是我的

CommentList.vue

组件：

<template>
  <div id="comments">
    <p class="font-semibold mb-3">Comments</p>
    <div v-if="comments" v-for="comment in comments">
      <CommentListItem :comment="comment" :key="comment.id" />
    </div>
  </div>
</template>

这是我的

CommentListItem.vue

组件：

<template>
  <div :id="'comment-' + props.comment.id">
    <div>
      {{ props.comment.content }}
    </div>
    <util-quill v-model:is-open="isOpen" :comment-id="props.comment.id"></util-quill>
  </div>
</template>

这是我的

UtilQuill.vue

组件：

<template>
  <div v-if="isOpen" class="quill-editor-wrapper">
    <QuillEditor toolbar="#toolbar" theme="snow">
      <template #toolbar>
        <div id="toolbar">
          <button class="ql-image"></button>
          <button class="ql-link"></button>
        </div>
      </template>
    </QuillEditor>
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'

// CSS styles
import 'quill/dist/quill.snow.css'

export default {
  props: ['isOpen'],
  setup: (props, { emit }) => {
    return { isOpen: props.isOpen };
  },
  components: {
    QuillEditor,
  },
};
</script>

我什至尝试在 Nuxt 3 项目中的

main.scss

文件中导入雪主题，但我仍然面临同样的问题。仅对第一个评论处的第一个羽毛笔编辑器进行样式设置。怎么会这样？

出于调试目的，我还删除了

UtilQuill.vue

组件，并将

QuillEditor

组件放置在

v-for

组件的

CommentListItem.vue

循环中。尽管如此，结果还是一样。

此外，雪主题 CSS 不与 CSS id 一起使用，而是与 CSS 类一起使用。这意味着，通常情况下，该样式应该应用于我所有的羽毛笔编辑器。

知道该怎么做以及如何解决它吗？

我还设置了一个游乐场来向您展示问题。请看一下。

Answer 1

据我所知，该主题看起来运行良好。不确定 它是否不应该是

import '@vueup/vue-quill/dist/vue-quill.snow.css';

，看起来与此处显示的 主题非常相似。

至于主要问题，插件似乎只针对

#toolbar

，问题是 HTML 每页只能有 1 个唯一 id。一个可能的解决方案是在每次迭代时都有一个带有偏移 id 的东西。

这看起来工作正常。

util-quil.vue

<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const props = defineProps(['value']);
</script>

<template>
  <div>Value index >> {{ props.value }}</div>
  <div class="quill-editor-wrapper">
    <QuillEditor :toolbar="`#toolbar-${props.value}`"></QuillEditor>

    <div :id="`toolbar-${props.value}`">
      <!-- Add buttons as you would before -->
      <button class="ql-bold"></button>
      <button class="ql-italic"></button>

      <button id="custom-button">custom</button>
    </div>
  </div>
</template>

app.vue

<template>
  <div v-for="n in 10">
    <p>I am the random comment text...</p>
    <util-quill :value="n" />
  </div>
</template>

更新了重现工作链接。

我不确定这是否是完美的解决方案（我对 Quill 没有任何经验），但看起来它总体上非常实用。