Vue 下 瀏覽器 點擊實現複製功能

掙脫家的懷抱 

迴歸出租房

淡去一身年味

你我

依舊

還是

打工仔

哈哈哈

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~~~繼續努力~繼續奮鬥~今年的心態大有變化~不知是好事壞事~~~加油吧~~