From ed10148536ea97e85f9553c244184a86c36a8c72 Mon Sep 17 00:00:00 2001 From: bhabgs Date: Fri, 23 Apr 2021 15:30:01 +0800 Subject: [PATCH 1/8] =?UTF-8?q?fix(=E9=80=BB=E8=BE=91):=20=E5=85=B3?= =?UTF-8?q?=E9=97=AD=E6=8C=89=E9=92=AE=E4=B8=8E=E9=BB=98=E8=AE=A4=E9=A1=B5?= =?UTF-8?q?=E5=B7=B2=E7=9F=A5=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/vitevui/src/tabsPage/index.tsx | 8 ++++---- package/vitevui/src/tabsPage/tab.tsx | 19 +++++-------------- 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/package/vitevui/src/tabsPage/index.tsx b/package/vitevui/src/tabsPage/index.tsx index 2242ba9..d6321f0 100644 --- a/package/vitevui/src/tabsPage/index.tsx +++ b/package/vitevui/src/tabsPage/index.tsx @@ -4,9 +4,9 @@ * @Author: bhabgs * @Date: 2021-04-06 11:13:21 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-20 15:49:57 + * @LastEditTime: 2021-04-21 14:40:26 */ -import { defineComponent, App, computed, nextTick } from 'vue'; +import { defineComponent, computed, nextTick } from 'vue'; import componentsBox from './components'; import { arrayCheck, setStyleClass, viteTypeof } from '../util'; import log from '../util/log'; @@ -112,11 +112,11 @@ const viteTabs = defineComponent({ flag = newArr.length; } - if (flag === 100000) { + if (flag - 1 < 0) { return log.warn('默认第一个page 为主page，主page无法删除'); } - if (!arrayCheck(newArr, tabsData.list, 'id')) { + if (!arrayCheck(newArr, tabsData.list, 'id') && flag - 1 >= 0) { updatePage(newArr, tabsData.list[flag - 1].id); } else { log.warn('没有匹配的键'); diff --git a/package/vitevui/src/tabsPage/tab.tsx b/package/vitevui/src/tabsPage/tab.tsx index 329d4c3..4bc910d 100644 --- a/package/vitevui/src/tabsPage/tab.tsx +++ b/package/vitevui/src/tabsPage/tab.tsx @@ -4,7 +4,7 @@ * @Author: bhabgs * @Date: 2021-04-06 11:43:20 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-20 15:50:19 + * @LastEditTime: 2021-04-21 14:36:34 */ import { defineComponent, withModifiers } from 'vue'; import { setStyleClass } from '../util'; @@ -44,22 +44,13 @@ export default defineComponent({ {item.name} {item.hasClosed ? ( - { - remove([item.id]); - }} + onClick={withModifiers(() => { + remove(item.id); + }, ['stop'])} /> ) : ( - // { - // remove([item.id]); - // }, - // ['stop'], - // )} - // > '' )} From 2bd3b57018ae46c01b8dc0b744a815b3d63c6072 Mon Sep 17 00:00:00 2001 From: bhabgs Date: Fri, 23 Apr 2021 15:31:46 +0800 Subject: [PATCH 2/8] =?UTF-8?q?feat(updata):=20button=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=20upload=20=E6=A8=A1=E5=BC=8F=20input:=20file=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/vitevui/src/button/index.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/package/vitevui/src/button/index.tsx b/package/vitevui/src/button/index.tsx index 107b6eb..9cc1d9f 100644 --- a/package/vitevui/src/button/index.tsx +++ b/package/vitevui/src/button/index.tsx @@ -4,7 +4,7 @@ * @Author: bhabgs * @Date: 2021-02-21 15:44:28 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-20 15:28:51 + * @LastEditTime: 2021-04-23 11:20:43 */ import { defineComponent } from 'vue'; import { setStyleClass, installComponent, getSlots } from '../util/index'; @@ -14,10 +14,16 @@ const buttonProps = { type: String, default: 'default', }, + accept: String, radius: { type: Boolean, default: true, }, + multiple: Boolean, + disabled: { + type: Boolean, + default: false, + }, }; const Button = defineComponent({ @@ -41,7 +47,13 @@ const Button = defineComponent({ )} - + ) : ( From 2cf07a508dce7c8481eef7b0e3b6fd1f46e81544 Mon Sep 17 00:00:00 2001 From: bhabgs Date: Fri, 23 Apr 2021 15:32:58 +0800 Subject: [PATCH 3/8] =?UTF-8?q?fix(js):=20=E4=BF=AE=E5=A4=8D=20icon=20?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E4=BC=A0=E9=80=92=20attr=20=E5=AF=BC?= =?UTF-8?q?=E8=87=B4=E6=97=A0=E6=B3=95=E7=BB=A7=E6=89=BF=20=E7=88=B6?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B1=9E=E6=80=A7=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/vitevui/src/icon/index.tsx | 47 +++++++++--------------------- 1 file changed, 13 insertions(+), 34 deletions(-) diff --git a/package/vitevui/src/icon/index.tsx b/package/vitevui/src/icon/index.tsx index 9d2ee16..e7f68a8 100644 --- a/package/vitevui/src/icon/index.tsx +++ b/package/vitevui/src/icon/index.tsx @@ -2,14 +2,14 @@ * @abstract: JianJie * @version: 0.0.1 * @Author: bhabgs - * @Date: 2021-04-16 15:53:51 + * @Date: 2021-04-21 14:06:07 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-20 15:30:25 + * @LastEditTime: 2021-04-21 14:32:05 */ import { defineComponent } from 'vue'; import { installComponent } from '../util'; -const iconProps = { +const props = { name: { type: String, default: '', @@ -22,38 +22,17 @@ const iconProps = { }; const viIcon = defineComponent({ - name: 'viIcon', - props: iconProps, - emits: ['click'], - setup(props, context) { - // withModifiers(() => { - //}, ['stop']) - const emitClick = () => { - context.emit('click'); + props, + setup(props) { + return () => { + return props.svg ? ( + + ) : ( + + ); }; - return () => ( - <> - {props.svg ? ( - - ) : ( - { - emitClick(); - }} - class={[`vite_ ${props.name}`, props.class]} - > - )} - - ); }, }); - export default installComponent(viIcon, 'viIcon'); From 29714f0b4baf5ec009554d0d15b23f035908e76f Mon Sep 17 00:00:00 2001 From: bhabgs Date: Fri, 23 Apr 2021 15:34:07 +0800 Subject: [PATCH 4/8] =?UTF-8?q?feat(=E4=BF=AE=E5=A4=8D):=20=E6=95=B4?= =?UTF-8?q?=E7=90=86util=20=E5=B7=A5=E5=85=B7index=E8=BE=93=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/vitevui/src/util/createdom.ts | 8 ++ package/vitevui/src/util/files/index.ts | 38 +++++---- package/vitevui/src/util/index.tsx | 26 +++++- package/vitevui/src/util/xhr/index.ts | 104 ++++++++++++++++++++++++ 4 files changed, 157 insertions(+), 19 deletions(-) create mode 100644 package/vitevui/src/util/createdom.ts create mode 100644 package/vitevui/src/util/xhr/index.ts diff --git a/package/vitevui/src/util/createdom.ts b/package/vitevui/src/util/createdom.ts new file mode 100644 index 0000000..8db942a --- /dev/null +++ b/package/vitevui/src/util/createdom.ts @@ -0,0 +1,8 @@ +/* + * @abstract: JianJie + * @version: 0.0.1 + * @Author: bhabgs + * @Date: 2021-04-21 15:42:49 + * @LastEditors: bhabgs + * @LastEditTime: 2021-04-21 15:42:49 + */ diff --git a/package/vitevui/src/util/files/index.ts b/package/vitevui/src/util/files/index.ts index 5b8bfbc..41db686 100644 --- a/package/vitevui/src/util/files/index.ts +++ b/package/vitevui/src/util/files/index.ts @@ -6,7 +6,7 @@ import { baseObject } from '@/types'; * @Author: bhabgs * @Date: 2021-04-19 09:44:52 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-19 10:11:45 + * @LastEditTime: 2021-04-23 13:51:30 */ export type iconsName = | 'vite_yasuo' @@ -21,6 +21,7 @@ export type iconsName = | 'vite_MP3' | 'vite_XML' | 'vite_MP4' + | 'vite_XLS' | 'vite_PNG'; export type FileTypes = @@ -29,13 +30,13 @@ export type FileTypes = | 'css' | 'eps' | 'cad' - | 'zip' - | 'json' + | 'application/zip' + | 'application/json' | 'html' - | 'jpg' + | 'image/jpg' | 'ppt' | 'txt' - | 'gif' + | 'image/gif' | 'wav' | 'docx' | 'pdf' @@ -43,32 +44,33 @@ export type FileTypes = | 'mp3' | 'xml' | 'mp4' - | 'xls' + | 'application/vnd.ms-excel' + | 'application/vnd.openxmlformats-officedocument.spreadsheetml.shee' | 'vid' - | 'png'; + | 'image/png'; const fileName: baseObject = { - png: 'vite_PNG', - zip: 'vite_yasuo', + 'image/png': 'vite_PNG', + 'application/zip': 'vite_yasuo', + 'application/x-rar': 'vite_yasuo', + 'application/json': 'vite_JSON', + 'image/jpg': 'vite_JPG', + 'image/jpeg': 'vite_JPG', + 'image/gif': 'vite_GIF', + 'application/vnd.ms-excel': 'vite_XLS', gzip: 'vite_yasuo', tag: 'vite_yasuo', - json: 'vite_JSON', html: 'vite_HTML', - jpg: 'vite_JPG', ppt: 'vite_PPT', pptx: 'vite_PPT', txt: 'vite_TXT', - gif: 'vite_GIF', pdf: 'vite_GIF', - doc: 'vite_DOCX', docx: 'vite_DOCX', - mp3: 'vite_MP3', + 'audio/mpeg': 'vite_MP3', xml: 'vite_XML', - mp4: 'vite_MP4', + 'video/mp4': 'vite_MP4', }; export const getFileType: (src: string) => iconsName = (src) => { - const index = src.lastIndexOf('.'); - const name = src.substr(index + 1); - return fileName[name] || 'vite_wenjianjiami'; + return fileName[src] || 'vite_wenjianjiami'; }; diff --git a/package/vitevui/src/util/index.tsx b/package/vitevui/src/util/index.tsx index f23925a..fcd89c3 100644 --- a/package/vitevui/src/util/index.tsx +++ b/package/vitevui/src/util/index.tsx @@ -4,12 +4,14 @@ * @Author: bhabgs * @Date: 2021-01-06 11:59:49 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-20 15:26:08 + * @LastEditTime: 2021-04-23 11:23:48 */ import { viteTypeof } from './objType'; import { getFileType } from './files'; import installComponent from './installComponent'; import { getSlots } from './getslots'; +import xhr from './xhr'; +import log from './log'; const setStyleClass: (classes: Array) => Array = (classes) => classes.map((item) => (item !== '' ? `vite_${item}` : '')); @@ -29,6 +31,24 @@ const arrayCheck: ( return true; }; +const cId = (length?: number) => { + const n = length || 10; + return Number(Math.random().toString().substr(3, n) + Date.now()).toString( + 36, + ); +}; + +const computedSize = (val: number) => { + // val 大小为b + const kb = val / 1024; + const m = kb / 1024; + + if (kb > 100) { + return m.toFixed(0) + 'M'; + } + return kb.toFixed(0) + 'kb'; +}; + export { viteTypeof, arrayCheck, @@ -36,4 +56,8 @@ export { getFileType, installComponent, getSlots, + xhr, + cId, + computedSize, + log, }; diff --git a/package/vitevui/src/util/xhr/index.ts b/package/vitevui/src/util/xhr/index.ts new file mode 100644 index 0000000..2d1c73c --- /dev/null +++ b/package/vitevui/src/util/xhr/index.ts @@ -0,0 +1,104 @@ +/* + * @abstract: JianJie + * @version: 0.0.1 + * @Author: bhabgs + * @Date: 2021-04-22 15:58:19 + * @LastEditors: bhabgs + * @LastEditTime: 2021-04-23 15:10:19 + */ + +import { baseObject } from '@/types'; + +interface Config { + headers?: baseObject; + data?: any; + timeout?: number; + progress?: (event: { e: ProgressEvent; val: number }) => {}; + progressDone?: (event: { e: any; val: number }) => {}; + baseURL?: string; +} + +const methods = ['put', 'get', 'post']; + +class xhr { + constructor(config?: Config) { + this.config = Object.assign(this.config, config || {}); + + methods.forEach((item) => { + (this as any)[item] = (url: string, data: any, config?: Config) => { + this.config.data = data; + return this.request( + url, + item, + Object.assign(this.config, config || {}), + ); + }; + }); + } + + public get!: (url: string, data: any, config?: Config) => Promise; + + public put!: (url: string, data: any, config?: Config) => Promise; + + public post!: (url: string, data: any, config?: Config) => Promise; + + private request(url: string, method: string, config: Config) { + return new Promise((res, rej) => { + const ajax = new XMLHttpRequest(); + ajax.open(method.toUpperCase(), url); + + if (config.headers) { + for (const i in config.headers) { + const item = config.headers[i]; + ajax.setRequestHeader(i, item); + } + } + + if (this.config.progress) { + ajax.upload.onprogress = (event) => { + // console.log(event); + const { loaded, total } = event; + const val = Number(((loaded / total) * 100).toFixed(2)) - 1; + if (event.lengthComputable) { + (this.config as any).progress({ + e: event, + val: val > 100 ? 99 : val, + }); + } + }; + } + + ajax.send(config?.data); + + ajax.onload = () => { + this.config.progressDone + ? this.config.progressDone({ + e: ajax.response, + val: 100, + }) + : ''; + + if (ajax.status === 200) { + res(JSON.parse(ajax.response)); + } else { + (this.config as any).progress({ e: ajax.response, val: 0 }); + rej(ajax.responseText); + } + }; + }); + } + + create(config?: Config) { + return new xhr(config); + } + + private config: Config = { + headers: {}, + data: {}, + baseURL: '', + timeout: 1000, + }; +} + +const axios = new xhr(); +export default axios; From bff8d6531b3e4c30467f80b720bedaaec8e7fdb7 Mon Sep 17 00:00:00 2001 From: bhabgs Date: Fri, 23 Apr 2021 15:39:43 +0800 Subject: [PATCH 5/8] =?UTF-8?q?feat(style):=20=E6=A0=B7=E5=BC=8F=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/vitevui/src/style/upload/index.less | 27 +++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/package/vitevui/src/style/upload/index.less b/package/vitevui/src/style/upload/index.less index ddf3b94..a000a1e 100644 --- a/package/vitevui/src/style/upload/index.less +++ b/package/vitevui/src/style/upload/index.less @@ -1,6 +1,14 @@ .vite_upload_box { display: flex; flex-direction: column; + &.vite_upload_disabled { + .vite_button_upload { + opacity: 0.5; + input { + opacity: 0; + } + } + } .vite_button_upload { width: 7.86rem; height: 7.86rem; @@ -17,6 +25,14 @@ margin-bottom: 0.3rem; box-sizing: border-box; border: 1px solid @gray-4; + position: relative; + .progress { + position: absolute; + height: 2px; + left: 0; + bottom: 0; + .animate3(); + } } &.img_video_box { margin-top: 0.3rem; @@ -76,13 +92,20 @@ } } } - - .item_close { + a { + text-decoration: none; + color: @black; + } + .item_close, + .loadfile_button { cursor: pointer; .animate3(); &:hover { color: @red; } } + .loadfile_button { + font-size: 1.3rem; + } } } From d14663c978b7b29531900c30b064c9eab1c45287 Mon Sep 17 00:00:00 2001 From: bhabgs Date: Fri, 23 Apr 2021 15:40:44 +0800 Subject: [PATCH 6/8] =?UTF-8?q?feat(=E8=B0=83=E8=AF=95):=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=B0=83=E8=AF=95=20=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- src/components/upload.tsx | 40 ++++++++++++--------------------------- src/lay.tsx | 9 +++++++-- src/registered.ts | 2 +- vite.config.ts | 7 ++++++- yarn.lock | 4 ++-- 6 files changed, 30 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index e8d7850..2792614 100644 --- a/package.json +++ b/package.json @@ -25,8 +25,8 @@ "private": true, "devDependencies": { "patch-vue-directive-ssr": "^0.0.1", - "@vitejs/plugin-vue": "^1.1.4", - "@vitejs/plugin-vue-jsx": "^1.1.0", + "@vitejs/plugin-vue": "^1.2.1", + "@vitejs/plugin-vue-jsx": "^1.1.3", "@vue/compiler-sfc": "^3.0.5", "less": "^4.1.1", "typescript": "^4.1.3", diff --git a/src/components/upload.tsx b/src/components/upload.tsx index aeeb1f1..ed18fe1 100644 --- a/src/components/upload.tsx +++ b/src/components/upload.tsx @@ -4,41 +4,25 @@ * @Author: bhabgs * @Date: 2021-04-06 16:21:03 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-20 14:18:30 + * @LastEditTime: 2021-04-23 11:38:19 */ import { defineComponent, ref } from 'vue'; export default defineComponent({ setup(Prop, context) { - const values = ref([ - { - name: 'bhabgs', - url: - 'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png?id=1', - size: '88', - fileType: 'png', - icon: '', - }, - { - name: 'bhabgs', - url: - 'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png?id=2', - size: '88', - fileType: 'png1', - icon: '', - }, - { - name: 'bhabgs', - url: - 'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png?id=3', - size: '88', - fileType: 'png1', - icon: '', - }, - ]); + const values = ref([]); return () => (
- + + {JSON.stringify(values.value)}
); }, diff --git a/src/lay.tsx b/src/lay.tsx index b615f5c..dc407e1 100644 --- a/src/lay.tsx +++ b/src/lay.tsx @@ -4,7 +4,7 @@ * @Author: bhabgs * @Date: 2021-02-21 15:42:58 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-19 11:17:20 + * @LastEditTime: 2021-04-21 15:18:58 */ import { defineComponent, @@ -123,7 +123,12 @@ export default defineComponent({ - footer + { + alert(666); + }} + /> ); diff --git a/src/registered.ts b/src/registered.ts index f6a057b..fea156c 100644 --- a/src/registered.ts +++ b/src/registered.ts @@ -4,7 +4,7 @@ * @Author: bhabgs * @Date: 2020-11-30 09:53:41 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-13 13:39:59 + * @LastEditTime: 2021-04-21 13:31:27 */ import { App } from 'vue'; import vui from '../package/vitevui/src/index'; diff --git a/vite.config.ts b/vite.config.ts index 4cf44b5..8848b7d 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,7 +4,7 @@ * @Author: bhabgs * @Date: 2021-02-21 15:25:14 * @LastEditors: bhabgs - * @LastEditTime: 2021-02-21 17:11:33 + * @LastEditTime: 2021-04-22 14:09:06 */ import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; @@ -16,4 +16,9 @@ export default defineConfig({ build: { outDir: './package/server/dist', }, + server: { + proxy: { + '/api/': 'http://192.168.5.176:8043/', + }, + }, }); diff --git a/yarn.lock b/yarn.lock index 0d637a7..e6e8a14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -584,7 +584,7 @@ dependencies: "@types/node" "*" -"@vitejs/plugin-vue-jsx@^1.1.0": +"@vitejs/plugin-vue-jsx@^1.1.3": version "1.1.3" resolved "https://registry.npm.taobao.org/@vitejs/plugin-vue-jsx/download/@vitejs/plugin-vue-jsx-1.1.3.tgz#426c68f8a367a603acb82fca6e2b12506ba9fc8e" integrity sha1-Qmxo+KNnpgOsuC/KbisSUGup/I4= @@ -595,7 +595,7 @@ "@vue/babel-plugin-jsx" "^1.0.3" hash-sum "^2.0.0" -"@vitejs/plugin-vue@^1.1.4": +"@vitejs/plugin-vue@^1.1.4", "@vitejs/plugin-vue@^1.2.1": version "1.2.1" resolved "https://registry.npm.taobao.org/@vitejs/plugin-vue/download/@vitejs/plugin-vue-1.2.1.tgz#6de49436fc346f829a56676066428e3f011522ac" integrity sha1-beSUNvw0b4KaVmdgZkKOPwEVIqw= From 371db7eef8ab156ebee45c515906ffb50ff13841 Mon Sep 17 00:00:00 2001 From: bhabgs Date: Sun, 25 Apr 2021 09:06:58 +0800 Subject: [PATCH 7/8] =?UTF-8?q?feat(upload):=20=E8=B0=83=E8=AF=95=20upload?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/vitevui/package.json | 2 +- package/vitevui/src/index.ts | 2 +- package/vitevui/src/style/upload/index.less | 1 + package/vitevui/src/upload/index.tsx | 177 +++++++++++++++----- package/vitevui/src/upload/uploadButton.tsx | 46 +++++ 5 files changed, 182 insertions(+), 46 deletions(-) create mode 100644 package/vitevui/src/upload/uploadButton.tsx diff --git a/package/vitevui/package.json b/package/vitevui/package.json index e77f6a4..e48dd21 100644 --- a/package/vitevui/package.json +++ b/package/vitevui/package.json @@ -40,7 +40,7 @@ "cz-conventional-changelog": "^3.3.0", "commitizen": "^4.2.3", "@vitejs/plugin-vue": "^1.1.4", - "@vitejs/plugin-vue-jsx": "^1.1.0", + "@vitejs/plugin-vue-jsx": "^1.1.3", "@vue/compiler-sfc": "^3.0.5", "less": "^4.1.1", "typescript": "^4.1.3", diff --git a/package/vitevui/src/index.ts b/package/vitevui/src/index.ts index de2f2f2..eea86c7 100644 --- a/package/vitevui/src/index.ts +++ b/package/vitevui/src/index.ts @@ -4,7 +4,7 @@ * @Author: bhabgs * @Date: 2021-01-05 14:05:58 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-20 15:52:43 + * @LastEditTime: 2021-04-21 14:33:01 */ import type { App } from 'vue'; import { setupElement } from './setup/element'; diff --git a/package/vitevui/src/style/upload/index.less b/package/vitevui/src/style/upload/index.less index a000a1e..df061f7 100644 --- a/package/vitevui/src/style/upload/index.less +++ b/package/vitevui/src/style/upload/index.less @@ -31,6 +31,7 @@ height: 2px; left: 0; bottom: 0; + z-index: 2; .animate3(); } } diff --git a/package/vitevui/src/upload/index.tsx b/package/vitevui/src/upload/index.tsx index e131fc3..a504bd4 100644 --- a/package/vitevui/src/upload/index.tsx +++ b/package/vitevui/src/upload/index.tsx @@ -4,11 +4,20 @@ * @Author: bhabgs * @Date: 2021-04-08 15:57:51 * @LastEditors: bhabgs - * @LastEditTime: 2021-04-20 15:52:06 + * @LastEditTime: 2021-04-23 15:49:34 */ -import { defineComponent, computed } from 'vue'; -import { setStyleClass, installComponent, getFileType } from '../util'; +import { defineComponent, computed, ref } from 'vue'; +import { + setStyleClass, + installComponent, + getFileType, + xhr, + cId, + computedSize, + log, +} from '../util'; import { iconsName, FileTypes } from '../util/files'; +import uploadButton from './uploadButton'; export interface uploadItem { name: string; @@ -16,6 +25,8 @@ export interface uploadItem { size: number; fileType: FileTypes; icon?: iconsName; + progress?: number; + id?: any; } const viteUploadProp = { @@ -33,36 +44,10 @@ const viteUploadProp = { type: Boolean, default: false, }, // 是否支持多文件上传 - accept: { - type: Array, - default: [ - 'ai', - 'arm', - 'css', - 'eps', - 'cad', - 'zip', - 'json', - 'html', - 'jpg', - 'ppt', - 'txt', - 'gif', - 'wav', - 'docx', - 'pdf', - 'ps', - 'mp3', - 'xml', - 'mp4', - 'xls', - 'vid', - 'png', - ], - }, // 允许上传的文件类型 + accept: String, // 允许上传的文件类型 limit: { type: Number, - default: 10, + default: 2, }, // 允许上传文件最大个数 disabled: { type: Boolean, @@ -72,27 +57,54 @@ const viteUploadProp = { type: String, default: '', }, + progressColor: { + type: String, + default: '#4498f0', + }, + fileSize: { + type: Number, + default: 1024 * 1024 * 10, + }, value: Array, // 默认值 }; const viteUpload = defineComponent({ props: viteUploadProp, + components: { + uploadButton, + }, setup(props, context) { - const classes = setStyleClass(['upload_box']); + let uploadStatus = false; + + const onErr = (msg: string) => { + context.emit('err', { msg }); + }; // 区分可预览和不可预览的文件列 const files = computed(() => { const previewFiles: Array = []; const others: Array = []; - const previewFilesType = ['png', 'jpg', 'gif', 'video']; + const previewFilesType = [ + 'image/png', + 'image/jpg', + 'image/gif', + 'video', + 'image/jpeg', + ]; + let length = 0; for (const i of props.value as Array) { const hasPreview = previewFilesType.find((item) => item === i.fileType); + length += 1; if (hasPreview) { previewFiles.push(i); } else { others.push(i); } } - return { previewFiles, others }; + const classes = setStyleClass([ + 'upload_box', + length >= props.limit ? 'upload_disabled' : '', + ]); + return { previewFiles, others, length, classes }; }); // 删除方法 @@ -100,7 +112,6 @@ const viteUpload = defineComponent({ const newval = props.value?.filter( (unitem: any) => item.url !== unitem.url, ); - console.log(newval); context.emit('update:value', newval); }; // 删除按钮 vdom @@ -116,14 +127,87 @@ const viteUpload = defineComponent({ ); }; + // 上传文件处理 + const uploadFile = async (e: any) => { + const files = e.target.files[0]; + uploadStatus = true; + + if (files.size >= props.fileSize) { + const text = `文件上传大小不能超过 ${computedSize( + props.fileSize, + )}, 当前文件大小为${computedSize(files.size)}`; + onErr(text); + return log.warn(text); + } + const body = new FormData(); + const id = cId(); + const newItemval = { + name: files.name, + size: files.size, + fileType: files.type, + url: window.URL.createObjectURL(files), + id, + progress: 0, + }; + props.value?.push(newItemval); + body.append('file', files); + body.append('size', files.size); + body.append('name', files.name); + body.append('fileType', files.type); + + const aaa: any = props.value?.find((item: any) => item.id === id); + + const res = await xhr.post(props.action, body, { + headers: props.headers || {}, + progress: (e): any => { + const { val } = e; + aaa.progress = val; + }, + progressDone({ val, e }): any { + aaa.progress = 100; + }, + }); + uploadStatus = false; + e.target.files = null; + e.target.value = null; + aaa.url = res.data.url; + }; + + const renderProgress = (progress: number) => { + let flag = true; + + if (progress >= 100) { + flag = false; + } + if (progress) { + return ( +
+ ); + } + return ''; + }; + return () => ( -
- ; - }, +
+ = props.limit ? true : props.disabled} + onChange={(e: any) => { + console.log(e, uploadStatus); + uploadFile(e); + // if (!uploadStatus) { + // } else { + // onErr('文件正在上传中，请等待当前文件上传完成.'); + // } }} /> {/* 图片视频预览位置 */} @@ -132,6 +216,7 @@ const viteUpload = defineComponent({
  • {item.name} {closeIcon(item)} + {renderProgress(item.progress || 0)}
    • ))} @@ -139,13 +224,17 @@ const viteUpload = defineComponent({
      {files.value.others.map((item) => (
    • - +
      {item.name} - {item.size}KB + {computedSize(item.size)}
      + + + {closeIcon(item)} + {renderProgress(item.progress || 0)}
      • ))}
    diff --git a/package/vitevui/src/upload/uploadButton.tsx b/package/vitevui/src/upload/uploadButton.tsx new file mode 100644 index 0000000..eea56fa --- /dev/null +++ b/package/vitevui/src/upload/uploadButton.tsx @@ -0,0 +1,46 @@ +/* + * @abstract: JianJie + * @version: 0.0.1 + * @Author: bhabgs + * @Date: 2021-04-21 14:48:11 + * @LastEditors: bhabgs + * @LastEditTime: 2021-04-23 11:19:19 + */ +import { defineComponent } from 'vue'; + +const props = { + fileTitle: { + type: String, + default: '', + }, + accept: { + type: String, + default: 'image/png, image/jpeg, image/jpg', + }, // 允许上传的文件类型 + multiple: { + type: Boolean, + default: false, + }, // 是否支持多文件上传 + disabled: { + type: Boolean, + default: false, + }, +}; +export default defineComponent({ + props, + setup(props, context) { + return () => ( + ; + }, + }} + /> + ); + }, +}); From 21bf9e30bec4d8914a5e728c9ce10ec36092a0a1 Mon Sep 17 00:00:00 2001 From: bhabgs Date: Sun, 25 Apr 2021 09:10:56 +0800 Subject: [PATCH 8/8] =?UTF-8?q?feat(level):=20=E6=9B=B4=E6=96=B0ui?= =?UTF-8?q?=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package/vitevui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/vitevui/package.json b/package/vitevui/package.json index e48dd21..77defb7 100644 --- a/package/vitevui/package.json +++ b/package/vitevui/package.json @@ -1,6 +1,6 @@ { "name": "vitevui", - "version": "1.0.0-beta.18", + "version": "1.0.0-beta.19", "description": "vue3.0 ui", "main": "lib/index.js", "homepage": "https://bhabgs.github.io/vite-vui-docs/",