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>