<template>
    <el-popover
        placement="top-start"
        :width="800"
        trigger="hover"
        content="this is content, this is content, this is content"
    >
        <template #default>
            <quill-editor @change="onEditorChange($event)" v-model:value="editLabelValue" :options="{
                    modules: {
                      toolbar: toolbarOptions
                    },
                    placeholder: '请输入内容...'
                  }"></quill-editor>
        </template>
        <template #reference>
            <span v-html="editLabelValue"></span>
        </template>
    </el-popover>
</template>

<script>
import { quillEditor } from "vue3-quill";
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    [{'color': []}, {background: []}],
    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    [{ indent: '-1' }, { indent: '+1' }],
    ['link', 'image']
]
export default {
    name: "rich-text-label",
    components: {quillEditor},
    props: {
        defaultValue: String
    },
    data() {
        return {
            toolbarOptions,
            editLabelValue: this.defaultValue
        }
    },
    methods: {
        onEditorChange(e) {
            this.$emit('change', e.html)
        }
    },

}
</script>

<style lang="scss" scoped>

</style>
