汽车网站建设网,如何用php制作网页,长沙网络营销,价目表海报app制作【sgUploadTray】上传托盘自定义组件#xff0c;可实时查看上传列表进度 特性#xff1a; 可以全屏可以还原尺寸可以最小化可以回到右下角默认位置支持删除队列数据 sgUploadTray源码
templatediv :class$options.name :showshow :size… 【sgUploadTray】上传托盘自定义组件可实时查看上传列表进度 特性 可以全屏可以还原尺寸可以最小化可以回到右下角默认位置支持删除队列数据 sgUploadTray源码
templatediv :class$options.name :showshow :sizetraySizediv classupload-listdiv classheader refheader dblclick.stop.preventdblclickHeaderdiv classleftdiv classtitlespan上传队列{{ uploadList.length }}个文件/span/div/divdiv classrightdiv v-iftraySize ! lg showRightBottomBtn click.stoptoRightBottomPosition title回到原来的位置i classel-icon-bottom-right/i/divdiv v-iftraySize ! mn click.stoptraySize mn title最小化i classel-icon-minus/i/divdiv v-iftraySize ! md click.stoptraySize md title还原i :classtraySize lg ? el-icon-copy-document : el-icon-d-caret/i/divdiv v-iftraySize ! lg click.stoptraySize lg title全屏i classel-icon-full-screen/i/divdiv click.stopclosei classel-icon-close/i/div/div/divdiv classfile-listulli v-for(a, i) in uploadList :keyidiv classleftspan classname :titlea.name{{ a.name }}/spanel-tag classsize sizemini{{ getSize(a.size) }}/el-tagel-progress classprogress :percentagea.percent/el-progress/divdiv classrightspan classtip :colora.color{{ a.tip }}/spanel-button classremove-icon-btn typeprimary iconel-icon-close sizemini plain circleclick.stopremove(a)/el-button/div/li/ul/div/divsgDragMove :datadragMoveDoms nearPadding50 :disabledtraySize lgdragStart$emit(dragStart, dragMoveDoms)draggingshowRightBottomBtn true; $emit(dragging, dragMoveDoms) dragEnd$emit(dragEnd, dragMoveDoms)mouseupNearSide //div
/template
script
import sgDragMove from /vue/components/admin/sgDragMove;
export default {name: sgUploadTray,components: {sgDragMove},data() {return {show: false,showRightBottomBtn: false,traySize: md,//lg全屏、md普通、mn最小uploadList: [],dragMoveDoms: [/* {canDragDom: elementDOM,//可以拖拽的位置元素moveDom: elementDOM,//拖拽同步移动的元素} */],//可以拖拽移动的物体}},props: [data, value],watch: {value: {handler(d) {this.show d}, deep: true, immediate: true,},show: {handler(d) {this.$emit(input, d);}, deep: true, immediate: true,},data: {handler(d) {this.uploadList d;}, deep: true, immediate: true,},},mounted() {this.dragMoveDoms [{canDragDom: this.$refs.header,//托盘的头部可以拖拽moveDom: this.$el,//拖拽的时候整个上传列表一起跟随移动}];},methods: {toRightBottomPosition(d) {this.showRightBottomBtn false;let rect this.$el.getBoundingClientRect();this.$el.style {left: innerWidth - rect.width px,top: innerHeight - rect.height px,}},dblclickHeader(d) {switch (this.traySize) {case lg:this.traySize mdbreak;case md:this.traySize mnbreak;case mn:this.traySize mdbreak;default:}},close(d) {let stopUploadList this.uploadList.filter(v v.percent 100 (v.type ! error v.type ! success));if (stopUploadList stopUploadList.length) {this.$confirm(您还有正在上传中的文件确定要取消吗, 提示, { dangerouslyUseHTMLString: true, confirmButtonText: 确定, cancelButtonText: 取消, type: warning }).then(() {this.show false;this.$emit(stopUpload, stopUploadList);}).catch(() {});} else {this.show false;}},remove(d) {if (d.type error || d.type success) {this.uploadList.splice(this.uploadList.findIndex(v v.uid d.uid), 1)} else if (d.percent 100) {this.$confirm(${d.name}正在上传中确定要取消吗, 提示, { dangerouslyUseHTMLString: true, confirmButtonText: 确定, cancelButtonText: 取消, type: warning }).then(() {this.$emit(stopUpload, [d]);}).catch(() {});} else {this.uploadList.splice(this.uploadList.findIndex(v v.uid d.uid), 1)}},getSize(d) {let r ;d 1024 (r d B);d 1024 (r (d / 1024).toFixed(2) KB);d 1024 * 1024 (r (d / (1024 * 1024)).toFixed(2) MB);d 1024 * 1024 * 1024 (r (d / (1024 * 1024 * 1024)).toFixed(2) GB);return r},}
};
/script
style langscss scoped
.sgUploadTray {$width: 600px; //托盘宽度$listMaxHeight: $width; //托盘宽度$rightWidth: 200px; //右侧宽度$sizeWidth: 100px; //文件大小宽度宽度$progressWidth: 50px; //进度条宽度$tipWidth: 100px; //提示文本宽度// ----------------------------------------z-index: 1000; //根据情况自己拿捏position: fixed;right: 10px;bottom: 10px;width: $width;background-color: white;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px;overflow: hidden;border: 1px solid #eee;font-size: 14px;display: none;[show] {display: block;}[sizelg] {left: 0 !important;top: 0 !important;width: 100vw;height: 100vh;transition: none;}[sizemd] {width: $width;height: revert;}[sizemn] {width: $width;height: 56px;}.upload-list {display: flex;flex-direction: column;box-sizing: border-box;padding-bottom: 20px;width: 100%;.header {flex-shrink: 0;font-size: 16px;font-weight: bold;width: 100%;box-sizing: border-box;padding: 20px;/*从上往下线性渐变背景*/background: linear-gradient(#743a7211, white);color: #743a72;display: flex;justify-content: space-between;align-items: center;.left {flex-grow: 1;.title {}}.right {display: flex;align-items: center;justify-content: flex-end;flex-shrink: 0;* {margin-left: 10px;cursor: pointer;pointer-events: auto;:hover {opacity: 0.618;}}}}.file-list {width: 100%;flex-grow: 1;overflow-y: auto;max-height: $listMaxHeight;box-sizing: border-box;padding: 0 20px;ul {width: 100%;li {line-height: 1.6;box-sizing: border-box;padding: 10px;border-radius: 4px;display: flex;justify-content: space-between;align-items: center;width: 100%;.left {display: flex;align-items: center;.name {margin-right: 10px;max-width: $width - $sizeWidth - $progressWidth - $rightWidth - 20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.size {margin-right: 10px;max-width: $sizeWidth;/*单行省略号*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.progress {max-width: $progressWidth;}}.right {display: flex;align-items: center;justify-content: flex-end;max-width: $rightWidth;.tip {margin-right: 10px;max-width: $tipWidth;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;[colorred] {color: #F56C6C;}[colorgreen] {color: #67C23A;}[colorblue] {color: #409EFF;}}.btns {.remove-icon-btn {width: 20px;height: 20px;}}}// cursor: pointer;:hover {background-color: #743a7211;color: #743a72;}}}}}
}
/style
这里面用到的sgDragMove组件在这里【sgDragMove】自定义拖拽组件仅支持拖拽、设置吸附屏幕边界距离_你挚爱的强哥的博客-CSDN博客【sgDragMove】自定义拖拽组件仅支持拖拽、设置吸附屏幕边界距离。https://blog.csdn.net/qq_37860634/article/details/131721634
