初始化项目, 添加TDesign等包
This commit is contained in:
93
miniprogram/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.d.ts
vendored
Normal file
93
miniprogram/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.d.ts
vendored
Normal file
@@ -0,0 +1,93 @@
|
||||
import { SuperComponent } from '../common/src/index';
|
||||
export default class ImageViewer extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: {
|
||||
backgroundColor?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
closeBtn?: {
|
||||
type: null;
|
||||
value?: string | boolean | object;
|
||||
};
|
||||
deleteBtn?: {
|
||||
type: null;
|
||||
value?: string | boolean | object;
|
||||
};
|
||||
images?: {
|
||||
type: ArrayConstructor;
|
||||
value?: string[];
|
||||
};
|
||||
initialIndex?: {
|
||||
type: NumberConstructor;
|
||||
value?: Number;
|
||||
};
|
||||
lazy?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
showIndex?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
usingCustomNavbar?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultVisible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
};
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
currentSwiperIndex: number;
|
||||
loadedImageIndexes: any[];
|
||||
windowHeight: number;
|
||||
windowWidth: number;
|
||||
swiperStyle: {};
|
||||
imagesStyle: {};
|
||||
maskTop: number;
|
||||
};
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
controlledProps: {
|
||||
key: string;
|
||||
event: string;
|
||||
}[];
|
||||
ready(): void;
|
||||
observers: {
|
||||
'visible,initialIndex,images'(visible: any, initialIndex: any, images: any): void;
|
||||
closeBtn(v: any): void;
|
||||
deleteBtn(v: any): void;
|
||||
};
|
||||
methods: {
|
||||
calcMaskTop(): void;
|
||||
saveScreenSize(): void;
|
||||
calcImageDisplayStyle(imageWidth: any, imageHeight: any): {
|
||||
styleObj: {
|
||||
width: string;
|
||||
height: string;
|
||||
left: string;
|
||||
transform: string;
|
||||
};
|
||||
} | {
|
||||
styleObj: {
|
||||
width: string;
|
||||
height: string;
|
||||
left?: undefined;
|
||||
transform?: undefined;
|
||||
};
|
||||
};
|
||||
onImageLoadSuccess(e: WechatMiniprogram.TouchEvent): void;
|
||||
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
|
||||
onClose(e: any): void;
|
||||
onDelete(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import{styles,calcIcon,systemInfo}from"../common/utils";import config from"../common/config";import props from"./props";const{prefix:prefix}=config,name=`${prefix}-image-viewer`;let ImageViewer=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`],this.properties=Object.assign({},props),this.data={prefix:prefix,classPrefix:name,currentSwiperIndex:0,loadedImageIndexes:[],windowHeight:0,windowWidth:0,swiperStyle:{},imagesStyle:{},maskTop:0},this.options={multipleSlots:!0},this.controlledProps=[{key:"visible",event:"close"}],this.observers={"visible,initialIndex,images"(e,t,s){e&&(null==s?void 0:s.length)&&this.setData({loadedImageIndexes:[],currentSwiperIndex:t>=s.length?s.length-1:t})},closeBtn(e){this.setData({_closeBtn:calcIcon(e,"close")})},deleteBtn(e){this.setData({_deleteBtn:calcIcon(e,"delete")})}},this.methods={calcMaskTop(){if(this.data.usingCustomNavbar){const e=(null===wx||void 0===wx?void 0:wx.getMenuButtonBoundingClientRect())||null,{statusBarHeight:t}=systemInfo;e&&t&&this.setData({maskTop:e.top-t+e.bottom})}},saveScreenSize(){const{windowHeight:e,windowWidth:t}=systemInfo;this.setData({windowHeight:e,windowWidth:t})},calcImageDisplayStyle(e,t){const{windowWidth:s,windowHeight:i}=this.data,a=e/t;if(e<s&&t<i)return{styleObj:{width:2*e+"rpx",height:2*t+"rpx",left:"50%",transform:"translate(-50%, -50%)"}};if(a>=1)return{styleObj:{width:"100vw",height:s/a*2+"rpx"}};const n=a*i*2;return n<s?{styleObj:{width:`${n}rpx`,height:"100vh",left:"50%",transform:"translate(-50%, -50%)"}}:{styleObj:{width:"100vw",height:s/e*t*2+"rpx"}}},onImageLoadSuccess(e){const{detail:{width:t,height:s},currentTarget:{dataset:{index:i}}}=e,{mode:a,styleObj:n}=this.calcImageDisplayStyle(t,s),o=this.data.imagesStyle,r=this.data.swiperStyle;this.data.loadedImageIndexes.includes(i)||this.setData({loadedImageIndexes:[...this.data.loadedImageIndexes,i]}),this.setData({swiperStyle:Object.assign(Object.assign({},r),{[i]:{style:`height: ${n.height}`}}),imagesStyle:Object.assign(Object.assign({},o),{[i]:{mode:a,style:styles(Object.assign({},n))}})})},onSwiperChange(e){const{detail:{current:t}}=e;this.setData({currentSwiperIndex:t}),this._trigger("change",{index:t})},onClose(e){const{source:t}=e.currentTarget.dataset;this._trigger("close",{visible:!1,trigger:t||"button",index:this.data.currentSwiperIndex})},onDelete(){this._trigger("delete",{index:this.data.currentSwiperIndex})}}}ready(){this.saveScreenSize(),this.calcMaskTop()}};ImageViewer=__decorate([wxComponent()],ImageViewer);export default ImageViewer;
|
||||
@@ -0,0 +1 @@
|
||||
{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-image":"../image/image","t-icon":"../icon/icon"}}
|
||||
@@ -0,0 +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="{{_._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="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>
|
||||
@@ -0,0 +1,7 @@
|
||||
function shouldLoadImage(index, currentIndex, loadedIndexes) {
|
||||
return Math.abs(index - currentIndex) <= 1 || (loadedIndexes && loadedIndexes.indexOf(index) !== -1);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
shouldLoadImage: shouldLoadImage,
|
||||
};
|
||||
@@ -0,0 +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%;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;}
|
||||
3
miniprogram/miniprogram_npm/tdesign-miniprogram/image-viewer/props.d.ts
vendored
Normal file
3
miniprogram/miniprogram_npm/tdesign-miniprogram/image-viewer/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdImageViewerProps } from './type';
|
||||
declare const props: TdImageViewerProps;
|
||||
export default props;
|
||||
@@ -0,0 +1 @@
|
||||
const props={backgroundColor:{type:String,value:""},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;
|
||||
42
miniprogram/miniprogram_npm/tdesign-miniprogram/image-viewer/type.d.ts
vendored
Normal file
42
miniprogram/miniprogram_npm/tdesign-miniprogram/image-viewer/type.d.ts
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
export interface TdImageViewerProps {
|
||||
backgroundColor?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
closeBtn?: {
|
||||
type: null;
|
||||
value?: string | boolean | object;
|
||||
};
|
||||
deleteBtn?: {
|
||||
type: null;
|
||||
value?: string | boolean | object;
|
||||
};
|
||||
images?: {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string>;
|
||||
};
|
||||
initialIndex?: {
|
||||
type: NumberConstructor;
|
||||
value?: Number;
|
||||
};
|
||||
lazy?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
showIndex?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
usingCustomNavbar?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultVisible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export{};
|
||||
Reference in New Issue
Block a user