<div class="handle">
<div class="handle-box" id="drop_area" v-on:drop="dropClick">
<div class="handle-btn">
<img class="btn-icon" src="./images/compress/new-btn-icon.png" alt="">
选择图片
<input class="in-btn" id="upload" v-on:change="change" type="file" value=""
multiple="multiple" />
</div>
<p class="handle-desc">或将图片拖拽到此处</p>
<p class="handle-txt">支持格式:JPG、PNG、GIF、BMP</p>
</div>
</div>
<div class="compress-list" v-if=" list.length > 0 " v-cloak>
<ul class="tab-header">
<li class="header1 tab-txt">文件名</li>
<li class="header2 tab-txt">压缩前</li>
<li class="header3 tab-txt">状态</li>
<li class="header4 tab-txt">压缩率</li>
<li class="header5 tab-txt">操作</li>
</ul>
<ul class="tab-header tab-list" v-for="(item,i) in list" :key="i">
<li class="header1 tab-txt">{{item.name}}</li>
<li class="header2 tab-txt">{{(item.size/1024).toFixed(2)}}KB</li>
<li class="header3 tab-txt">
<div class="line2" v-if="item.onCompress == 1">
<div class="m-line"></div>
<div class="move"> </div>
</div>
<div class="line3" v-if="item.onCompress == 2">
<div class="line3-box"></div>
</div>
</li>
<li class="header4 tab-txt">-{{item.onCompress == 2 ? item.number +'%' : ''}}</li>
<li class="header5 tab-txt cur" @click="downFile">
<span v-if="item.onCompress == 2" class="down dFile">下载</span>
<span v-else class="dFile">取消</span>
</li>
</ul>
</div>
$(function () {
var app = new Vue({
el: '.model',
data: function () {
return {
active: 1,
onCompress: 1,
list: [],
}
},
mounted: function () {
document.addEventListener("drop", function (e) { //拖离
e.preventDefault();
})
document.addEventListener("dragleave", function (e) { //拖后放
e.preventDefault();
})
document.addEventListener("dragenter", function (e) { //拖进
e.preventDefault();
})
document.addEventListener("dragover", function (e) { //拖来拖去
e.preventDefault();
})
},
destroyed: function () {
},
methods: {
getRandom: function (n, m) {
var num = Math.floor(Math.random() * (m - n + 1) + n)
return num
},
/// 通过 change 时间获取文件
change: function () {
var obj = document.getElementById("upload");
var len = obj.files.length;
var that = this;
for (let i = 0; i < len; i++) {
obj.files[i].onCompress = 1;
var number = this.getRandom(70, 80)
obj.files[i].number = number;
setTimeout(function () {
for (let j = 0; j < len; j++) {
obj.files[j].onCompress = 2;
that.$forceUpdate();
}
}, 500)
this.list.push(obj.files[i])
}
},
dropClick: function (e) {
/// 拖拽情况获取文件
var fileList = Array.from(e.dataTransfer.files);
var that = this;
for (var i = 0; i < fileList.length; i++) {
fileList[i].onCompress = 1;
var number = this.getRandom(70, 80)
fileList[i].number = number;
setTimeout(function () {
for (let j = 0; j < fileList.length; j++) {
fileList[j].onCompress = 2;
that.$forceUpdate();
}
}, 500)
that.list.push(fileList[i]);
}
},
downFile: function () {
$('#dialog').show()
},
changeActive: function (v) {
this.active = v;
}
}
});
});
