vue-puload.js
阿新 • • 發佈：2017-07-02
click span proto size too tag call tle cnblogs
define(function(require,exports){ /** * direction :Top Left Top Right Top Center right-start **** * tipShow: 顯示狀態 默認隱藏 */ exports.vtip = { template:‘<div v-if="tipShow" class="fade-transition ivu-tooltip-popper" :x-placement="direction" :style="{top: \‘40px\‘,right:rightDistance}"> <div class="ivu-tooltip-content"> <div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner" style="white-space: normal">{{message || "---"}}</div> </div> </div>‘, props:{ direction:‘‘, tipShow:‘‘, message:‘‘, rightDistance:{ "type": String, "default": "0" } } } //上傳模板 var template_vUpload = ‘<div> <Upload v-ref:upload :action="uploadUrl" multiple :before-upload="handleBeforeUpload" :on-success="handleSuccess" :format="[\‘ppt\‘,\‘pptx\‘,\‘PPT\‘,\‘PPTX\‘,\‘doc\‘,\‘DOC\‘,\‘docx\‘,\‘DOCX\‘,\‘xls\‘,\‘xlsx\‘,\‘XLS\‘,\‘XLSX\‘,\‘pdf\‘,\‘PDF\‘,\‘txt\‘,\‘TXT\‘]" :on-format-error="handleFormatError" :max-size="51200" :on-exceeded-size="handleMaxSize" :show-upload-list="false" style="width:100px;" :accept="\‘.ppt,.pptx,.PPT,.PPTX,.doc,.DOC,.docx,.DOCX,.xls,.xlsx,.XLS,.XLSX,.pdf,.PDF,.txt,.TXT\‘"> <i-button :type="fileButton" :size="fileButtonSize" :icon="fileIcon">{{fileText}}</i-button> </Upload> <ul class="ivu-upload-list" v-if="!nofileList"> <li class="ivu-upload-list-file ivu-upload-list-file-finish" v-for="item in uploadList"> <div v-if="item.status === \‘finished\‘"> <span> <i class="ivu-icon ivu-icon-document-text"><nobr>{{item.name}}</nobr></i> </span> <i class="ivu-upload-list-remove ivu-icon ivu-icon-ios-close-empty" @click="handleRemove(item)"></i> </div> <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress> </li> </ul> <div class="ivu-message" v-if="demanIfShow"> <div class="ivu-message-notice"> <div class="ivu-message-notice-content"> <div class="ivu-message-notice-content-text"> <div class="ivu-message-custom-content ivu-message-loading"> <i class="ivu-icon ivu-icon-load-c ivu-load-loop"></i> <span>加載中...</span> </div> </div> </div> </div> </div> </div>‘; /** * upload 組件 * uploadUrl : 上傳地址(String) * pathData ： 文件列表數據(Array) * nofileList: 是否顯示列表 (True) * fileText : 上傳按鈕文字(String默認是上傳按鈕) * fileIcon : 按鈕樣式(String默認是上傳圖標) * fileButton: 上傳按鈕類型(String默認是ghost) * fileButtonSize ： 上傳按鈕顯示尺寸(String默認為空) */ exports.vUpload= { template:template_vUpload, data:function(){ return { fileUpList:[], demanIfShow:false } }, methods:{ getUploadList:function(){ var self = this; self.fileUpList = self.pathData; //數據組合 將fileUpList 拼到 $refs.upload.fileList數組中 self.$refs.upload.fileList = [];//插入之前先清空 for(var j=0; j< self.fileUpList.length; j++){ var obj = { name:self.fileUpList[j], status:‘finished‘ }; self.$refs.upload.fileList.push(obj); } }, handleBeforeUpload:function(){ var self = this; self.demanIfShow = true; }, handleSuccess:function(res, file) {//上傳成功 var self = this; self.demanIfShow = false; file.name = res.result; if(Object.prototype.toString.call(res.result) === ‘[object Array]‘){//返回是否為空數組 self.fileUpList = res.result; }else{ self.fileUpList.push(res.result); if(res.successSign){ self.$Message.success(res.message) }else{ self.$Message.error(res.message); } } //驗證調用 self.checkFormValidate(); }, handleFormatError:function(file) {//上傳失敗 var self = this; self.demanIfShow = true; self.$Message.config({ duration: 3 }); self.$Notice.warning({ title: ‘文件格式不正確‘, desc: ‘文件 ‘ + file.name + ‘ 格式不正確，請上傳 ppt,pptx,PPT,PPTX,doc,DOC,docx,DOCX,xls,xlsx,XLS,XLSX,pdf,PDF,txt,TXT格式的的文件。‘ }); }, handleRemove:function(parm){//移除文件 var self = this; //fileUpList 刪除傳過去的數據 self.fileUpList.splice(self.fileUpList.indexOf(parm), 1); //upload 界面刪除數據 var fileList = this.$refs.upload.fileList; self.$refs.upload.fileList.splice(fileList.indexOf(parm), 1); //移除文件 驗證調用 self.checkFormValidate(); }, handleMaxSize:function(file){ var self = this; self.$Notice.warning({ title: ‘超出文件大小限制‘, desc: ‘文件 ‘ + file.name + ‘ 太大，不能超過 50M。‘ }); }, checkFormValidate:function(){//調用父組件驗證 var self = this; if(self.parentName){ self.$dispatch(‘handleIt‘,self.fileUpList,self.parentName); }else{ self.$dispatch(‘handleIt‘,self.fileUpList) } } }, computed:{ uploadList:function() { var self = this; return self.$refs.upload ? self.$refs.upload.fileList : []; } }, props:{ uploadUrl:{ "type": String, "default": "" }, pathData:{ "type": Array, "default": [] }, nofileList:{ "type": Boolean, "default": false }, fileText:{ "type": String, "default": "上傳文件" }, fileIcon:{ "type": String, "default": "ios-cloud-upload-outline" }, fileButton:{ "type": String, "default": "ghost" }, fileButtonSize:{ "type": String, "default": "" }, parentName:{ "type": String, "default": "" } }, ready:function(){ var self = this; self.getUploadList(); } } })
vue-puload.js