掙脫家的懷抱

回歸出租房

淡去一身年味

你我

依舊

仍是

打工仔

哈哈哈

2-13

開工大吉

---------------------------------

效果示例

實現技術

clipboard

clipboard 優勢 
獨立
不依賴Flash

輕量化

壓縮後僅3kb.

安裝

可以通過 npm 來安裝它。

npm install clipboard --save

使用

引入到項目之中即可食用

利用html5 data屬性的特性

所有主流瀏覽器都支持 data-* 屬性。

相關詳參 w3school：http://www.w3school.com.cn/tags/att_global_data.asp

使用場景 分為三個

我使用的是直接從屬性復制文本內容 顧名思義 直接在拷貝的目標元素上加入自定義屬性 data-clipboard-text 即可

其中的url可直接定義內容，也可為動態變化的內容 看項目需求

另外還有兩種

① data-clipboard-target 屬性

類似上面的屬性復制文本

這裏屬性的目標為一個 元素名

例子

② data-clipboard-action 屬性 action後分為兩種類型 copy cut 復制 或 剪切

剪切內容 只在textarea標簽下有效 默認為copy

 <div class="bottom"  v-show="creatShow">
                <el-button class="share-btn" ref="can" size="small" :disabled="isdis" @click="yesBtn">創建鏈接</el-button>
                <el-button class="share-btn cancelBtn"  size="small" @click="cancelbtn" >取消</el-button>
            </div>
            <div class="bottom"  v-show="!creatShow">
                <el-button class="share-btn ctrlBtn" size="small" @click="ctrlCBtn"  :data-clipboard-text="url">復制鏈接</el-button>
            </div>
        </div>
        <input id="target" value="https://www.baidu.con">
        <div class="bottom" v-show="!creatShow">
             <el-button class="share-btn ctrlBtn" size="small" @click="ctrlCBtn" data-clipboard-target="#target">復制鏈接</el-button>
        </div>

        <textarea id="target">需要復制的內容  人生如夢 江湖天涯 大夢一場</textarea>
         <div class="bottom" v-show="!creatShow">
             <el-button class="share-btn ctrlBtn" size="small" @click="ctrlCBtn" data-clipboard-action="cut" data-clipboard-target="#target">復制內容</el-button>
        </div>

最後 核心 同事件觸發 開始工作

直接上代碼了 實例化 clipboard 對象 在他的成功失敗回調函數中進行操作 照顧到內存優化 需要進行釋放

親測 Safari Chrome 能用 僅測試web端

 //復制鏈接
        ctrlCBtn(){
            let self = this;
            let clipboard = new Clipboard(‘.ctrlBtn‘);
            clipboard.on(‘success‘, function(e) {
             self.$message({ message: 
 
"已復制至剪貼板", type: "success" ,duration:1500});
             setTimeout(()=>{
                //  self.$emit("closeshare")
             },2000)
             e.clearSelection();
             // 釋放內存  
             clipboard.destroy()  
            });
            //失敗回調
            clipboard.on(‘error‘, function(e) {
                self.$message({ message: "該瀏覽器不支持一鍵復制,請手動復制", type: "warning" ,duration:1500});
                setTimeout(()=>{
                 self.$emit("closeshare")
                },2000)
                // 釋放內存  
                  clipboard.destroy()
            });
        }

完事兒~~~
給大家拜個晚年~~~
新年快樂~~~
2019~~~
繼續努力~
繼續奮鬥~
今年的心態大有變化~
不知是好事壞事~~~
加油吧~~

Vue 下 瀏覽器 點擊實現復制功能