封装抽屉组件+上传框预览图片+富文本编辑器【vue3+element-plus】-优快云博客

本文链接：https://blog.youkuaiyun.com/baekpcyyy/article/details/135147218

本文介绍了如何在Vue应用中使用ElementPlus的el-drawer组件创建一个可编辑文章的功能，包括表单元素、图片上传预览和富文本编辑器的集成。同时展示了如何通过ref暴露方法并从其他页面调用打开抽屉。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先写入组件的内容

<el-drawer 
    direction="rtl"
    size="40%"
     v-model="showDrawer"
    :title="formModel.id ? '编辑文章' : '添加文章'" 
    :with-header="true">
    <!-- 发表文章表单 -->
    <el-form :model="formModel" ref="formRef" label-width="100px">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="formModel.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="文章分类" prop="cate_id">
        <channel-select
          v-model="formModel.cate_id"
          width="100%"
        ></channel-select>
      </el-form-item>
      <el-form-item label="文章封面" prop="cover_img">
        <el-upload
    class="avatar-uploader"
    :auto-upload="false"
    :show-file-list="false"
    :on-change="onUploadFile"

  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <div class="editor">
            <quill-editor
    theme="snow"
    v-model:content="formModel.content"
    contentType="html"
  >
  </quill-editor>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">发布</el-button>
        <el-button type="info">草稿</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

2.向外暴露一个open方法

const open = (row:any) => {
     showDrawer.value = true 
  }
}


defineExpose({
    open
})

3.引入组件到其他页面

通过ref绑定引入的组件这样我们就可以用组件暴露的open方法

<drawer ref="articleEdit"></drawer>

在点击需要抽屉打开的时候我们调用open方法就可以让抽屉弹出

const articleEdit = ref()
//点击发布文章
const articlePublish = () => {
    // drawer.value = true
    articleEdit.value.open({})
}
//点击编辑文章
const onEditArticle = (row:string) => {
  console.log(row)
  articleEdit.value.open({})
}

4.图片上传框可以预览图片

此处需要关闭 element-plus 的自动上传, :auto-upload=“false”
不需要配置 action 等参数
只需要做前端的本地预览图片即可,无需在提交前上传图标
语法:URL.createObjectURL(…) 创建本地预览的地址,来预览

 <el-upload
    class="avatar-uploader"
    :auto-upload="false"
     //是否显示已上传文件列表
    :show-file-list="false"
    :on-change="onUploadFile"

  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>

const imageUrl = ref('')
const onUploadFile = ( uploadFile:any ) => {
     //本地预览图片
    imageUrl.value = URL.createObjectURL(uploadFile.raw)
    //储存
    formModel.value.cover_img = uploadFile.raw
}

5.引入富文本编辑器

官网地址：https://vueup.github.io/vue-quill/

npm install @vueup/vue-quill@latest --save

组测局部组件

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

页面使用

<div class="editor">
  <quill-editor
    theme="snow"
    v-model:content="formModel.content"
    contentType="html"
  >
  </quill-editor>
</div>