版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_32107121/article/details/89136928
先上一个最终的效果图:
如图:上面是quill-editor组件,下面是el-upload组件。
上代码:
<template>
<div class="my-container">
<!--quill组件用div包裹起来是为了更方便的根据项目要求修改组件的样式,下同-->
<div class="my-quill">
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption">
</quill-editor>
</div>
<!--el-upload组件仅用于展示上传的文件以及删除文件操作,不需要过多的配置其他参数-->
<div class="my-upload">
<el-upload multiple ref="upload" action="" accept=".pdf" :before-remove="handleBeforeRemove" :file-list="fileList"></el-upload>
</div>
</div>
</template>
<script>
//使用quill-editor记得引入相关css文件,要不然样式会有问题
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
name: 'myProject',
components: {
quillEditor
},
mounted () {
//quill里面的工具栏的样式名是ql-toolbar
const toolbar = document.querySelector('.ql-toolbar');
toolbar.title = '上传PDF格式附件';
let formats = document.createElement('span');
formats.classList.add('ql-formats');
toolbar.appendChild(formats);
//设置inputContainer节点与fileInput节点的style是为了隐藏input节点,实现点击图标上传文件
let inputContainer = document.createElement('span');
inputContainer.style = 'position: relative;display: inline-block;overflow: hidden;';
//创建i节点,添加class,设置图标
let fileIcon = document.createElement('i');
fileIcon.classList.add('el-icon-document');
//创建input节点并设置相关属性
let fileInput = document.createElement('input');
fileInput.setAttribute('id', 'files');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('accept', '.pdf');
fileInput.style = 'position: absolute;right: 0px;top: 0px;opacity: 0;';
//添加change事件,其他HTML DOM事件请参阅:http://www.runoob.com/jsref/dom-obj-event.html
fileInput.addEventListener('change', async () => {
//做文件上传的操作
/**
* 这
* 里
* 都
* 是
* 代
* 码
*/
fileInput.value = null;//最后要将input选择的值置为null,要不然重复选择同一文件是不会触发此方法
}, false);
formats.appendChild(inputContainer);
inputContainer.appendChild(fileIcon);
inputContainer.appendChild(fileInput);
},
data () {
return {
content: ``,//quill-editor的内容
editorOption: {
modules: {
toolbar: {//quill-editor的工具栏配置
container: [
['bold', 'italic', 'underline']
]
}
}
},
fileList: []
};
},
methods: {
handleBeforeRemove (file, fileList) {
//做删除确认操作
/**
* 这
* 里
* 都
* 是
* 代
* 码
*/
return false;//删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止上传。
}
},
computed: {
editor () {
return this.$refs.myQuillEditor.quill;
}
}
};
</script>
<style scoped lang="scss">
.my-container {
padding: 20px;
.my-quill {
margin: 16px 0 25px;
}
//更改组件里的样式需要这样加 /deep/
.my-quill /deep/ .ql-toolbar {
background-color: $border-primary-color;
border-radius: 8px 8px 0 0;
}
.my-quill /deep/ .ql-container {
border-radius: 0 0 8px 8px;
height: 250px;
}
.my-quill /deep/ .ql-editor {
font-size: 16px;
}
}
</style>