controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件
代码：
<template> <div class="schematicDiagramIndex"> <el-container> <el-header v-if="this.radiooCar==1"> <el-button @click="addOpen">新增</el-button> <el-button @click="updateOpen">编辑</el-button> <el-button @click="delOpen">删除</el-button> </el-header> <el-container> <!-- 左侧树 --> <el-aside width="20rem;height: 100%;"> <div style="height: 100%;overflow-y: scroll"> <el-input placeholder="输入关键字进行过滤" v-model="filterText" > </el-input> <el-tree :accordion="true" class="filter-tree" :data="CompanyLeftData" :props="defaultProps" :expand-on-click-node="false" :default-expanded-keys="[1]" highlight-current node-key="value" :default-expand-all="true" @node-click="handleNodeClick" :filter-node-method="filterNode" ref="treeList" :height="heights" > </el-tree> </div> </el-aside> <el-main v-loading="showVideo"> <!-- 视频 --> <div class="video1"> <!-- controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件 loop属性用于设置或返回视频结束时是否应该重新开始播放。 --> <video id="video1" controls="controls" loop="loop" ref="video" :height="heights" controlslist="nodownload " > <source :src="videoURL" type="video/mp4" /> 您的浏览器不支持 HTML5 video 标签。 </video> </div> </el-main> </el-container> </el-container> <!-- 车的弹框--> <el-dialog :title="title" v-model="dialogVisible" width="30%" :before-close="handleClose"> <!-- 表单--> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="上级节点" prop="ParentId"> <!-- <el-input v-model="ruleForm.ParentId" placeholder="请输入内容"></el-input>--> <el-select v-model="ruleForm.ParentId" placeholder="请选择"> <el-option v-for="item in ParentIdOptions" :key="item.ID" :label="item.Text" :value="item.ID"> </el-option> </el-select> </el-form-item> <el-form-item label="视频名称" prop="VideoName"> <el-input v-model="ruleForm.VideoName" placeholder="请输入内容"></el-input> </el-form-item> <el-form-item label="序号" prop="SortID"> <el-input min="0" v-model="ruleForm.SortID" placeholder="请输入内容" type="number" @input="changeInput(ruleForm.SortID)"></el-input> </el-form-item> <el-form-item label="上传视频" prop="pass"> <el-upload ref="videoUpload" class="upload-demo" action="#" multiple :limit="1" :on-change="handleChange" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" accept="video/*" :auto-upload="false" :on-exceed="handleExceedVisio" :file-list="fileList"> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </el-dialog> </div> </template> <script> export default { name: "schematicDiagramIndex", data() { return { //树形结构 defaultProps: { children: "Children", label: "Text", id: "ID", }, //左侧树形数据 CompanyLeftData: [], //油泵车 oldoil: { // value: "1", label: "油泵车", children: [ { value: "1-1", label: "操作部分", type: "YBC", children: [ { value: "1", label: "双系统独立自循环", type: "YBC", }, { value: "4", label: "双系统合流自循环", type: "YBC", }, { value: "5", label: "液压系统排气", type: "YBC", }, { value: "8", label: "油液固体颗粒污染自检和取样检测", type: "YBC", }, { value: "9", label: "双系统独立输出", type: "YBC", }, { value: "10", label: "双系统合流输出", type: "YBC", }, { value: "11", label: "加油软管内液压油自循环净化", type: "YBC", }, { value: "12", label: "为飞机补充加注液压油", type: "YBC", }, { value: "13", label: "液压油箱自加油", type: "YBC", }, { value: "14", label: "液压系统除水除气", type: "YBC", }, { value: "15", label: "操作界面", type: "YBC", }, ], }, { value: "1-2", label: "产品组成", type: "YBC", children: [ { value: "2", label: "箱体组成", type: "YBC", }, { value: "3", label: "电气系统组成", type: "YBC", }, { value: "6", label: "液压系统组成", type: "YBC", }, { value: "7", label: "动力系统组成", type: "YBC", }, ], }, { value: "1-3", label: "原理构图", type: "YBC", children: [ { value: "17", label: "清洗飞机液压系统油液原理", type: "YBC", }, { value: "18", label: "双系统独立输出对接保障原理", type: "YBC", }, { value: "19", label: "双系统合流并联输出对接保障原理", type: "YBC", }, { value: "20", label: "为飞机补充加注液压油原理", type: "YBC", }, { value: "21", label: "液压系统油箱自加油原理", type: "YBC", }, { value: "22", label: "液压系统自循环原理", type: "YBC", }, ], }, { value: "1-4", label: "功能用途", type: "YBC", children: [ { value: "16", label: "功能用途", type: "YBC", }, ], }, ], }, //电源车 PowerTruck: {}, filterText: "",//树形数据过滤字段 //视频地址 videoURL: "", heights: "", //高度 radiooCar: null, //车辆选择的类型 dialogVisible: false,//dialog弹出框控制显隐 dialogTitle: "",//dialog的标题提示 rules: { VideoName: [ {required: true, message: '请输入活动名称', trigger: 'blur'}, ], },//校验 ruleForm: {},//表单数据 fileList: [],//上传视频的数组 submitVideo: null, //父级下拉数据 ParentIdOptions: [], //选中左侧树数据 checkedLeftTreeData: null, //video loading showVideo:true, }; }, created() { this.init(); }, mounted() { this.$nextTick(() => { this.$refs.treeList.$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; }; }); }, methods: { //初始数据 init() { this.getCarData(); }, // 获取本地存储的车辆选择类型，判断是电源车还是油泵车 getCarData() { this.radiooCar = sessionStorage.getItem("radioCar"); this.getTreeData() }, // 获取左侧树结构 getTreeData() { //获取本地存储的选择的车型 调接口 let params = {EquipmentType: this.radiooCar} this.$WAPI.Ts_VideoGetTreeList(params).then((res) => { //赋值 this.CompanyLeftData = res.data.data //父级ID this.ParentIdOptions = res.data.data //默认选中展示 this.setCurrentKeyData(); }) }, //进行切换数据（点击事件） handleNodeClick(data, checked) { this.$refs.video.load(); if (checked) { //进行勾选的数据 this.$refs.treeList.setCheckedNodes([data]); //勾选的数据进行赋值保存 this.checkedLeftTreeData = data //获取视频url 传递后端参数 let param={ ID:data.ID } this.$WAPI.Ts_VideoGetVideoUrl(param).then((res) => { this.showVideo=false //赋值视频路径 this.$refs.video.src = res.data.data ? res.data.data.URL : "" }) } }, //进行模糊查询 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] ); this.handleNodeClick( this.CompanyLeftData[0].Children[0], true ); }); }, //#region 电源车 有新增、编辑、删除等功能 //新增打开dialog事件 addOpen() { this.dialogVisible = true this.title = "新增" this.ruleForm = {} this.fileList = [] }, //编辑 updateOpen() { this.dialogVisible = true this.title = "编辑" this.ruleForm = this.checkedLeftTreeData.Model const fileList = [] if (this.ruleForm.FileName !== null||this.ruleForm.FileUrl !== null){ fileList.push({ name: this.ruleForm.VideoName, url: this.ruleForm.FileUrl, }) } this.fileList=fileList }, //删除 delOpen() { //选中的参数 let param = { IDs: this.checkedLeftTreeData.ID } this.$WAPI.Ts_VideoDelete(param).then(res => { this.$message({ message: res.data.msg, type: "success", }); this.$refs.video.src = "" this.init() }) }, //dialog关闭事件 handleClose(done) { this.$confirm('确认关闭？') .then(_ => { done(); }) .catch(_ => { }); }, //提交数据 submitForm() { // 要从这个接口传递文件 我知道啊 this.dialogVisible = false const formData = new FormData(); //上级节点不选择就是0 this.ruleForm.ParentId = this.ruleForm.ParentId ? this.ruleForm.ParentId : 0 //赋值 this.ruleForm.ID !==undefined ? formData.append('ID', this.ruleForm.ID) :"" //ID formData.append('ParentId', this.ruleForm.ParentId) //父级节点 formData.append('VideoName', this.ruleForm.VideoName) //视频名称 formData.append('VideoType', this.radiooCar) //车辆类型 formData.append('SortID', this.ruleForm.SortID) //序号 formData.append('files', this.submitVideo) //序号 this.$WAPI.Ts_VideoOperation(formData).then((res) => { this.$message({ message: res.data.msg, type: "success", }); this.showVideo=false this.init() }) }, //清空表单 resetForm() { this.$refs.ruleForm.resetFields(); //清空文件 this.fileList=[] }, //#endregion //#region 上传视频 // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 beforeUpload(file) { const isVideo = file.type === 'video/mp4'; if (!isVideo) { this.$message.error('请上传视频文件'); } return isVideo; }, //文件上传成功时的钩子 onSuccess(response, file, fileList) { this.$message.success('视频上传成功'); // 处理上传成功后的逻辑，例如更新UI或者处理其他数据 }, //文件上传失败时的钩子 onError(err, file, fileList) { console.log(err, file) this.$message.error('视频上传失败'); // 处理上传失败后的逻辑 }, //改变 handleChange(file, fileLists) { //文件流 this.submitVideo = file.raw; //名称回显 this.ruleForm.VideoName = this.submitVideo.name.split(".")[0] }, //上传限制 handleExceedVisio() { this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传！`) }, //#endregion //正则表达 changeInput(value) { this.ruleForm.SortID = value.replace(/^[0]+[0-9]{1,}|[^\d]/g, ''); } }, computed: {}, watch: { filterText(val) { this.$refs.treeList.filter(val); }, }, }; </script> <style scoped> .schematicDiagramIndex { width: 100%; } .video1 { width: 100%; background: transparent; } ::v-deep .el-tree-node__content { color: black; font-size: 14px; font-weight: 400; margin: 5px; } ::v-deep .el-tree { background-color: transparent; --el-tree-node-hover-bg-color: #b5b7b7; margin-top: 20px; padding-top: 10px; padding-bottom: 10px; 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: 48rem; overflow: scroll; } </style>
