初始化项目, 添加TDesign等包

miniprogram/miniprogram_npm/tdesign-miniprogram/image/image-info.json

@@ -0,0 +1 @@
+{"key":"Image","label":"图片","icon":"","properties":[{"key":"error","type":["String","TNode"],"defaultValue":"'default'","desc":"加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”","label":""},{"key":"externalClasses","type":["Array"],"defaultValue":"","desc":"组件类名，分别用于设置加载组件外层元素，中间内容等元素类名","label":""},{"key":"lazy","type":["Boolean"],"defaultValue":"false","desc":"是否开启图片懒加载","label":""},{"key":"loading","type":["String","TNode"],"defaultValue":"'default'","desc":"加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中”","label":""},{"key":"MP_EXCLUDE_PROPS","type":["String"],"defaultValue":"","desc":"为避免重复或冲突，需要过滤掉的小程序原生属性","label":""},{"key":"MP_PROPS","type":["String"],"defaultValue":"","desc":"[小程序原生属性](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)","label":""},{"key":"shape","type":["String"],"defaultValue":"square","desc":"图片圆角类型","label":""},{"key":"src","type":["String"],"defaultValue":"","desc":"图片链接","label":""}],"events":[{"key":"error","desc":"图片加载失败时触发","label":""},{"key":"load","desc":"图片加载完成时触发","label":""}]}

miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.d.ts

@@ -0,0 +1,26 @@
+import { SuperComponent } from '../common/src/index';
+export default class Image extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdImageProps;
+    data: {
+        prefix: string;
+        isLoading: boolean;
+        isFailed: boolean;
+        innerStyle: string;
+        classPrefix: string;
+    };
+    preSrc: any;
+    observers: {
+        src(): void;
+        'width, height'(width: any, height: any): void;
+    };
+    methods: {
+        onLoaded(e: any): void;
+        onLoadError(e: any): void;
+        calcSize(width: any, height: any): void;
+        update(): void;
+    };
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.js

@@ -0,0 +1 @@
+import{__decorate}from"tslib";import{SuperComponent,wxComponent}from"../common/src/index";import ImageProps from"./props";import config from"../common/config";import{addUnit,getRect,appBaseInfo}from"../common/utils";import{compareVersion}from"../common/version";const{prefix:prefix}=config,name=`${prefix}-image`;let Image=class extends SuperComponent{constructor(){super(...arguments),this.externalClasses=[`${prefix}-class`,`${prefix}-class-load`,`${prefix}-class-image`,`${prefix}-class-error`],this.options={multipleSlots:!0},this.properties=ImageProps,this.data={prefix:prefix,isLoading:!0,isFailed:!1,innerStyle:"",classPrefix:name},this.preSrc=void 0,this.observers={src(){this.preSrc!==this.properties.src&&this.update()},"width, height"(e,i){this.calcSize(e,i)}},this.methods={onLoaded(e){const i=appBaseInfo.SDKVersion,{mode:t,tId:s}=this.properties,r=compareVersion(i,"2.10.3")<0;if("heightFix"===t&&r){const{height:i,width:t}=e.detail;getRect(this,`#${s||"image"}`).then(e=>{const{height:s}=e,r=(s/i*t).toFixed(2);this.setData({innerStyle:`height: ${addUnit(s)}; width: ${r}px;`})})}this.setData({isLoading:!1,isFailed:!1}),this.triggerEvent("load",e.detail)},onLoadError(e){this.setData({isLoading:!1,isFailed:!0}),this.triggerEvent("error",e.detail)},calcSize(e,i){let t="";e&&(t+=`width: ${addUnit(e)};`),i&&(t+=`height: ${addUnit(i)};`),this.setData({innerStyle:t})},update(){const{src:e}=this.properties;this.preSrc=e,e?this.setData({isLoading:!0,isFailed:!1}):this.onLoadError({errMsg:"图片链接为空"})}}}};Image=__decorate([wxComponent()],Image);export default Image;

miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.json

@@ -0,0 +1 @@
+{"component":true,"styleIsolation":"apply-shared","usingComponents":{"t-loading":"../loading/loading","t-icon":"../icon/icon"}}

miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.wxml

