- 第1章 发贴功能之自定义编辑器开发
- 1-1 node版本升级至12.14.0
- 1-2 发贴页面需求分析
- 1-3 完成发贴页面样式&自定义select交互 d s
- 1-4 使用mixin混入优化图片验证码功能
- 1-6 自定义表情&transition过渡、父子通信
- 1-8 编辑器图片上传功能
- 1-9 编辑器添加链接功能(作业:自行完成引用、代码块插入样式)
- 1-10 优化编辑器组件间事件传递
- 1-11 指定光标位置插入自定义内容格式
- 1-12 完成编辑器预览之表情、链接、引用处理
- 1-13 完成代码块&预览功能,调试自定义编辑器
- 1-15 发贴请求表单检验
- 1-16 发贴内容使用localStorage本地缓存
- 1-17 发贴后端接口开发&前后端联调
- 1-18 dayjs使用扩展插件(国际化、取时间差)
- 第2章 帖子详情页面开发—需求、样式与自定义组件
- 第3章 帖子详情页面开发—评论点赞、回复
- 第4章 帖子详情页面开发—发贴编辑、收藏
- 第5章 个人中心之发帖、收藏、获取信息与联调
第1章 发贴功能之自定义编辑器开发
1-1 node版本升级至12.14.0
1-2 发贴页面需求分析
1-3 完成发贴页面样式&自定义select交互 d s
1-4 使用mixin混入优化图片验证码功能
1-6 自定义表情&transition过渡、父子通信
assets里有css/img/js文件夹
js文件夹内有face.js
import Face from './Face' // 这里的Face可以是vue或js
transition
v-leave、v-leave-to:是最终态
v-enter-active:中间态
1-8 编辑器图片上传功能
1-9 编辑器添加链接功能(作业:自行完成引用、代码块插入样式)
1-10 优化编辑器组件间事件传递
1-11 指定光标位置插入自定义内容格式
methods: {
// 计算光标的当前位置
getPos() {
let cursorPos = 0
let elem = document.getElementById('edit')
if (elem.selectionStart || elem.selectionStart === 0) {
cursorPos = elem.selectionStart
}
}
}