112 lines
2.6 KiB
Vue
112 lines
2.6 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-loading = "loading"
|
|
v-if="visible"
|
|
:visible.sync="visible"
|
|
:before-close="handleClose"
|
|
:title="title"
|
|
:append-to-body="appendToBody"
|
|
width="60%">
|
|
<quill-editor v-if="!disabled" ref="myQuillEditor" v-model="text" :height="300" :options="editorOption" />
|
|
<div v-else class="ql-editor">
|
|
<div v-html="text"/>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="closeWindow">取 消</el-button>
|
|
<el-button type="primary" @click="save">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
|
import { quillEditor } from 'vue-quill-editor'
|
|
import waves from '@/directive/waves' // waves directive
|
|
import 'quill/dist/quill.core.css'
|
|
import 'quill/dist/quill.snow.css'
|
|
import 'quill/dist/quill.bubble.css'
|
|
export default {
|
|
components: { Pagination, quillEditor },
|
|
directives: { waves },
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
appendToBody: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
loading: false,
|
|
text: '',
|
|
// 富文本编辑器配置
|
|
editorOption: {
|
|
modules: {
|
|
toolbar: [
|
|
[
|
|
'bold', 'italic', 'underline', 'strike',
|
|
'blockquote', 'code-block',
|
|
{ header: 1 }, { header: 2 },
|
|
{ list: 'ordered' }, { list: 'bullet' },
|
|
{ script: 'sub' }, { script: 'super' },
|
|
{ indent: '-1' }, { indent: '+1' },
|
|
{ direction: 'rtl' },
|
|
{ color: [] }, { background: [] },
|
|
{ align: [] },
|
|
{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] },
|
|
{ header: [1, 2, 3, 4, 5, 6] },
|
|
'clean'
|
|
]
|
|
]
|
|
},
|
|
placeholder: '请输入正文'
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val)
|
|
}
|
|
},
|
|
methods: {
|
|
init(e) {
|
|
this.visible = true
|
|
this.text = e.text
|
|
},
|
|
handleClose() {
|
|
this.visible = false
|
|
this.text = ''
|
|
},
|
|
closeWindow() {
|
|
this.visible = false
|
|
this.text = ''
|
|
},
|
|
save() {
|
|
this.$emit('getResult', { text: this.text })
|
|
this.visible = false
|
|
this.text = ''
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.information >>> .el-scrollbar__wrap {
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style>
|
|
.ql-container{
|
|
height: 300px;
|
|
}
|
|
</style>
|