设为首页收藏本站

开启辅助访问

实现文章发布

您所在的位置：网站首页 › 网站文章分享代码怎么弄 › 实现文章发布

实现文章发布

2024-07-08 11:26| 来源: 网络整理| 查看: 265

实现文章发布 https://element.eleme.cn/2.13/#/zh-CN/component/installati 1 在添加组件配置路由

在这里插入图片描述

2 组件制作 2.1 使用根据页面的内用删除多余的代码首页活动管理活动列表活动详情 2.2使用 Card 卡片文本框单选框富文本框都是在 Card 卡片的结构里

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

2.4 使用单选按钮文章视频

在这里插入图片描述

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 上传点击上传只能上传jpg/png文件，且不超过500kb

需要处理的

在这里插入图片描述

action

在这里插入图片描述

file-list

在这里插入图片描述

headers

在这里插入图片描述

on-success

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

实现封面的预览

on-preview

在这里插入图片描述

在这里插入图片描述

文件超出提示

on-exceed

在这里插入图片描述

在这里插入图片描述

封面上传成功

on-success

在这里插入图片描述

在这里插入图片描述

移除封面的处理

on-remove

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

总结过程

配置路由

1 使用组件

2 添加面包屑 Breadcrumb 面包屑

3 添加卡片 Card 卡片

4 添加文本框 Form 表单

5 添加单选框 Radio 单选框

6 难点添加富文本框需要下载引入注册使用根据文档需要配置的我们所用到的组件，他可以实现文件的上传，但他并没有使用我们封装的axios ，而是内部自己封装了异步的请求操作，意味着不会经过我们的拦截器，需要使用组件内置的headers 来实现token 的传递

7 添加 Upload 上传

8 添加封面 Upload 上传

添加上传文件和封面上传都需要使用 headers 属性传递token

【本文地址】

公司简介

联系我们

CopyRight 2018-2019 实验室设备网版权所有