复制小弹框-七科互联

文章最后更新时间：2024-11-29 11:09:53某些文章具有时效性，若有错误或已失效，请在下方留言或联系 七科互联 。

在数字世界里，小弹框虽不起眼却作用非凡。它如灵动的精灵，随时可能出现，承载着信息传递、交互引导等多样使命。下面就一同深入探索小弹框的奇妙用法，开启这一独特的功能之旅。

效果展示

代码

Vue代码

function vue_style(){?>
    <script src="vue.min.js文件路径"></script>
    <script src="index.js文件路径"></script>
    <link rel="stylesheet" href="index.css文件路径" rel="external nofollow" >
<?php }add_action('wp_head', 'vue_style');

vue.zip

下载

zip文件

277.8K

复制小弹框代码

document.addEventListener("copy", function (e) {
    const selection = window.getSelection ? window.getSelection() : document.selection.createRange().text;
    const target = e.target;

    if (target.closest('.article-content') && selection.toString() !== '') {
        new Vue({
            data: function () {
                this.$notify({
                    title: "叮！复制成功",
                    message: "若要转载请务必保留原文链接！谢谢~",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: true,
                    type: "success"
                });
                return { visible: false };
            }
        });
    } else if (selection.toString() === '') {
        new Vue({
            data: function () {
                this.$notify({
                    title: "咦？复制失败",
                    message: "啊噢...你没还没选择内容呢！",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: true,
                    type: "success"
                });
                return { visible: false };
            }
        });
    }
});