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

<template>
    <div class="media" v-show="url">
        <iframe v-if="url" :src="url" frameborder="0"></iframe>
        <div v-if="isEdit" class="delete" @click.stop="onDelete"><i class="iconfont icon-delete"></i></div>
        <div class="link" v-if="isEdit">{{ url }}</div>
    </div>
    <div class="placeholder" v-show="url == null">
        <div class="icon">
            <span>{{ $t('components.linkView') }}</span>
        </div>
        <div class="link">
            <input type="text" placeholder="https://" v-model.trim="href" />
            <div class="save" :class="{ disabled: !href }" @click="onConfirm"><i class="iconfont icon-checkbox1"></i></div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, inject, computed } from 'vue'
const emits = defineEmits(['tips'])
const notify = inject('notify')
const isEdit = inject('isEdit')
const url = ref(null)
const href = ref('')
const onDelete = () => {
    url.value = null
    notify.value.media['link'] = []
}
const onConfirm = () => {
    if (href.value) {
        url.value = 'https://' + href.value.replace(/http(s?):\/\//, '')
        href.value = ''
    }

    notify.value.media['link'] = [{ src: url.value }]
}

onMounted(() => {
    url.value = notify.value.media?.link && notify.value.media.link[0] ? notify.value.media.link[0].src : null
})
</script>
<style lang="scss" scoped>
.placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        span {
            margin-top: 10px;
        }
    }
    .tips {
        font-size: 12px;
        padding: 10px;
        position: absolute;
        bottom: 0;
        width: 100%;
        color: rgba(255, 255, 255, 0.3);
    }
    .link {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 32px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000 200%);
        border-radius: 0 0 4px 4px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        .save {
            cursor: pointer;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: hsla(0, 0%, 100%, 0.7);
            color: rgba(0, 0, 0, 0.6);
            margin: 0 8px;
            i {
                font-size: 16px;
            }
        }
        input {
            width: 100%;
            height: 100%;
            color: #fff;
            font-size: 14px;
            padding-left: 10px;
        }
    }
}
.media {
    width: 100%;
    height: 100%;
    iframe {
        width: 100%;
        height: 100%;
    }
    .link {
        padding: 0 12px;
        font-size: 14px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 32px;
        line-height: 32px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), #000 200%) !important;
        border-radius: 0 0 4px 4px;
        z-index: 10;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .delete {
        cursor: pointer;
        position: absolute;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>