4dkankan_bim/src/components/form/medias/index.vue

<template>
    <div class="medias">
        <ul>
            <li @click="onMediaChange('image')"><span class="checkbox" :class="{ checked: media == 'image' }"></span><i class="iconfont icon-pic"></i></li>
            <li @click="onMediaChange('video')"><span class="checkbox" :class="{ checked: media == 'video' }"></span><i class="iconfont icon-video"></i></li>
            <li @click="onMediaChange('audio')"><span class="checkbox" :class="{ checked: media == 'audio' }"></span><i class="iconfont icon-music"></i></li>
            <li @click="onMediaChange('link')"><span class="checkbox" :class="{ checked: media == 'link' }"></span><i class="iconfont icon-web"></i></li>
        </ul>
        <div class="control">
            <component :is="component" @tips="onTips"></component>
            <Toast v-if="tips" type="error" :content="tips" :close="() => (tips = null)" />
        </div>
    </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import Toast from '@/components/dialog/Toast'
import Image from './Image.vue'
import Video from './Video.vue'
import Audio from './Audio.vue'
import Link from './Link.vue'
const tips = ref(null)
const media = ref('image')
const component = computed(() => {
    switch (media.value) {
        case 'image':
            return Image
        case 'video':
            return Video
        case 'audio':
            return Audio
        case 'link':
            return Link
    }
})
const onTips = msg=> {
    tips.value = msg
}
const onMediaChange = type => {
    media.value = type
}
</script>
<style lang="scss" scoped>
.medias {
    ul,
    li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul {
        display: flex;
    }
    li {
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-right: 30px;
        color: #969595;
    }
    .control {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        width: 100%;
        height: 200px;
        margin: 14px 0;
        overflow: hidden;
        position: relative;
    }
}
.checkbox {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: solid 1px #666;
    margin-right: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    &.checked {
        border-color: #0076f6;
        &::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #0076f6;
        }
    }
}
</style>