forked from zhongyidian/super_video
120 lines
2.8 KiB
Vue
120 lines
2.8 KiB
Vue
<template>
|
|
<div class="module-switcher">
|
|
<ModuleButton
|
|
v-for="module in moduleConfigs"
|
|
:key="module.type"
|
|
:module="module"
|
|
:is-selected="selectedModule === module.type"
|
|
@click="selectModule(module.type)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import { IMAGE_PATHS } from '@/utils'
|
|
import ModuleButton from './ModuleButton.vue'
|
|
|
|
// 定义模块类型
|
|
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 {
|
|
modelValue?: ModuleType
|
|
}
|
|
|
|
// Emits定义
|
|
interface Emits {
|
|
(e: 'update:modelValue', value: ModuleType): void
|
|
(e: 'change', value: ModuleType): void
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: 'vlog'
|
|
})
|
|
|
|
const emit = defineEmits<Emits>()
|
|
|
|
// 当前选中的模块
|
|
const selectedModule = ref<ModuleType>(props.modelValue)
|
|
|
|
// 模块配置
|
|
const moduleConfigs: ModuleConfig[] = [
|
|
{
|
|
type: 'vlog',
|
|
normalImage: IMAGE_PATHS.ACTION.MODULE_BTN1,
|
|
selectedImage: IMAGE_PATHS.ACTION.SELECTED_BTN1,
|
|
className: 'w-[1235px] h-[830px] left-1/2 -translate-x-1/2 -bottom-6',
|
|
maskConfig: {
|
|
className: 'left-10 bottom-[240px] w-[500px] h-[100px] -rotate-[15deg]',
|
|
position: 'left-10 bottom-[240px]',
|
|
size: 'w-[500px] h-[100px]',
|
|
transform: '-rotate-[15deg]'
|
|
}
|
|
},
|
|
{
|
|
type: 'film',
|
|
normalImage: IMAGE_PATHS.ACTION.MODULE_BTN2,
|
|
selectedImage: IMAGE_PATHS.ACTION.SELECTED_BTN2,
|
|
className: 'w-[1087px] h-[822px] left-[calc(50%+50px)] -translate-x-1/2 -bottom-4',
|
|
maskConfig: {
|
|
className: 'left-[16em] bottom-[50px] w-[500px] h-[100px]',
|
|
position: 'left-[16em] bottom-[50px]',
|
|
size: 'w-[500px] h-[100px]',
|
|
transform: ''
|
|
}
|
|
},
|
|
{
|
|
type: 'interview',
|
|
normalImage: IMAGE_PATHS.ACTION.MODULE_BTN3,
|
|
selectedImage: IMAGE_PATHS.ACTION.SELECTED_BTN3,
|
|
className: 'w-[943px] h-[822px] right-[320px] -bottom-4',
|
|
maskConfig: {
|
|
className: 'right-[0em] bottom-[200px] w-[420px] h-[100px] rotate-[15deg]',
|
|
position: 'right-[0em] bottom-[200px]',
|
|
size: 'w-[420px] h-[100px]',
|
|
transform: 'rotate-[15deg]'
|
|
}
|
|
}
|
|
]
|
|
|
|
// 选择模块
|
|
const selectModule = (module: ModuleType) => {
|
|
if (selectedModule.value === module) return
|
|
|
|
selectedModule.value = module
|
|
emit('update:modelValue', module)
|
|
emit('change', module)
|
|
}
|
|
|
|
// 监听外部值变化
|
|
watch(
|
|
() => props.modelValue,
|
|
newValue => {
|
|
selectedModule.value = newValue
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.module-switcher {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 1000px;
|
|
}
|
|
</style>
|