vue3--element-plus-抽屉文件上传和富文本编辑器

在Vue 3中使用Element Plus库中的<el-drawer>组件结合<el-upload>和<el-editor>（富文本编辑器），可以创建一个带有文件上传和富文本编辑功能的抽屉面板。以下是一个简单的示例：

<template>
  <el-button @click="drawerVisible = true">打开抽屉</el-button>
  <el-drawer
    title="上传和编辑"
    v-model="drawerVisible"
    :before-close="handleClose"
  >
    <el-upload
      class="upload-demo"
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :before-upload="beforeUpload"
      multiple
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <el-editor
      v-model="content"
      :onChange="handleChange"
      :onBlur="handleBlur"
      :onFocus="handleFocus"
      :onCreated="handleCreated"
    ></el-editor>
  </el-drawer>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
 
const drawerVisible = ref(false);
const content = ref('');
 
const handleClose = (done) => {
  ElMessageBox.confirm('确定关闭抽屉？')
    .then(() => {
      done();
    })
    .catch(() => {
      // 取消关闭
    });
};
 
const handlePreview = (file) => {
  console.log('Preview:', file);
};
 
const handleRemove = (file, fileList) => {
  console.log('Remove:', file, fileList);
};
 
const beforeRemove = (file, fileList) => {
  return ElMessageBox.confirm(`确定移除 ${file.name}？`);
};
 
const beforeUpload = (file) => {
  console.log('Uploading:', file);
  // 这里可以添加上传前的逻辑
};
 
const handleChange = (editor) => {
  console.log('Content changed:', editor.getContent());
};
 
const handleBlur = (editor) => {
  console.log('Editor blurred:', editor);
};
 
const handleFocus = (editor) => {
  console.log('Editor focused:', editor);
};
 
const handleCreated = (editor) => {
  console.log('Editor created:', editor);
};
</script>

在这个例子中，我们使用了<el-drawer>组件来创建一个可以通过按钮打开的抽屉面板。在抽屉内部，我们使用了<el-upload>组件来处理文件上传，并使用了<el-editor>组件来实现富文本编辑功能。通过v-model绑定，这些组件可以实现数据的双向绑定。

请确保您已经安装了element-plus和@element-plus/icons-vue库，并在您的项目中正确引入了它们。

注意：这个例子中的上传地址（action属性）是一个虚拟的API地址，实际应用中应该替换为您的后端上传接口。