案例:
ps: 视频存放在静态文件夹里面
public文件夹:一般用于存放一些静态资源文件,例如图片,视频,音频等资源文件。需要特别注意的是webpack在进行打包的时候,会将public中的所有静态资源原封不动的进行打包
代码:
<template>
<div class="schematicDiagramIndex">
<el-container>
<el-aside width="20rem">
<!-- <h4 style="font-size: 18px">视频演示</h4>-->
<div style="height: 100%;overflow-y: scroll">
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText"
>
</el-input>
<el-tree
class="filter-tree"
:data="CompanyLeftData"
:props="defaultProps"
default-expand-all
:expand-on-click-node="false"
:default-checked-keys="[1]"
highlight-current
node-key="value"
@node-click="handleNodeClick"
:filter-node-method="filterNode"
ref="treeList"
:height="heights"
>
</el-tree>
</div>
</el-aside>
<!-- :height="heights"-->
<el-divider direction="vertical" style="border: 1px solid #ccc; }" ></el-divider>
<el-main>
<!-- 视频 -->
<video
id="video1"
controls
class="video1"
loop="loop"
ref="video"
:height="heights"
>
<source :src="video" type="video/mp4" />
您的浏览器不支持 HTML5 video 标签。
</video>
</el-main>
</el-container>
</div>
</template>
<script>
export default {
name: 'schematicDiagramIndex',
data () {
return {
defaultProps: {
children: "children",
label: "label",
id: "ID",
},
CompanyLeftData:[
{
value: '1',
label: '油泵车',
children: [
{
value: '1-1',
label: '双系统独立自循环',
},
{
value: '1-2',
label: '箱体组成',
},
{
value: '1-3',
label: '电气系统组成',
},
{
value: '1-4',
label: '双系统合流自循环',
},
{
value: '1-5',
label: '液压系统排气',
},
{
value: '1-6',
label: '液压系统组成',
},
{
value: '1-7',
label: '动力系统组成',
},
{
value: '1-8',
label: '油液固体颗粒污染自检和取样检测',
},
{
value: '1-9',
label: '双系统独立输出',
},
{
value: '1-10',
label: '双系统合流输出',
},
{
value: '1-11',
label: '双系统合流输出',
},
],
},
{
value: '2',
label: '电源车',
children: [
{
value: '2-1',
label: '',
},
],
},
],
filterText:"",
video:"",
heights:"",//高度
}
},
created() {
},mounted() {
this.$nextTick(() => {
this.$refs.treeList.$el.getBoundingClientRect().top; //表格距离浏览器的高度
// this.$refs.video.$el.getBoundingClientRect().top; //表格距离浏览器的高度
// 根据浏览器高度设置初始高度
this.heights =
window.innerHeight - this.$refs.treeList.$el.offsetTop - 150 ;
// 监听浏览器高度变化,修改表格高度
window.onresize = () => {
this.heights =
window.innerHeight - this.$refs.treeList.$el.offsetTop - 150 ;
};
console.log(this.heights, 1);
});
this.setCurrentKeyData()
},
methods: {
//进行切换数据(点击事件)
handleNodeClick(data, checked) {
this.$refs.video.load()
if (checked) {
//进行勾选的数据
this.$refs.treeList.setCheckedNodes([data]);
this.video="/static/oil-"+data.value+".mp4"
}
},
//进行模糊查询
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
// 默认选中
setCurrentKeyData() {
this.$nextTick(() => {
this.$refs.treeList &&
this.$refs.treeList.setCurrentKey(this.CompanyLeftData[0].children[0].value);
this.handleNodeClick(this.CompanyLeftData[0].children[0], true);
});
},
},
computed: {},
watch: {
filterText(val) {
this.$refs.treeList.filter(val);
}
},
}
</script>
<style scoped>
.schematicDiagramIndex{
width: 100%;
/*height: 100%;*/
/*height: 45rem ;*/
}
.video1{
width: 100%;
/*height: 85%;*/
}
::v-deep .el-tree-node__content {
color: black;
font-size: 14px;
font-weight: 400;
margin: 5px;
}
/*::v-deep .el-input__wrapper {*/
/* background-color: transparent !important;*/
/*}*/
::v-deep .el-tree {
background-color: transparent;
--el-tree-node-hover-bg-color: #b5b7b7;
margin-top: 20px;
padding-top: 10px;
padding-bottom: 10px;
/*background: url("@/assets/imgList/memuBG.png") no-repeat;*/
background-size: 100% 100%;
}
::v-deep
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
background-color: #1a518c;
color: #fcfbfb;
}
.filter-tree {
padding-top: 1%;
/*height: 44rem;*/
/*height: 100%;*/
}
</style>
参考:HTML video autoplay 属性 | 菜鸟教程