4dkankan_bim/src/components/header/CopyLink.vue

<template>
    <Teleport to="body">
        <div class="login-layer">
            <div class="login-box">
                <header>
                    <h4>{{ $t('header.shareLink') }}</h4>
                    <span class="close" @click="emits('close')"><i class="iconfont icon-close"></i></span>
                </header>
                <main>
                    <input readonly v-model="shareURL" />
                </main>
                <footer>
                    <button @click="emits('close')">{{ $t('common.cancel') }}</button>
                    <button type="submit" ref="copy" :data-clipboard-text="shareURL">{{$t('header.copyLink')}}</button>
                </footer>
            </div>
        </div>
    </Teleport>
</template>
<script setup>
import ClipboardJS from 'clipboard'
import { ref, onMounted } from 'vue'
import Toast from '@/components/dialog/Toast'
const emits = defineEmits(['close', 'done'])
const shareURL = ref(window.location.href.replace('&split', '').replace('&adjust', ''))
const showToast = ref(false)
const copy = ref(null)
onMounted(() => {
    var clipboard = new ClipboardJS(copy.value)
    clipboard.on('success', function (e) {
        e.clearSelection()
        showToast.value = true
        emits('done')
    })
})
</script>
<style lang="scss" scoped>
.login-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-box {
    position: absolute;
    width: 400px;
    background: rgba(27, 27, 28, 0.8);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #000000;
    backdrop-filter: blur(4px);
    color: #fff;
    header {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        h4 {
            font-size: 16px;
            font-weight: 400;
            margin: 0;
            padding: 0;
        }
        .close {
            cursor: pointer;
            i {
                font-size: 14px;
            }
        }
    }
    main {
        padding: 40px 20px;
        border-top: solid 1px rgba(255, 255, 255, 0.16);
        border-bottom: solid 1px rgba(255, 255, 255, 0.16);
        input {
            color: #fff;
            height: 34px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px 4px 4px 4px;
            border: none;
            outline: none;
            width: 100%;
            padding: 0 7px;
        }
    }
    footer {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        button {
            cursor: pointer;
            color: #0076f6;
            width: 105px;
            height: 34px;
            border: 1px solid #0076f6;
            margin-left: 20px;
            border-radius: 4px;
            background: transparent;
            &[type='submit'] {
                color: #fff;
                background: #0076f6;
            }
        }
    }
}
</style>