Vue之下載所有選中連接
最近在項目中有需求是要求能下載所有連接，當時是用.net的後臺處理和jquery一起實現的。今天來看看怎麼用Vue來實現這個。
效果圖：
點擊下載所有鏈接就會把勾選的記錄裏面的鏈接複製到剪切板，在迅雷或者其他下載軟件即可一起下載。
實現思路：
如果有多少需要下載的鏈接就寫對應的隱藏的文本框來記錄下載鏈接，然後點擊按鈕則通過clipboard.js來實現把鏈接內容複製到剪切板。
每次勾選都把鏈接存進隱藏的文本框如果是取消勾選則需要去掉對應的鏈接。
所有代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下載所有連接</title>
</head>
<script src="vue.min.js"></script>
<script src="clipboard.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
<style type="text/css">
#test{text-align: center;margin:0 auto;}
#linkdiv{text-align: left;}
#linkdiv a{;}
table tr th{text-align: center}
</style>
<body>
<div id="test">
<h1>vue之下載所有選中連接</h1>
<div id="linkdiv">
<a href="javascript:void(0)" @click="selectAll(isSelectAll)"><span v-show="isSelectAll">取消</span><span v-show="!isSelectAll">全選</span></a>
<a href="javascript:void(0)" @click="copyLink1" id='downLink1'>下載所有鏈接1</a>
<input type="hidden" id="link1Input" v-model="allLink1"/>
<a href="javascript:void(0)" id="downLink2" @click="copyLink2">下載所有鏈接2</a>
<input type="hidden" id="link2Input" v-model="allLink2"/>
</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>勾選</th>
<th>名字</th>
<th>描述</th>
<th>下載鏈接1</th>
<th>下載鏈接2</th>
</tr>
</thead>
<tr v-for="item in dataList">
<td><input type="checkbox" v-bind:checked="item.isSelect" @click="selectOne(item)" v-model="item.isSelect"/></td>
<td>{{item.name}}</td>
<td>{{item.test1}}</td>
<td><a target="_bank" v-bind:href="item.link1">下載1</a></td>
<td><a target="_bank" v-bind:href="item.link2">下載2</a></td>
</tr>
</table>
</div>
</body>
<script >
new Vue({
el : "#test",
data: {
message: 'Copy These Text',
allLink1:'',
allLink2:'',
dataList:[
{isSelect:false,name:'測試例子1',test1:'123',link1:'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg',link2:'http://img5.imgtn.bdimg.com/it/u=415293130,2419074865&fm=27&gp=0.jpg'},
{isSelect:false,name:'測試例子2',test1:'456',link1:'http://img0.imgtn.bdimg.com/it/u=3972169330,4211815266&fm=27&gp=0.jpg',link2:'http://img3.imgtn.bdimg.com/it/u=2249893882,1165836821&fm=27&gp=0.jpg'},
{isSelect:false,name:'測試例子3',test1:'789',link1:'http://img4.imgtn.bdimg.com/it/u=1645222675,1337033397&fm=27&gp=0.jpg',link2:'http://img0.imgtn.bdimg.com/it/u=889120611,3801177793&fm=27&gp=0.jpg'},
],
isSelectAll : false,
},
methods:{
selectOne:function(item){
if(item.isSelect!=true){
this.allLink1 += item.link1 +"\n";
this.allLink2 += item.link2 +"\n";
}else{
this.allLink1 = this.allLink1.replace(item.link1,"").replace("\n","");
this.allLink2 = this.allLink2.replace(item.link2,"").replace("\n","");
}
},
selectAll :function(isSelect){
for (var i = 0, len = this.dataList.length; i < len; i++) {
this.dataList[i].isSelect = !isSelect;
}
this.isSelectAll = !isSelect;
},
copyLink1 :function(){
var url = this.allLink1;
var clipboard = new ClipboardJS('#downLink1', {
text: function() {
return url;
}
});
//成功回調
clipboard.on('success', function(e) {
alert("已將所有鏈接1存至剪切板,請用迅雷或者其他下載軟件下載!");
clipboard.destroy();
});
//失敗回調
clipboard.on('error', function(e) {
// console.error('Action:', e.action);
// console.error('Trigger:', e.trigger);
});
},
copyLink2 :function(){
var url = this.allLink2;
var clipboard = new ClipboardJS('#downLink2', {
text: function() {
return url;
}
});
//成功回調
clipboard.on('success', function(e) {
alert("已將所有鏈接2存至剪切板,請用迅雷或者其他下載軟件下載!");
clipboard.destroy();
});
}
},
computed :function(){
}
})
</script>
</html>