【wordpress】复制小弹框

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

效果展示

代码

Vue代码

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

复制小弹框代码

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 };
            }
        });
    }
});