clipboard.js的使用

clipboardjs网址

一.引用

下载clipboard包

二.三要素

1.设置triger

        a. new ClipboardJS('css选择器')

2.设置复制的文本

        a. data-clipboard-target="css选择器"

        b. data-clipboard-text 的数值

        c. new ClipboardJS('选择器', {

                  target: function (trigger) {

              }});

        d. new ClipboardJS('选择器', {

                   text: function (trigger) {

               }});

注：new ClipboardJS 中的属性大于 date-clipboard-text 的优先级大于 data-clipboard-target 的优先级

3.设置剪切板操作方式 (copy，cut)

        a. 默认是复制

        b. data-clipboard-action="操作方式"

        c. new ClipboardJS('.btn', {

               action: function (trigger) {

           }});

注：new ClipboardJS 中的属性大于 date-clipboard-action 的优先级

三.Events

clipboar的事件

四.Api

destroy：销毁trigger的事件监听

copy(target）：触发copy事件，此方法为静态方法

cut(target)：触发剪切事件，此方式为静态方法

五.使用vue3自定义简易的复制粘贴的指令

vClipboard指令

六.应用

vClipboard指令使用