vue3-video-play视频组件的使用（二）01——实际使用 & el-select组件添加自定义图标-prefix和suffix

本文链接：https://blog.csdn.net/weixin_44867717/article/details/128212062
vue3-video-play视频组件的使用（二）01——实际使用 & el-select组件添加自定义图标-prefix和suffix

效果-视频列表
在这里插入图片描述
代码
index.vue
<template>
	<div class="module-box">
		<div class="big-view">
			<!-- 左侧视频 -->
			<vue3VideoPlay
				width="100%"
				height="510px"
				title="冰河世纪"
				:src="src2"
				:poster="options.poster"
				:autoPlay="true"
				:loop="true"
				:control="false"
				:muted="true"
			/>
			<div class="new-time">{{ newTime }}</div>
			<div class="view-query">
				<div class="query-item">
					<!-- 部门分类 -->
					<el-select v-model="packValue" class="m-2" placeholder="请选择等级" size="large">
                        <!-- el-select组件添加自定义图标 -->
						<template #prefix>
							<img src="@/assets/svg/pack/pack_icon_01.svg" alt="" />
						</template>
						<el-option v-for="item in packList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="query-item">
					<!-- 材料分类 -->
					<el-select v-model="kindValue" class="m-2" placeholder="请选择等级" size="large">
						<template #prefix>
							<img src="@/assets/svg/pack/pack_icon_02.svg" alt="" />
						</template>
						<el-option v-for="item in kindList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
		</div>
		<div class="small-view">
			<div class="small-view-item">
				<!-- 右侧视频1 -->
				<vue3VideoPlay
					width="100%"
					height="100%"
					title="钢铁侠"
					:src="src3"
					:poster="options.poster"
					:autoPlay="true"
					:loop="true"
					:control="false"
					:muted="true"
				/>
				<div class="new-time">{{ newTime }}</div>
			</div>
			<div class="small-view-item">
				<!-- 右侧视频2 -->
				<vue3VideoPlay
					width="100%"
					height="100%"
					title="钢铁侠"
					:src="src"
					:poster="options.poster"
					:autoPlay="true"
					:loop="true"
					:control="false"
					:muted="true"
				/>
				<div class="new-time">{{ newTime }}</div>
			</div>
			<div class="small-view-item">
				<!-- 右侧视频3 -->
				<vue3VideoPlay
					width="100%"
					height="100%"
					title="钢铁侠"
					:src="src1"
					:poster="options.poster"
					:autoPlay="true"
					:loop="true"
					:control="false"
					:muted="true"
				/>
				<div class="new-time">{{ newTime }}</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { dateFormat, FormatsEnums } from "@/utils/util";
import src from "@/assets/mp4/demo.mp4";
import src1 from "@/assets/mp4/1.mp4";
import src2 from "@/assets/mp4/2.mp4";
import src3 from "@/assets/mp4/3.mp4";

const options = reactive({
	src,
	// src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
	src1: "https://vd2.bdstatic.com/mda-mes7m97jdjkb45hm/sc/cae_h264_nowatermark/1622093563639460182/mda-mes7m97jdjkb45hm.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1668151987-0-0-bf903416b883c396b768abdf0d691cd9&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=0186965836&vid=12199996425232093876&abtest=104959_1-105568_2&klogid=0186965836",
	poster: "", //封面
	title: "冰河世纪",
	src2: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
	src4: "https://v.qq.com/x/page/o3145yipo73.html"
	// type: "m3u8" //视频类型
});
const packValue = ref("Option3");
const kindValue = ref("Option4");
// const viewTitle = ref(options.title);
const packList = [
	{
		value: "Option1",
		label: "园区洗煤厂区"
	},
	{
		value: "Option2",
		label: "办公室1号楼"
	},
	{
		value: "Option3",
		label: "部门分类"
	},
	{
		value: "Option4",
		label: "楼前广场"
	}
];
const kindList = [
	{
		value: "Option1",
		label: "调度室"
	},
	{
		value: "Option2",
		label: "主井区"
	},
	{
		value: "Option3",
		label: "运煤车辆出入口"
	},
	{
		value: "Option4",
		label: "材料分类"
	}
];
const newTime = ref();
// const onPlay = (ev: any) => {
// 	console.log("播放");
// };
// const onPause = (ev: any) => {
// 	console.log(ev, "暂停");
// };

// const onTimeupdate = (ev: any) => {
// 	console.log(ev, "时间更新");
// };
// const onCanplay = (ev: any) => {
// 	console.log(ev, "可以播放");
// };
const getTime = () => {
	setInterval(() => {
		newTime.value = dateFormat(new Date().getTime(), FormatsEnums.YMDHIS);
	}, 1000);
};
onMounted(() => {
	getTime();
});
</script>

<style lang="scss" scoped>
.module-box {
	height: 100%;
	background: #000000ff;
	box-sizing: border-box;
	padding: 12px;
	display: flex;
	// max-height: 510px;
	.big-view {
		height: 100%;
		width: 100%;
		flex: 10;
		margin-right: 12px;
		position: relative;
		.new-time {
			display: none;
			padding: 0 8px;
			height: 36px;
			border-radius: 4px;
			background: #000000ff;
			position: absolute;
			right: 12px;
			bottom: 12px;
			z-index: 999;
			color: #ffffffff;
			font-size: 20px;
			line-height: 36px;
			text-align: center;
		}
		.view-title {
			padding: 0 8px;
			height: 36px;
			border-radius: 4px;
			background: #000000ff;
			position: absolute;
			right: 12px;
			top: 12px;
			z-index: 999;
			color: #ffffffff;
			font-size: 20px;
			line-height: 36px;
			text-align: center;
		}
		.view-query {
			position: absolute;
			left: 12px;
			top: 12px;
			z-index: 999;
			display: flex;
			.query-item {
				background: #000000ff;
				width: 170px;
				margin-right: 12px;
				border-radius: 4px;
				font-size: 16px;
				overflow-x: hidden;
				img {
					width: 20px;
				}
			}
		}
	}
	.small-view {
		flex: 3;
		display: flex;
		flex-flow: column;
		.small-view-item {
			flex: 1;
			margin-bottom: 12px;
			position: relative;
			height: calc(100% / 3);
			.new-time {
				// width: 119px;
				display: none;
				padding: 0 4px;
				height: 18px;
				border-radius: 2px;
				background: #000000ff;
				position: absolute;
				right: 6px;
				top: 9px;
				z-index: 999;
				color: #ffffffff;
				font-size: 10px;
				line-height: 18px;
				text-align: center;
			}
		}
		.small-view-item:last-of-type {
			margin-bottom: 0;
		}
	}
}
.module-data {
	height: calc(100% - 60px);
}
</style>