forked from zhongyidian/super_video
80 lines
1.4 KiB
Vue
80 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
:style="{ backgroundImage: getBackgroundImage(currentImage) }"
|
|
:class="['module-btn', module.className, { selected: isSelected }]"
|
|
>
|
|
<div :class="['btn-mask', module.maskConfig.className]" @click="$emit('click')"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { getBackgroundImage } from '@/utils'
|
|
|
|
// 定义模块类型
|
|
type ModuleType = 'vlog' | 'film' | 'interview'
|
|
|
|
// 模块配置接口
|
|
interface ModuleConfig {
|
|
type: ModuleType
|
|
normalImage: string
|
|
selectedImage: string
|
|
className: string
|
|
maskConfig: {
|
|
className: string
|
|
position: string
|
|
size: string
|
|
transform: string
|
|
}
|
|
}
|
|
|
|
// Props定义
|
|
interface Props {
|
|
module: ModuleConfig
|
|
isSelected: boolean
|
|
}
|
|
|
|
// Emits定义
|
|
interface Emits {
|
|
(e: 'click'): void
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
defineEmits<Emits>()
|
|
|
|
// 计算当前显示的图片
|
|
const currentImage = computed(() => {
|
|
return props.isSelected ? props.module.selectedImage : props.module.normalImage
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.module-btn {
|
|
position: absolute;
|
|
transition:
|
|
transform 0.2s ease,
|
|
z-index 0.2s ease;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.btn-mask {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.module-btn:hover {
|
|
z-index: 10;
|
|
}
|
|
|
|
.module-btn:active {
|
|
/* transform: scale(0.95); */
|
|
}
|
|
|
|
/* 确保选中的按钮在最上层 */
|
|
.module-btn.selected {
|
|
z-index: 20;
|
|
}
|
|
</style>
|