Снежное меню в Quill не прячется с v-if или v-show в vue. js - PullRequest
Новая
       25

Снежное меню в Quill не прячется с v-if или v-show в vue. js

0 голосов
/ 11 марта 2020

Я использую перо в компоненте под названием «редактор». У меня проблема в том, что если я использую v-if или v-show для компонента в моем HTML, редактор скрыт, но меню «снег» остается. Если я переключаюсь, я получаю несколько снежных меню.

Кто-нибудь еще сталкивался с этой проблемой?

Ниже моя разметка 

Vue.component('editor', {
    template: '<div ref="editor"></div>',

    props: {
        value: {
            type: String,
            default: ''
        }
    },

    data: function() {
        return {
            editor: null
        };
    },
    mounted: function() {
        this.editor = new Quill(this.$refs.editor, {
            modules: {
                toolbar: [
                    [{ header: [1, 2, 3, 4, false] }],
                    ['bold', 'italic', 'underline'],
                    ['image', 'code-block', 'link']
                ]
            },
            //theme: 'bubble',
            theme: 'snow',
            formats: ['bold', 'underline', 'header', 'italic'],
            placeholder: "Type something in here!"
        });

        this.editor.root.innerHTML = this.value;

        this.editor.on('text-change', () => this.update());

    },
    methods: {
        update: function() {
            this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
        }
    }
})

new Vue({
    el: '#root',
    data: {
        //model: 'Testing an editor'
        model: '',
        isShowing: true
    }

})

А вот моя HTML Разметка 

<code><!DOCTYPE html>
<html>
<head>
    <title>Trying to use the Quill Editor in Vue</title>

    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
</head>
<body>
    <div id="root">
        <div v-if="isShowing">
            <editor v-model="model"></editor>
        </div>
        <p>I need the v-html directive: <span v-html="model"></span></p>
        <p>Raw data: <pre>{{ model }}
Переключатель

1 Ответ

1 голос
/ 11 марта 2020

Извините, я ответил, исправил проблему со снежным меню. У меня сейчас проблема со ссылкой.

Для снега я положил v-if на оберточный div.

Редактировать 

<div class="agendaAreaEditor" id="objectives" 
 v-on:keypress="checkTextArea('objectives')" 
 v-show="showMeetingObjective || editMeetingObjective" 
 v-bind:class="{error: agenda.objective.trim().length===0 && showValidationErrors}"> 
    <editor v-model="agenda.objective"></editor>
</div>
...