zoukankan      html  css  js  c++  java
  • 实现复制功能

      需求:实现点击复制按钮,复制对应文本。

      

      方法:可以通过npm下载"clipboard"包 (也可以引入外部文件)

      package.json

     "dependencies": {
        "clipboard": "^1.6.1"
      }

      js:

    var Clipboard = require('clipboard');

      html:

     <div class="clearfix">
    
                <table  class="table table-bordered table-striped table-center" style="margin-top: 20px;">
                    <thead>
                    <tr>
                        <th>渠道</th>
                        <th>批次</th>
                        <th>对应投放链接</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                <!--     {{selected}} -->
                    <tr ng-repeat="(index,item) in items" ng-if="items.length > 0">
                        <td ng-bind="item.channel_name"></td>
                        <td ng-bind='item.batch_name'></td>
                        <td ng-bind="item.url"></td>
                        <td>
                            <button class="btn btn-info btn-xs btn_index_{{index}}" ng-click="copy(index)" data-clipboard-text="{{item.url}}">复制</button>
                        </td>
    
                    </tr>
                    <tr ng-if="items.length == 0">
                        <td colspan="100%">暂无记录</td>
                    </tr>
                    </tbody>
                </table>
    
            </div>
    btn_index_{{index}}传进index,为了区别循环出来的按钮

     $scope.copy = function (index) {
           var a = new Clipboard('.btn_index_'+index);
            alert("复制成功");
      }

    参考文章:1、http://blog.csdn.net/hry2015/article/details/70941912

         2、https://clipboardjs.com/

    此功能也试用于vue中

  • 相关阅读:
    01
    王天宇0703作业
    0706作业
    0705作业
    0704作业
    0703作业
    数据库死锁语句脚本
    项目问题 : 尝试读取或写入受保护的内存。这通常指示其他内存已损坏
    工厂模式(Factory Patter)
    修改DevExpress中英文提示,将英文改为中文
  • 原文地址:https://www.cnblogs.com/xiaoli52qd/p/6899252.html
Copyright © 2011-2022 走看看