HTML点击复制,clipboardjs+sweetalert2

HTML点击复制,clipboardjs+sweetalert2

  • 正文概述
  • clipboardjs

    一个轻量级复制剪切插件,因clipboardjs没有使用任何框架,单独使用的话没任何提示,如果使用alert() 方法做为提示,不仅麻烦还非常丑陋。

    sweetalert2

    美观可定制的弹出层,与clipboardjs结合可实现漂亮的复制剪贴提示弹出框,就像RiPro的复制功能。sweetalert2不仅可用作提示使用,还有更多交互功能,目前RiPro使用的弹出层都是sweetalert2。不过RiPro近期会有大更新,不知道还不会继续延用sweetalert2。

    集成到WordPress后台

    # 简单示例,注意:以下是以 子主题 目录为例。
    function admincopy() {
        wp_enqueue_style('sweetalert2', get_stylesheet_directory_uri() . '/assets/css/sweetalert2.min.css', array(), '', 'all');
    	wp_enqueue_script( 'sweetalert2', get_stylesheet_directory_uri() . '/assets/js/plugins/sweetalert2.min.js', array(), '', true);
    	wp_enqueue_script( 'clipboard', get_stylesheet_directory_uri() . '/assets/js/clipboard.min.js', array(), '', true);
    }
    add_action( 'admin_enqueue_scripts', 'admincopy' );
    
    # HTML CDN
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    

    sweetalert2如需自定义样式就需要引入sweetalert2.min.js和sweetalert2.min.css(暗黑风格sweetalert2.dark.css),如果不需要自定义样式直接使用CDN的JS就行了,不需要额外的CSS。

    HTML

    <button class="btn" data-clipboard-text="需要复制的内容">点击复制</button>
    

    实例化脚本

    钻石价 8 折 永久钻石免费

    已有0人支付

    纯净子主题,干净整洁,独立后台,集成自助广告系统。
    主题兽 » HTML点击复制,clipboardjs+sweetalert2

    发表评论