实现文章发布

最新推荐文章于 2023-05-10 08:39:01 发布

星期天!

最新推荐文章于 2023-05-10 08:39:01 发布

阅读量1.2k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_49431241/article/details/109478046

版权

实现文章发布

https://element.eleme.cn/2.13/#/zh-CN/component/installati

1 在添加组件配置路由

在这里插入图片描述

2 组件制作

2.1 使用根据页面的内用删除多余的代码

<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

2.2使用 Card 卡片文本框单选框富文本框都是在 Card 卡片的结构里

<el-card class="box-card">

</el-card>

在data 中定义一个对象要根据文档要收集的数据

在这里插入图片描述

**添加按钮绑定点击事件 **

在这里插入图片描述

2.3 使用文本框在 Form 表单截取需要的代码

<el-form-item label="标题:">
    <el-input v-model="postlist.title"></el-input>
</el-form-item>

在这里插入图片描述

2.4 使用单选按钮

  <el-form-item label="类型">
          <el-radio-group v-model="postlist.type">
            <el-radio :label="1">文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>

在这里插入图片描述

2.5 富文本框组件的添加

下载 npm install vue-word-editor --save
地址 https://github.com/hsian/vue-word-editor

引入组件并注册

引入
在这里插入图片描述
注册

在富文本卡框中使用

在这里插入图片描述

在data 中添加必要的配置

data(){
  return {
    config: {
      // 上传图片的配置
      uploadImage: {
        url: "http://localhost:3000/upload",
        name: "file",
        // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)
        }
      },
  	 
      // 上传视频的配置
      uploadVideo: {
        url: "http://localhost:3000/upload",
        name: "file",
        uploadSuccess(res, insert){
          insert("http://localhost:3000" + res.data.url)
        }
      }
    }
  }

根据页面需要修改后

在这里插入图片描述

2.6 添加上传 Upload 上传

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

需要处理的

在这里插入图片描述

action

在这里插入图片描述

file-list

在这里插入图片描述

headers

在这里插入图片描述

on-success

在这里插入图片描述

2.7 添加封面上传 Upload 上传照片墙

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

在这里插入图片描述