de-net/src/view/iframe/publish-tips/publish-tips.vue

<template>
    <div class="tips-wrapper">
        <div class="top">
            <img src="@/assets/svg/icon-bells.svg" class="icon-bells">
            <div class="text-wrapper">
                <div>
                    Do not delete the
                </div>
                <div>
                    <span>#DeNet</span>and<span> Giveaway link</span>
                    otherwise the giveaway will not be available
                </div>
            </div>
        </div>
        <div class="copy-btn" 
            :data-clipboard-text="strContent" 
            @click="copyToken">Copy giveaways link</div>
    </div>
</template>

<script setup>
/* eslint-disable */
import { onMounted, ref } from "vue";
import { ElMessage } from 'element-plus'
import { getChromeStorage } from '@/uilts/chromeExtension.js'

let ClipboardJS = require('clipboard');

let strContent = ref('');

const copyToken = async () => {
    let publishData = await getChromeStorage('publishData');
    strContent.value = publishData.srcContent;
    var clipboard = new ClipboardJS('.copy-btn');
    clipboard.on('success', function (e) {
        // ElMessage({
        //     message: 'copy success',
        //     grouping: true,
        //     type: 'success',
        //     offset: -16,
        //     appendTo: document.body

        // })
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function (e) {
        // ElMessage({
        //     message: 'copy error',
        //     grouping: true,
        //     type: 'error',
        //     offset: -16
        // })
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
}


onMounted(() => {
}) 

</script>

<style scoped lang="scss">
.tips-wrapper {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 15px;
    .top {
        display: flex;

        .icon-bells {
            width: 30px;
            height: 30px;
            margin-right: 8px;
        }

        .text-wrapper {
            font-weight: 500;
            font-size: 14px;

            span {
                color: red;
            }
        }
    }

    .copy-btn {
        margin-top: 20px;
        background: rgba(56, 154, 255, 0.01);
        border: 1px solid #000000;
        border-radius: 100px;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 33px;
        cursor: pointer;
    }
}
</style>