From 4e3d752fb6786043a7c09c9d045c63ed63f3194c Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Sun, 14 May 2023 16:38:29 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E`=E7=BB=84=E4=BB=B6-?= =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81demo`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/optimize.ts | 1 + locales/en.yaml | 1 + locales/zh-CN.yaml | 1 + package.json | 1 + pnpm-lock.yaml | 29 ++++ src/router/modules/components.ts | 9 ++ src/views/components/waterfall/api.ts | 38 ++++++ src/views/components/waterfall/error.png | Bin 0 -> 1527 bytes src/views/components/waterfall/index.vue | 151 +++++++++++++++++++++ src/views/components/waterfall/loading.png | Bin 0 -> 1302 bytes 10 files changed, 231 insertions(+) create mode 100644 src/views/components/waterfall/api.ts create mode 100644 src/views/components/waterfall/error.png create mode 100644 src/views/components/waterfall/index.vue create mode 100644 src/views/components/waterfall/loading.png diff --git a/build/optimize.ts b/build/optimize.ts index 89d049c59..d7c2a696d 100644 --- a/build/optimize.ts +++ b/build/optimize.ts @@ -36,6 +36,7 @@ const include = [ "element-resize-detector", "@amap/amap-jsapi-loader", "el-table-infinite-scroll", + "vue-waterfall-plugin-next", "@wangeditor/editor-for-vue", "vuedraggable/src/vuedraggable" ]; diff --git a/locales/en.yaml b/locales/en.yaml index 213450135..3035c784a 100644 --- a/locales/en.yaml +++ b/locales/en.yaml @@ -39,6 +39,7 @@ menus: hsdialog: Dialog Components hsmessage: Message Tips Components hsvideo: Video Components + hswaterfall: Waterfall Components hsmap: Map Components hsdraggable: Draggable Components hssplitPane: Split Pane diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 30fa6d9bc..9f52c29c1 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -39,6 +39,7 @@ menus: hsdialog: 函数式弹框组件 hsmessage: 消息提示组件 hsvideo: 视频组件 + hswaterfall: 瀑布流组件 hsmap: 地图组件 hsdraggable: 拖拽组件 hssplitPane: 切割面板 diff --git a/package.json b/package.json index 0f47fabe5..a20e88757 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "vue-router": "^4.2.0", "vue-types": "^5.0.2", "vue-virtual-scroller": "2.0.0-beta.7", + "vue-waterfall-plugin-next": "^2.2.1", "vue3-danmaku": "1.4.0-beta.1", "vuedraggable": "^4.1.0", "xgplayer": "^3.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7cb72a87d..1d695a0bd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,6 +108,7 @@ specifiers: vue-tsc: ^1.6.5 vue-types: ^5.0.2 vue-virtual-scroller: 2.0.0-beta.7 + vue-waterfall-plugin-next: ^2.2.1 vue3-danmaku: 1.4.0-beta.1 vuedraggable: ^4.1.0 xgplayer: ^3.0.2 @@ -157,6 +158,7 @@ dependencies: vue-router: 4.2.0_vue@3.3.2 vue-types: 5.0.2_vue@3.3.2 vue-virtual-scroller: 2.0.0-beta.7_vue@3.3.2 + vue-waterfall-plugin-next: 2.2.1_vue@3.3.2 vue3-danmaku: 1.4.0-beta.1_vue@3.3.2 vuedraggable: 4.1.0_vue@3.3.2 xgplayer: 3.0.2 @@ -11966,6 +11968,33 @@ packages: vue-resize: 2.0.0-alpha.1_vue@3.3.2 dev: false + /vue-waterfall-plugin-next/2.2.0_vue@3.3.2: + resolution: + { + integrity: sha512-rhrTdAlBnMWWt6737L+E08A7itgK3wHTy1NsSDgR9EPiBPuHYlth8jL2/hp2gIMAS4XUxJBtitfNUyK5qynkEA== + } + dependencies: + animate.css: 4.1.1 + element-plus: 2.3.4_vue@3.3.2 + transitivePeerDependencies: + - "@vue/composition-api" + - vue + dev: false + + /vue-waterfall-plugin-next/2.2.1_vue@3.3.2: + resolution: + { + integrity: sha512-wEPT9D9VLTPWxGKrIusBxj9JVyXyXU6RLEqKIm3mJt/DeaTUvKu0sZjLOKK9UztkcJV2LaRALwRoCDOOKbLsiw== + } + dependencies: + animate.css: 4.1.1 + element-plus: 2.3.4_vue@3.3.2 + vue-waterfall-plugin-next: 2.2.0_vue@3.3.2 + transitivePeerDependencies: + - "@vue/composition-api" + - vue + dev: false + /vue/3.3.2: resolution: { diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts index 4ce9a4a7a..5fb555b92 100644 --- a/src/router/modules/components.ts +++ b/src/router/modules/components.ts @@ -31,6 +31,15 @@ export default { title: $t("menus.hsmessage") } }, + { + path: "/components/waterfall", + name: "Waterfall", + component: () => import("@/views/components/waterfall/index.vue"), + meta: { + title: $t("menus.hswaterfall"), + extraIcon: "IF-pure-iconfont-new svg" + } + }, { path: "/components/video", name: "Video", diff --git a/src/views/components/waterfall/api.ts b/src/views/components/waterfall/api.ts new file mode 100644 index 000000000..7e3439ce1 --- /dev/null +++ b/src/views/components/waterfall/api.ts @@ -0,0 +1,38 @@ +export function randomID(length = 6) { + return Number( + Math.random().toString().substr(3, length) + Date.now() + ).toString(36); +} + +const COLORS = ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"]; + +function getRandomNum(min: number, max: number) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +function randomColor() { + return COLORS[getRandomNum(0, 4)]; +} + +const website = "https://www.getphotoblanket.com"; + +export const getList = ({ page = 1, pageSize = 20 }) => { + const url = `${website}/products.json?page=${page}&limit=${pageSize}`; + return fetch(url) + .then(res => res.json()) + .then(res => res.products) + .then(res => { + return res.map((item: any) => { + return { + id: randomID(), + star: false, + price: item.variants[0].price, + src: { + original: item.images[0].src + }, + backgroundColor: randomColor(), + name: item.title + }; + }); + }); +}; diff --git a/src/views/components/waterfall/error.png b/src/views/components/waterfall/error.png new file mode 100644 index 0000000000000000000000000000000000000000..aabee2d57798ef092ff81190e8faf322741067c6 GIT binary patch literal 1527 zcmVPx)u}MThRA@u(SzT-tRTMtw&Ms)_53#hJduG>Ipbtbe3Yv(T$b%8Vs3B1idEh}b zXe1E?qrpUYF$RAy8viljMHGoKU<7?IYW(5BVvG`fP*cP1z0<1ImM+C^J9Et4>^9Tw z?#?XJ#*pkyCcAs*obR0PocnX`U4-+z;d$;qGzk3P8Ej;rk%5>IXbhp40gSC)GXt4S z=E6iG(VWlcTZ9nJ<^h0aL~KFC!gup9b4%&F={LWbdB|~`4M7jJ);j^0e{Cw2Iv&KCMnG%56#$-( zV+;`|q?E}LhU>Z=%=||j%%bi#BHCM%fa|(Dn0ZfJV~DszO8IOc1D^rF$~d@)_^6cf znXn9O27p)N7%J)x648P{79M2gmt*2SKt!*F5x55c-i~Rgq<%jUy=i{T&@kFSLsZ5xnQwC(=fki$a04@cJ`)6d-@h@HN_}duGMUUu%d!lC zY0WH?0C2+h{Tw2$27vih4zX;2~GDJKv0|ferXknD-6Vc>qn9XLdK*U!NaYeZg z%)H!jobPH9$Ye5$EzA0)9srchfd9Q~y|&HChLO14LA)c}nBlECN!>+ry$?wDCO=U0IfaVE|~Ykb$Oj zI&JEx$yTuza$Psi%#%B52$?&G=>3vRHk*A!2(gNYZZdtcMTj`1&QVI4tZXz!wbn}j;HNOGu=mXTx8peN zkqBt5O%ZlU7^sv6b} ztk&9;$?I$2>?NXYkqEf1yNj8t9l-w~qR>5}UP7l%om!emBuu4Q5gQSAODU(+OvXmV zNnG4bCy#?=&J@<;!NEbZ)wkyJ`Bu;K+Jq3Th}i1;e&N%s^QK7CT0a2*IcCmTmNhal zF_9BOjF{iaWO8J5bTrr0)HKrB*_o?VGx@&1J(Ws57byc;Yctl~s5gp1c_GC5@$vD) zb=Fn2OirHefD2&GaLzc%%p-|JBA3tS&m@yc dxaWNa{sYIBQ%}%+mMj1O002ovPDHLkV1m5u+=l=F literal 0 HcmV?d00001 diff --git a/src/views/components/waterfall/index.vue b/src/views/components/waterfall/index.vue new file mode 100644 index 000000000..577540fe2 --- /dev/null +++ b/src/views/components/waterfall/index.vue @@ -0,0 +1,151 @@ + + + diff --git a/src/views/components/waterfall/loading.png b/src/views/components/waterfall/loading.png new file mode 100644 index 0000000000000000000000000000000000000000..8f9e6649ca93cff5d39516b1732a4f0fef483b25 GIT binary patch literal 1302 zcmV+x1?l>UP)Px(&`Cr=RA@u(nO$gHMHI*X=iUuTL~4unO;NB~zvzP?N=&?SW)njrjf#lYV(F7Y zwTej5`k?JoOHmLN#NtB>8Y_y3ZC7Y_@66qe2({uv!CLj9Rs|99MZrckb7aD9xLG!v zO?K<RH)H|N|rXU-+`_@ExQAC~~C9<bJIZ( zlqxWPUu>AR0K{>8HxW$(_!NKwuo}QA50QfT<6^+H3*coU+5=z=fH%}bL@AhaBJ#P1 znVFfH9v>h7xm_@A0Wijt01Pwpg8B0K{EcB4PSn77+Yfs0gke~UqUeWKU|I$+#@q(r zG!Y$9N=?Rbyp@O^2XGX?F=qbJ8(1op)|AWTNg|pQ5nTy0|Hz8SM-`aU%Y|tNz_S1z z0Pq?!A2r4tCZaWILqz0D5&1xCeYX04k|Yz(xk&))E1~8eopa6|3d8W2QtGQ_U|I%f zW|2lRg+k$aA{r;6dja_0U`qZVfI~{DgovcxJaYhrLSc6h1W&hW%yRXa`KmaM@6%cz ztLhqKMnz;}1;~fze5&y<{r&wP4h;?cQ~fgy@CtzZa*bH2JP~Q7R9M-(Z6Z=6q9QZD zTb;95EUqn=%bSR36M*rQcjiJZo6YX71-PO5(yi36X7sGJ?*n)=1>iStZivXg9>l-c zTI&Pp`HIEj?X$D99%gqYlUYA9GV*<00KY5E7_t%>ziW*E>dg7Ih#aWGSZj}q$UV$F z;AQIq__AOn#x14eoZGVk06*<%X5L_oxr>Mj&N=U$ZM_7ri<$QsW1a`_Y7hkDQ4}5T z8Gv%ReC^oS*m+~jCjcHyXZ)@YAtL%yDRpHW$F~BA0i4lV`&w&mbUlEGysfp~9>?($ zMDz|3J*kwMKb^WB0Kf<{Pg`pbiOANzzP?q%!^3~|j0b$YpEz;iicBWsk5g!^*QHOp zZuh`ZX5M72-7F$gM6_2a^-|9Oh{zVL^^`H@EdWmiL9ii;q6H;)$30+-@nuBa%wIh& zjWOT&vYVMNt4)?&3qV9Cl~Q*W3I!bmL4k;-lu}!I1^_@c`|btsqQA*0rH=FrKsEbX zYkg(vkJ7rAuWk*YpP2bNW6U}tI_vKW%*^$Q#cl<7otdAD<9H_#?I)sVlu~c@62M&c zHOAxsYy_~Dnd>&jI_`nWm2&<@2H*lS59V^Y{(*sk--96dO)2F&7j;L+0c!I=rTy}l zG3F5fhec$+*7}8>0RZqYGk@&+O8`8?9n5^HX8=;!_ZJaat+l?q(N(qMAr!~4kMH|^ zqN>FIXp$sD&bcoDyvNMGO}XgkI6&I6BuOTtDEiD=yI(|h20`#p6h;0TxjcYI3hj87 zZmZOr&lqzCz)g!~-zCfGb{N@cjz$1Ul3e4QJ5NNhQYyQYEgkR7)f#B6-60}x0NBCI z{vOb9bR$5)e?M@}U7gKlf9-mJN+!MlV7gL1_^#l0%zX1w#{1_BJm8$$-i%VKGGQ1F zFVft#m5&|!n0Z$->(qu&GdgXNAtL9y(|)pCF1KoMaBzZ%CPc)4xtYjjvnQKbXb!*_ zGvDcIMyXvg%@xz2V2$u57T|!UYgGLvj6}9 M07*qoM6N<$g41qqOaK4? literal 0 HcmV?d00001