Video.vue 。视频列表
- 使用了el-card
<template>
<div style="padding: 10px">
<el-card>
<div v-for="item in videos" :key="item.id" style="margin: 10px 0; padding: 10px 0; color: #666; border-bottom: 1px dashed #ccc">
<span style="font-size: 18px; cursor: pointer" class="item" @click="detail(item.id)">{{ item.name }}</span>
<span style="float: right; font-size: 12px; margin-top: 10px">文件大小：{{ item.size }} kb</span>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "Video",
data() {
return {
videos: []
}
},
created() {
this.request("/echarts/file/front/all").then(res => {
console.log(res.data)
this.videos = res.data.filter(v => v.type === 'mp4')
})
},
methods: {
detail(id) {
this.$router.push({path: "/front/videoDetail", query: {id: id}})
}
}
}
</script>
<style scoped>
</style>
VideoDetail.vue。 视频播放
- 使用了vue-video-player
<template>
<div>
<video-player class="vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@loadeddata="onPlayerLoadeddata($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)">
</video-player>
</div>
</template>
<script>
import 'video.js/dist/video-js.css'
import videoPlayer from "vue-video-player/src/player";
export default {
name: "VideoDetail",
components: {
videoPlayer
},
data() {
return {
playerOptions: {
height: '360',
autoplay: true,// 如果为true,浏览器准备好时开始回放。
muted: true,// 默认情况下将会消除任何音频。
playbackRates: [0.7, 1.0, 1.5, 2.0],// 可选的播放速度
loop: false, // 是否视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "video/mp4",
// mp4
src: "http://vjs.zencdn.net/v/oceans.mp4",
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true, // 当前时间和持续时间的分隔符
durationDisplay: true, // 显示持续时间
remainingTimeDisplay: true, // 是否显示剩余时间功能
fullscreenToggle: true // 是否显示全屏按钮
},
poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
}
}
},
created() {
let id = this.$route.query.id
this.request("/file/detail/" + id).then(res => {
console.log(res.data)
// this.video = res.data
this.playerOptions.sources[0].src = res.data.url
// this.playerOptions.sources[0].src = "http://vjs.zencdn.net/v/oceans.mp4"
})
},
methods: {
// listen event
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
onPlayerEnded(player) {
// console.log('player ended!', player)
},
onPlayerLoadeddata(player) {
// console.log('player Loadeddata!', player)
},
onPlayerWaiting(player) {
// console.log('player Waiting!', player)
},
onPlayerPlaying(player) {
// console.log('player Playing!', player)
},
onPlayerTimeupdate(player) {
// console.log('player Timeupdate!', player.currentTime())
},
onPlayerCanplay(player) {
// console.log('player Canplay!', player)
},
onPlayerCanplaythrough(player) {
// console.log('player Canplaythrough!', player)
},
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
// seek to 10s
console.log('example player 1 readied', player)
player.currentTime(10)
// console.log('example 01: the player is readied', player)
}
}
}
</script>
<style scoped>
</style>
Article.vue。文章管理
- 使用了el-分页
<template>
<div>
<div style="margin-top: 10px">
<el-input style="width: 300px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
<el-button class="ml-5" type="primary" @click="load" size="small">搜索</el-button>
<el-button type="warning" @click="reset" size="small">重置</el-button>
</div>
<div style="margin: 10px 0">
<div style="border-bottom: 1px dashed #ccc; padding: 10px 0px" v-for="item in tableData" :key="item.id">
<div @click="$router.push('/front/articleDetail?id=' + item.id)"
style="font-size: 20px; color: #3F5EFB; cursor: pointer"
>{{ item.name }}</div>
<div style="font-size: 14px; margin-top: 15px">
<i class="el-icon-user-solid"></i><span>{{ item.user }}</span>
<i class="el-icon-time" style="margin-left: 10px"></i><span>{{ item.time }}</span>
</div>
</div>
</div>
<div >
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[2, 5, 10, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "Article",
data() {
return {
tableData: [],
pageNum: 1,
pageSize: 10,
total: 0,
name: "",
}
},
created() {
this.load()
},
methods: {
handleSizeChange(pageSize) {
console.log(pageSize)
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) {
console.log(pageNum)
this.pageNum = pageNum
this.load()
},
reset() {
this.name = ""
this.load()
},
load() {
this.request.get("/article/page", {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.name,
}
}).then(res => {
this.tableData = res.data.records
this.total = res.data.total
})
},
}
}
</script>
<style scoped>
</style>
ArticleDetail.vue 。 文章详情
- 使用了mavon-editor
- 使用div和span进行布局
- 使用border-bottom添加分割线，padding来远离分割线
- 使用了flex，利用flex: 1、text-align来右对齐
- 使用了el-dialog
<template>
<div>
<div style="margin: 20px 0;">
<div style="font-size: 20px; color: #3F5EFB;">{{ article.name }}</div>
<div style="font-size: 14px;margin-top: 10px">
<i class="el-icon-user-solid"></i> <span>{{ article.user }}</span>
<i class="el-icon-time" style="margin-left: 10px"></i> <span>{{ article.time }}</span>
</div>
</div>
<div>
<mavon-editor
class="md"
:value="article.content"
:subfield="false"
:defaultOpen="'preview'"
:toolbarsFlag="false"
:editable="false"
:scrollStyle="true"
:ishljs="true"
/>
</div>
<div>
<div style="margin: 10px 0">
<div style="border-bottom: 1px solid orangered;padding: 10px 0;" >评论</div>
<div style="padding: 10px 0"><el-input type="textarea" v-model="commentForm.content"></el-input></div>
<div style="text-align: right">
<el-button type="primary" size="small" @click="save">评论</el-button>
</div>
</div>
<!-- 评论列表-->
<div>
<div v-for="item in comments" :key="item.id" style="border-bottom: 1px solid #ccc; padding: 10px 0">
<div style="display: flex; ">
<div style="width: 100px; text-align: center">
<el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%;"></el-image>
</div>
<div style="flex: 1;padding: 5px 0;font-size: 14px; line-height: 25px">
<b>{{ item.nickname }}：</b>
<span>{{ item.content }}</span>
<div style="display: flex;">
<div>
<i class="el-icon-time"></i><span style="margin-left: 5px">{{ item.time }}</span>
</div>
<div style="flex: 1;text-align: right">
<el-button type="text" @click="handleReply(item.id)">回复</el-button>
<el-button type="text" @click="del(item.id)" v-if="user.id === item.userId">删除</el-button>
</div>
</div>
</div>
</div>
<!-- 回复列表-->
<div v-if="item.children.length" style="padding-left: 200px;">
<div v-for="subItem in item.children" :key="subItem.id" style="background-color: #f0f0f0; padding: 10px">
<div>
<div>
<b style="color: #3a8ee6" v-if="subItem.pnickname">@{{ subItem.pnickname }}</b>
</div>
<div>
<b>{{ subItem.nickname }}：</b>
<span>{{ subItem.content }}</span>
</div>
<div style="display: flex;">
<span>
<i class="el-icon-time"></i><span>{{ subItem.time }}</span>
</span>
<span style="flex: 1; text-align: right">
<el-button type="text" @click="handleReply(subItem.id)">回复</el-button>
<el-button type="text" @click="del(subItem.id)" v-if="user.id === subItem.userId">删除</el-button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<el-dialog title="回复" :visible.sync="dialogFormVisible">
<el-form :model="commentForm">
<el-form-item label="回复内容" >
<el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "ArticleDetail",
data() {
return {
article: {},
commentForm: {},
comments: [],
user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
id: this.$route.query.id,
dialogFormVisible: false
}
},
created() {
this.load()
this.loadComment()
},
methods: {
save() {
if (!this.user.id) {
this.$message.warning("请登录后操作")
return
}
this.commentForm.articleId = this.id
if (this.commentForm.contentReply) {
this.commentForm.content = this.commentForm.contentReply
}
this.request.post("/comment", this.commentForm).then(res => {
if (res.code === '200') {
this.$message.success("评论成功")
this.commentForm = {} // 初始化评论对象内容
this.loadComment()
this.dialogFormVisible = false
} else {
this.$message.error(res.msg)
}
})
},
load() {
this.request.get("/article/" + this.id).then(res => {
this.article = res.data
})
},
loadComment() {
this.request.get("/comment/tree/" + this.id).then(res => {
this.comments = res.data
})
},
handleReply(pid) {
this.commentForm = { pid: pid }
this.dialogFormVisible = true
},
del(id) {
this.request.delete("/comment/" + id).then(res => {
if (res.code === '200') {
this.$message.success("删除成功")
this.loadComment()
} else {
this.$message.error("删除失败")
}
})
},
}
}
</script>
<style scoped>
</style>
扫一扫
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
