【study】弹窗复制

<template>
    <el-dialog
        v-model="show"
        title="常用原生页面地址"
        width="500px"
    >
        <div
            v-for="item in list"
            :key="item.value"
            class="flex"
        >
            <el-button
                type="primary"
                size="small"
                style="margin: 10px"
                @click="copyTemplate(item.value)"
            >
                {{ item.text }}
            </el-button>
        </div>
    </el-modal>
</template>
<script>
import {
    ref, getCurrentInstance,
} from '@vue/composition-api';

export default {
    props: {
        list: {
            type: Array,
            default: () => ([]),
        },
    },
    setup(props, ctx) {
        const { proxy } = getCurrentInstance();
        const show = ref(false);

        const __popup = () => {
            show.value = true;
        };

        const copyTemplate = (data) => {
            // 创建input
            const input = window.document.createElement('input');
            // 赋值并设置不可见
            input.setAttribute('value', data);
            input.setAttribute('display', 'none');
            document.body.appendChild(input);
            input.select();

            try {
                if (document.execCommand('copy')) {
                    document.execCommand('copy');
                    proxy.$mc.message.success('复制成功');
                } else {
                    proxy.$mc.message.error('浏览器不支持复制功能');
                }
            } catch (e) {
                proxy.$mc.message.error(e || '复制失败');
            } finally {
                document.body.removeChild(input);
            }
        };


        return {
            __popup,
            show,
            copyTemplate,
        };
    },
};
</script>
<style lang="scss" scoped>
</style>