This commit is contained in:
lik
2026-05-28 17:06:18 +08:00
parent a93a75b3c6
commit db0f47d994
582 changed files with 8060 additions and 1781 deletions

View File

@@ -14,6 +14,10 @@ export default class ImageViewer extends SuperComponent {
type: null;
value?: string | boolean | object;
};
imageProps?: {
type: ObjectConstructor;
value?: import("../image/type").TdImageProps;
};
images?: {
type: ArrayConstructor;
value?: string[];

View File

@@ -1 +1 @@
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><wxs src="./image-viewer.wxs" module="utils"/><view wx:if="{{visible}}" id="{{classPrefix}}" class="{{classPrefix}} class {{prefix}}-class" style="{{_._style([style, customStyle, '--td-image-viewer-top: ' + maskTop + 'px'])}}" aria-modal="{{true}}" aria-role="dialog" aria-label="图片查看器" catchtouchmove="true"><view class="{{classPrefix}}__mask" data-source="overlay" bind:tap="onClose" style="{{ 'background-color: ' + backgroundColor }}" aria-role="button" aria-label="关闭"/><block wx:if="{{images && images.length}}"><view class="{{classPrefix}}__content"><swiper class="swiper" style="{{swiperStyle[currentSwiperIndex].style}}" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange" bindtap="onClose" tabindex="0"><swiper-item wx:for="{{images}}" wx:key="index" class="{{classPrefix}}__preview-image"><t-image wx:if="{{!lazy || utils.shouldLoadImage(index, currentSwiperIndex, loadedImageIndexes) }}" t-class="t-image--external" style="{{imagesStyle[index].style || ''}}" mode="aspectFit" src="{{item}}" data-index="{{index}}" class="{{classPrefix}}__image" bindload="onImageLoadSuccess"></t-image></swiper-item></swiper></view><view class="{{classPrefix}}__nav"><view class="{{classPrefix}}__nav-close" catch:tap="onClose" aria-role="button" aria-label="关闭"><slot name="close-btn"/><template wx:if="{{_closeBtn}}" is="icon" data="{{ ..._closeBtn }}"/></view><view wx:if="{{showIndex}}" class="{{classPrefix}}__nav-index">{{currentSwiperIndex + 1}}/{{images.length}}</view><view class="{{classPrefix}}__nav-delete" bind:tap="onDelete" aria-role="button" aria-label="删除"><slot name="delete-btn"/><template is="icon" data="{{ ..._deleteBtn }}"/></view></view></block></view>
<import src="../common/template/icon.wxml"/><wxs src="../common/utils.wxs" module="_"/><wxs src="./image-viewer.wxs" module="utils"/><view wx:if="{{visible}}" id="{{classPrefix}}" class="{{classPrefix}} class {{prefix}}-class" style="{{_._style([style, customStyle, '--td-image-viewer-top: ' + maskTop + 'px'])}}" aria-modal="{{true}}" aria-role="dialog" aria-label="图片查看器" catchtouchmove="true"><view class="{{classPrefix}}__mask" data-source="overlay" bind:tap="onClose" style="{{_._style([backgroundColor && '--td-image-viewer-mask-bg-color: ' + backgroundColor])}}" aria-role="button" aria-label="关闭"/><block wx:if="{{images && images.length}}"><view class="{{classPrefix}}__content"><swiper class="swiper" style="{{swiperStyle[currentSwiperIndex].style}}" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange" bindtap="onClose" tabindex="0"><swiper-item wx:for="{{images}}" wx:key="index" class="{{classPrefix}}__preview-image"><t-image wx:if="{{!lazy || utils.shouldLoadImage(index, currentSwiperIndex, loadedImageIndexes) }}" t-class="{{prefix}}-image--external" class="{{classPrefix}}__image" style="{{imagesStyle[index].style || ''}}" data-index="{{index}}" src="{{item}}" mode="{{imageProps && imageProps.mode || 'aspectFit'}}" lazy="{{imageProps && imageProps.lazy || false}}" loading="{{imageProps && imageProps.loading || 'default'}}" shape="{{imageProps && imageProps.shape || 'square'}}" webp="{{imageProps && imageProps.webp || false}}" show-menu-by-longpress="{{imageProps && imageProps.showMenuByLongpress || false}}" bindload="onImageLoadSuccess"></t-image></swiper-item></swiper></view><view class="{{classPrefix}}__nav"><view class="{{classPrefix}}__nav-close" catch:tap="onClose" aria-role="button" aria-label="关闭"><slot name="close-btn"/><template wx:if="{{_closeBtn}}" is="icon" data="{{ ..._closeBtn }}"/></view><view wx:if="{{showIndex}}" class="{{classPrefix}}__nav-index">{{currentSwiperIndex + 1}}/{{images.length}}</view><view class="{{classPrefix}}__nav-delete" bind:tap="onDelete" aria-role="button" aria-label="删除"><slot name="delete-btn"/><template is="icon" data="{{ ..._deleteBtn }}"/></view></view></block></view>

View File

@@ -1 +1,13 @@
@import '../common/style/index.wxss';.t-image-viewer{position:fixed;top:var(--td-image-viewer-top,var(--td-position-fixed-top,0));left:0;bottom:0;right:0;z-index:1001;transform:translateZ(0);overflow:hidden}.t-image-viewer__mask{position:absolute;z-index:1000;left:0;top:0;width:100%;height:100%}.t-image-viewer__content{width:100vw;display:inline-block;position:absolute;top:50%;transform:translateY(-50%);z-index:1005}.t-image-viewer .swiper{outline:0}.t-image-viewer__image{width:100%;display:inline-block;position:absolute;top:50%;transform:translateY(-50%)}.t-image-viewer .t-image--external{width:inherit;height:inherit;display:block}.t-image-viewer__nav{width:100%;position:absolute;display:flex;align-items:center;justify-content:space-between;height:var(--td-image-viewer-nav-height,96rpx);background-color:var(--td-image-viewer-nav-bg-color,var(--td-font-gray-3,rgba(0,0,0,.4)));left:0;color:var(--td-image-viewer-nav-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));z-index:1005}.t-image-viewer__nav-close{margin-left:var(--td-image-viewer-close-margin-left,var(--td-spacer-1,24rpx))}.t-image-viewer__nav-close:empty{display:none}.t-image-viewer__nav-delete{margin-right:var(--td-image-viewer-delete-margin-right,var(--td-spacer-1,24rpx))}.t-image-viewer__nav-delete:empty{display:none}.t-image-viewer__nav-close,.t-image-viewer__nav-delete{font-size:48rpx}.t-image-viewer__nav-index{flex:1;font-size:var(--td-image-viewer-nav-index-font-size,var(--td-font-size-base,28rpx));text-align:center}
@import '../common/style/index.wxss';.t-image-viewer{position:fixed;top:var(--td-image-viewer-top,var(--td-position-fixed-top,0));left:0;bottom:0;right:0;z-index:1001;transform:translateZ(0);overflow:hidden;}
.t-image-viewer__mask{position:absolute;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:var(--td-image-viewer-mask-bg-color,var(--td-mask-active,rgba(0,0,0,.6)));}
.t-image-viewer__content{width:100vw;display:inline-block;position:absolute;top:50%;transform:translateY(-50%);z-index:1005;}
.t-image-viewer .swiper{outline:0;}
.t-image-viewer__image{width:100%;display:inline-block;position:absolute;top:50%;transform:translateY(-50%);}
.t-image-viewer .t-image--external{width:inherit;height:inherit;display:block;}
.t-image-viewer__nav{width:100%;position:absolute;display:flex;align-items:center;justify-content:space-between;height:var(--td-image-viewer-nav-height,96rpx);background-color:var(--td-image-viewer-nav-bg-color,#000);left:0;color:var(--td-image-viewer-nav-color,var(--td-text-color-anti,var(--td-font-white-1,#fff)));z-index:1005;}
.t-image-viewer__nav-close{margin-left:var(--td-image-viewer-close-margin-left,var(--td-spacer-1,24rpx));}
.t-image-viewer__nav-close:empty{display:none;}
.t-image-viewer__nav-delete{margin-right:var(--td-image-viewer-delete-margin-right,var(--td-spacer-1,24rpx));}
.t-image-viewer__nav-delete:empty{display:none;}
.t-image-viewer__nav-close,.t-image-viewer__nav-delete{font-size:48rpx;}
.t-image-viewer__nav-index{flex:1;font-size:var(--td-image-viewer-nav-index-font-size,var(--td-font-size-base,28rpx));text-align:center;}

View File

@@ -1 +1 @@
const props={backgroundColor:{type:String,value:"rgba(0, 0, 0, 1)"},closeBtn:{type:null,value:!1},deleteBtn:{type:null,value:!1},images:{type:Array,value:[]},initialIndex:{type:Number,value:0},lazy:{type:Boolean,value:!0},showIndex:{type:Boolean,value:!1},usingCustomNavbar:{type:Boolean,value:!1},visible:{type:Boolean,value:null},defaultVisible:{type:Boolean,value:!1}};export default props;
const props={backgroundColor:{type:String,value:""},closeBtn:{type:null,value:!1},deleteBtn:{type:null,value:!1},imageProps:{type:Object},images:{type:Array,value:[]},initialIndex:{type:Number,value:0},lazy:{type:Boolean,value:!0},showIndex:{type:Boolean,value:!1},usingCustomNavbar:{type:Boolean,value:!1},visible:{type:Boolean,value:null},defaultVisible:{type:Boolean,value:!1}};export default props;

View File

@@ -1,3 +1,4 @@
import { ImageProps } from '../image/index';
export interface TdImageViewerProps {
backgroundColor?: {
type: StringConstructor;
@@ -11,6 +12,10 @@ export interface TdImageViewerProps {
type: null;
value?: string | boolean | object;
};
imageProps?: {
type: ObjectConstructor;
value?: ImageProps;
};
images?: {
type: ArrayConstructor;
value?: Array<string>;