75 lines
2.4 KiB
Vue
75 lines
2.4 KiB
Vue
<!-- 视频播放工具栏 -->
|
|
<template>
|
|
<div class="live-player-tools">
|
|
<div class="direction">
|
|
<div
|
|
class="direction-item up"
|
|
@mousedown="emit('onMouseDown', 'UP')"
|
|
@mouseup="emit('onMouseUp', 'UP')"
|
|
>
|
|
<div class="direction-icon">
|
|
<AIcon type="CaretUpOutlined" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="direction-item right"
|
|
@mousedown="emit('onMouseDown', 'RIGHT')"
|
|
@mouseup="emit('onMouseUp', 'RIGHT')"
|
|
>
|
|
<div class="direction-icon">
|
|
<AIcon type="CaretRightOutlined" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="direction-item left"
|
|
@mousedown="emit('onMouseDown', 'LEFT')"
|
|
@mouseup="emit('onMouseUp', 'LEFT')"
|
|
>
|
|
<div class="direction-icon">
|
|
<AIcon type="CaretLeftOutlined" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="direction-item down"
|
|
@mousedown="emit('onMouseDown', 'DOWN')"
|
|
@mouseup="emit('onMouseUp', 'DOWN')"
|
|
>
|
|
<div class="direction-icon">
|
|
<AIcon type="CaretDownOutlined" />
|
|
</div>
|
|
</div>
|
|
<div class="direction-audio">
|
|
<!-- <AIcon type="AudioOutlined" /> -->
|
|
</div>
|
|
</div>
|
|
<div class="zoom">
|
|
<div
|
|
class="zoom-item zoom-in"
|
|
@mousedown="emit('onMouseDown', 'ZOOM_IN')"
|
|
@mouseup="emit('onMouseUp', 'ZOOM_IN')"
|
|
>
|
|
<AIcon type="PlusOutlined" />
|
|
</div>
|
|
<div
|
|
class="zoom-item zoom-out"
|
|
@mousedown="emit('onMouseDown', 'ZOOM_OUT')"
|
|
@mouseup="emit('onMouseUp', 'ZOOM_OUT')"
|
|
>
|
|
<AIcon type="MinusOutlined" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Emits = {
|
|
(e: 'onMouseDown', type: string): void;
|
|
(e: 'onMouseUp', type: string): void;
|
|
};
|
|
const emit = defineEmits<Emits>();
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import './mediaTool.less';
|
|
</style>
|