我在 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 类一起使用。这意味着,通常情况下,该样式应该应用于我所有的羽毛笔编辑器。
知道该怎么做以及如何解决它吗?
我还设置了一个游乐场来向您展示问题。请看一下。
我提供任何形式的帮助!
据我所知,该主题看起来运行良好。不确定它是否不应该是
import '@vueup/vue-quill/dist/vue-quill.snow.css';
。
至于主要问题,插件似乎只针对
#toolbar
,问题是 HTML 每页只能有 1 个唯一 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}`" theme="snow">
<template #[`toolbar${props.value}`]>
<div :toolbar="`#toolbar${props.value}`">
<button class="ql-image"></button>
<button class="ql-link"></button>
</div>
</template>
</QuillEditor>
</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 没有任何经验),但看起来它总体上非常实用。