tmp
This commit is contained in:
@@ -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[];
|
||||
|
||||
@@ -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>
|
||||
@@ -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;}
|
||||
@@ -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;
|
||||
@@ -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>;
|
||||
|
||||
Reference in New Issue
Block a user