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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

2.向外暴露一个open方法

const open = (row:any) => {
     showDrawer.value = true 
  }
}
1
2
3
4

defineExpose({
    open
})
1
2
3
4

3.引入组件到其他页面

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

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

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

const articleEdit = ref()
//点击发布文章
const articlePublish = () => {
    // drawer.value = true
    articleEdit.value.open({})
}
//点击编辑文章
const onEditArticle = (row:string) => {
  console.log(row)
  articleEdit.value.open({})
}
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8
9
10
11

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

5.引入富文本编辑器

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

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

组测局部组件

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

页面使用

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

1
2
3
4
5
6
7
8
9