From c77e61960dcf49d70ef624cf2812b81851340184 Mon Sep 17 00:00:00 2001 From: xiaoyatong <84436086+xiaoyatong@users.noreply.github.com> Date: Fri, 22 Nov 2024 19:00:29 +0800 Subject: [PATCH] feat(imagepreview): harmony adaptation (#2791) --- packages/nutui-taro-demo/src/app.config.ts | 104 ++++++++++++++++-- src/config.json | 2 +- .../imagepreview/demos/taro/demo1.tsx | 8 +- .../imagepreview/demos/taro/demo2.tsx | 17 +-- .../imagepreview/demos/taro/demo3.tsx | 8 +- .../imagepreview/demos/taro/demo4.tsx | 8 +- .../imagepreview/demos/taro/demo5.tsx | 8 +- .../imagepreview/demos/taro/demo6.tsx | 8 +- .../imagepreview/demos/taro/demo7.tsx | 8 +- src/packages/imagepreview/imagepreview.scss | 4 + 10 files changed, 134 insertions(+), 41 deletions(-) diff --git a/packages/nutui-taro-demo/src/app.config.ts b/packages/nutui-taro-demo/src/app.config.ts index 584a92e8b6..7357a2dbf7 100644 --- a/packages/nutui-taro-demo/src/app.config.ts +++ b/packages/nutui-taro-demo/src/app.config.ts @@ -2,37 +2,125 @@ const subPackages = [ { "root": "base", - "pages": [] + "pages": [ + "pages/button/index", + "pages/cell/index", + "pages/configprovider/index", + "pages/icon/index", + "pages/image/index", + "pages/overlay/index" + ] }, { "root": "layout", - "pages": [] + "pages": [ + "pages/divider/index", + "pages/grid/index", + "pages/layout/index", + "pages/safearea/index", + "pages/space/index", + "pages/sticky/index" + ] }, { "root": "nav", - "pages": [] + "pages": [ + "pages/backtop/index", + "pages/elevator/index", + "pages/fixednav/index", + "pages/hoverbutton/index", + "pages/navbar/index", + "pages/sidenavbar/index", + "pages/tabbar/index", + "pages/tabs/index" + ] }, { "root": "dentry", - "pages": [] + "pages": [ + "pages/address/index", + "pages/calendar/index", + "pages/calendarcard/index", + "pages/cascader/index", + "pages/checkbox/index", + "pages/datepicker/index", + "pages/form/index", + "pages/input/index", + "pages/inputnumber/index" + ] }, { "root": "dataentry", - "pages": [] + "pages": [ + "pages/menu/index", + "pages/numberkeyboard/index", + "pages/picker/index", + "pages/radio/index", + "pages/range/index", + "pages/rate/index", + "pages/searchbar/index", + "pages/shortpassword/index", + "pages/signature/index", + "pages/switch/index", + "pages/textarea/index", + "pages/uploader/index" + ] }, { "root": "feedback", - "pages": [] + "pages": [ + "pages/actionsheet/index", + "pages/badge/index", + "pages/dialog/index", + "pages/drag/index", + "pages/empty/index", + "pages/infiniteloading/index", + "pages/loading/index", + "pages/noticebar/index", + "pages/notify/index", + "pages/popover/index", + "pages/popup/index", + "pages/pulltorefresh/index", + "pages/resultpage/index", + "pages/skeleton/index", + "pages/swipe/index", + "pages/toast/index" + ] }, { "root": "exhibition", "pages": [ - "pages/countdown/index" + "pages/animate/index", + "pages/animatingnumbers/index", + "pages/avatar/index", + "pages/circleprogress/index", + "pages/collapse/index", + "pages/countdown/index", + "pages/ellipsis/index", + "pages/imagepreview/index", + "pages/indicator/index", + "pages/pagination/index", + "pages/price/index", + "pages/progress/index", + "pages/steps/index", + "pages/swiper/index", + "pages/table/index", + "pages/tag/index", + "pages/tour/index", + "pages/video/index", + "pages/virtuallist/index" ] }, { "root": "business", - "pages": [] + "pages": [ + "pages/avatarcropper/index", + "pages/barrage/index", + "pages/card/index", + "pages/timeselect/index", + "pages/trendarrow/index", + "pages/watermark/index" + ] } ]; diff --git a/src/config.json b/src/config.json index 4ab319fb40..1ba789e265 100644 --- a/src/config.json +++ b/src/config.json @@ -1002,7 +1002,7 @@ "author": "vickyYE" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "ImagePreview", "type": "component", "cName": "图片预览", diff --git a/src/packages/imagepreview/demos/taro/demo1.tsx b/src/packages/imagepreview/demos/taro/demo1.tsx index c0d521b574..dbbf1edc15 100644 --- a/src/packages/imagepreview/demos/taro/demo1.tsx +++ b/src/packages/imagepreview/demos/taro/demo1.tsx @@ -4,16 +4,16 @@ import { ImagePreview, Cell } from '@nutui/nutui-react-taro' const Demo1 = () => { const images = [ { - src: '//fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', }, ] const [showPreview, setShowPreview] = useState(false) diff --git a/src/packages/imagepreview/demos/taro/demo2.tsx b/src/packages/imagepreview/demos/taro/demo2.tsx index 6ce71753bf..c06d724eb1 100644 --- a/src/packages/imagepreview/demos/taro/demo2.tsx +++ b/src/packages/imagepreview/demos/taro/demo2.tsx @@ -1,19 +1,20 @@ import React, { useState } from 'react' -import { ImagePreview, Cell } from '@nutui/nutui-react-taro' +import { ImagePreview, Cell, Image } from '@nutui/nutui-react-taro' +import { View } from '@tarojs/components' const Demo2 = () => { const images = [ { - src: '//fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', }, ] const [init, setInit] = useState(0) @@ -22,7 +23,7 @@ const Demo2 = () => { <> {images.map((image, index) => ( - { setShowPreview(true) @@ -30,8 +31,8 @@ const Demo2 = () => { }} style={{ marginRight: '10px' }} > - {image.src} - + + ))} { const images = [ { - src: '//fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', }, ] const [showPreview, setShowPreview] = useState(false) diff --git a/src/packages/imagepreview/demos/taro/demo4.tsx b/src/packages/imagepreview/demos/taro/demo4.tsx index 4017eb6e50..a9926e07c4 100644 --- a/src/packages/imagepreview/demos/taro/demo4.tsx +++ b/src/packages/imagepreview/demos/taro/demo4.tsx @@ -4,16 +4,16 @@ import { ImagePreview, Cell } from '@nutui/nutui-react-taro' const Demo4 = () => { const images = [ { - src: '//fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', }, ] const [init, setInit] = useState(1) diff --git a/src/packages/imagepreview/demos/taro/demo5.tsx b/src/packages/imagepreview/demos/taro/demo5.tsx index d9f420367f..c92a79838e 100644 --- a/src/packages/imagepreview/demos/taro/demo5.tsx +++ b/src/packages/imagepreview/demos/taro/demo5.tsx @@ -4,16 +4,16 @@ import { ImagePreview, Cell } from '@nutui/nutui-react-taro' const Demo5 = () => { const images = [ { - src: '//fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', }, ] const [showPreview, setShowPreview] = useState(false) diff --git a/src/packages/imagepreview/demos/taro/demo6.tsx b/src/packages/imagepreview/demos/taro/demo6.tsx index f4d4c7e559..4267b17a20 100644 --- a/src/packages/imagepreview/demos/taro/demo6.tsx +++ b/src/packages/imagepreview/demos/taro/demo6.tsx @@ -4,19 +4,19 @@ import { ImagePreview, Cell } from '@nutui/nutui-react-taro' const Demo6 = () => { const images = [ { - src: '//fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', index: 1, }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', index: 2, }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', index: 3, }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', index: 4, }, ] diff --git a/src/packages/imagepreview/demos/taro/demo7.tsx b/src/packages/imagepreview/demos/taro/demo7.tsx index edadba194a..6df9afa00f 100644 --- a/src/packages/imagepreview/demos/taro/demo7.tsx +++ b/src/packages/imagepreview/demos/taro/demo7.tsx @@ -4,16 +4,16 @@ import { ImagePreview, Cell } from '@nutui/nutui-react-taro' const Demo7 = () => { const images = [ { - src: '//fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', + src: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg', }, { - src: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', + src: 'https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg', }, ] const [showPreview, setShowPreview] = useState(false) diff --git a/src/packages/imagepreview/imagepreview.scss b/src/packages/imagepreview/imagepreview.scss index 9449708d90..7118f671b6 100644 --- a/src/packages/imagepreview/imagepreview.scss +++ b/src/packages/imagepreview/imagepreview.scss @@ -39,6 +39,10 @@ background: transparent; color: $white; + .nut-icon { + color: $white; + } + &.top-right { top: 50px; right: 20px;