@@ -0,0 +1 @@
+<wxs src="../common/utils.wxs" module="_"/><view style="{{_._style([style, customStyle])}}" class="class {{prefix}}-class {{classPrefix}}"><view wx:if="{{isLoading}}" style="{{_._style([innerStyle])}}" class="{{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}" aria-hidden="{{ariaHidden}}"><t-loading wx:if="{{loading === 'default'}}" theme="dots" size="44rpx" loading inherit-color t-class="t-class-load" t-class-text="{{classPrefix}}--loading-text"></t-loading><view wx:elif="{{loading !== '' && loading !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load">{{loading}}</view><slot wx:else name="loading"/></view><view wx:elif="{{isFailed}}" style="{{_._style([innerStyle])}}" class="{{classPrefix}}__mask {{classPrefix}}--failed {{classPrefix}}--shape-{{shape}} {{prefix}}-class-error" aria-hidden="{{ariaHidden}}"><view wx:if="{{error === 'default'}}" style="font-size: 44rpx" class="{{prefix}}-class-load"><t-icon name="close" aria-role="img" aria-label="加载失败"/></view><view wx:elif="{{error && error !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load">{{error}}</view><slot wx:else name="error"/></view><image id="{{tId||'image'}}" wx:if="{{ !isFailed }}" style="{{_._style([innerStyle])}}" class="{{classPrefix}}__img {{classPrefix}}--shape-{{shape}} {{isLoading ? classPrefix + '--lazy' : ''}} {{prefix}}-class-image" src="{{src}}" mode="{{mode}}" webp="{{webp}}" lazy-load="{{lazy}}" bind:load="onLoaded" bind:error="onLoadError" show-menu-by-longpress="{{showMenuByLongpress}}" aria-hidden="{{ariaHidden || isLoading || isFailed}}" aria-label="{{ariaLabel}}"/></view>

miniprogram/miniprogram_npm/tdesign-miniprogram/image/image.wxss

@@ -0,0 +1,9 @@
+@import '../common/style/index.wxss';.t-image{position:relative;display:inline-block;}
+.t-image__img,.t-image__mask{color:var(--td-image-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));vertical-align:top;width:inherit;height:inherit;}
+.t-image__mask{display:flex;align-items:center;justify-content:center;background-color:var(--td-image-loading-bg-color,var(--td-bg-color-secondarycontainer,var(--td-gray-color-1,#f3f3f3)));color:var(--td-image-loading-color,var(--td-text-color-placeholder,var(--td-font-gray-3,rgba(0,0,0,.4))));}
+.t-image--loading-text{width:0;height:0;}
+.t-image__common{width:100%;height:100%;}
+.t-image--lazy{position:absolute;top:0;left:0;z-index:-1;}
+.t-image--shape-circle{border-radius:50%;overflow:hidden;}
+.t-image--shape-round{border-radius:var(--td-image-round-radius,var(--td-radius-default,12rpx));overflow:hidden;}
+.t-image--shape-square{border-radius:0;overflow:hidden;}

miniprogram/miniprogram_npm/tdesign-miniprogram/image/index.d.ts

@@ -0,0 +1,4 @@
+import { TdImageProps } from './type';
+export declare type ImageProps = TdImageProps;
+export * from './props';
+export * from './image';

miniprogram/miniprogram_npm/tdesign-miniprogram/image/index.js

@@ -0,0 +1 @@
+export*from"./props";export*from"./image";

miniprogram/miniprogram_npm/tdesign-miniprogram/image/props.d.ts

@@ -0,0 +1,3 @@
+import { TdImageProps } from './type';
+declare const props: TdImageProps;
+export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/image/props.js

@@ -0,0 +1 @@
+const props={error:{type:String,value:"default"},height:{type:null},lazy:{type:Boolean,value:!1},loading:{type:String,value:"default"},mode:{type:String,value:"scaleToFill"},shape:{type:String,value:"square"},showMenuByLongpress:{type:Boolean,value:!1},src:{type:String,value:""},tId:{type:String,value:""},webp:{type:Boolean,value:!1},width:{type:null}};export default props;

miniprogram/miniprogram_npm/tdesign-miniprogram/image/type.d.ts

@@ -0,0 +1,46 @@
+export interface TdImageProps {
+    error?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    height?: {
+        type: null;
+        value?: string | number;
+    };
+    lazy?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    loading?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    mode?: {
+        type: StringConstructor;
+        value?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'circle' | 'round' | 'square';
+    };
+    showMenuByLongpress?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    src?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    tId?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    webp?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    width?: {
+        type: null;
+        value?: string | number;
+    };
+}

miniprogram/miniprogram_npm/tdesign-miniprogram/image/type.js

@@ -0,0 +1 @@
+export{};