Skip to content

Commit 081711e

Browse files
author
v_guanglwen
committed
feat: 测测测测
1 parent 288c8b0 commit 081711e

File tree

12 files changed

+434
-0
lines changed

12 files changed

+434
-0
lines changed

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/image-info.json

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"key": "Image",
3+
"label": "图片",
4+
"icon": "",
5+
"properties": [
6+
{
7+
"key": "error",
8+
"type": ["String", "TNode"],
9+
"defaultValue": "'default'",
10+
"desc": "加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”",
11+
"label": ""
12+
},
13+
{
14+
"key": "externalClasses",
15+
"type": ["Array"],
16+
"defaultValue": "",
17+
"desc": "组件类名，分别用于设置加载组件外层元素，中间内容等元素类名",
18+
"label": ""
19+
},
20+
{
21+
"key": "lazy",
22+
"type": ["Boolean"],
23+
"defaultValue": "false",
24+
"desc": "是否开启图片懒加载",
25+
"label": ""
26+
},
27+
{
28+
"key": "loading",
29+
"type": ["String", "TNode"],
30+
"defaultValue": "'default'",
31+
"desc": "加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中”",
32+
"label": ""
33+
},
34+
{
35+
"key": "MP_EXCLUDE_PROPS",
36+
"type": ["String"],
37+
"defaultValue": "",
38+
"desc": "为避免重复或冲突，需要过滤掉的小程序原生属性",
39+
"label": ""
40+
},
41+
{
42+
"key": "MP_PROPS",
43+
"type": ["String"],
44+
"defaultValue": "",
45+
"desc": "[小程序原生属性](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)",
46+
"label": ""
47+
},
48+
{
49+
"key": "shape",
50+
"type": ["String"],
51+
"defaultValue": "square",
52+
"desc": "图片圆角类型",
53+
"label": ""
54+
},
55+
{
56+
"key": "src",
57+
"type": ["String"],
58+
"defaultValue": "",
59+
"desc": "图片链接",
60+
"label": ""
61+
}
62+
],
63+
"events": [
64+
{
65+
"key": "error",
66+
"desc": "图片加载失败时触发",
67+
"label": ""
68+
},
69+
{
70+
"key": "load",
71+
"desc": "图片加载完成时触发",
72+
"label": ""
73+
}
74+
]
75+
}

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/image.d.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { SuperComponent } from '../common/src/index';
2+
export default class Image extends SuperComponent {
3+
externalClasses: string[];
4+
options: {
5+
multipleSlots: boolean;
6+
};
7+
properties: import("./type").TdImageProps;
8+
data: {
9+
prefix: string;
10+
isLoading: boolean;
11+
isFailed: boolean;
12+
innerStyle: string;
13+
classPrefix: string;
14+
};
15+
preSrc: string;
16+
observers: {
17+
src(): void;
18+
'width, height'(width: any, height: any): void;
19+
};
20+
methods: {
21+
onLoaded(e: any): void;
22+
onLoadError(e: any): void;
23+
calcSize(width: any, height: any): void;
24+
update(): void;
25+
};
26+
}

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/image.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5+
return c > 3 && r && Object.defineProperty(target, key, r), r;
6+
};
7+
import { SuperComponent, wxComponent } from '../common/src/index';
8+
import ImageProps from './props';
9+
import config from '../common/config';
10+
import { addUnit, getRect, appBaseInfo } from '../common/utils';
11+
import { compareVersion } from '../common/version';
12+
const { prefix } = config;
13+
const name = `${prefix}-image`;
14+
let Image = class Image extends SuperComponent {
15+
constructor() {
16+
super(...arguments);
17+
this.externalClasses = [`${prefix}-class`, `${prefix}-class-load`, `${prefix}-class-image`, `${prefix}-class-error`];
18+
this.options = {
19+
multipleSlots: true,
20+
};
21+
this.properties = ImageProps;
22+
this.data = {
23+
prefix,
24+
isLoading: true,
25+
isFailed: false,
26+
innerStyle: '',
27+
classPrefix: name,
28+
};
29+
this.preSrc = '';
30+
this.observers = {
31+
src() {
32+
if (this.preSrc === this.properties.src)
33+
return;
34+
this.update();
35+
},
36+
'width, height'(width, height) {
37+
this.calcSize(width, height);
38+
},
39+
};
40+
this.methods = {
41+
onLoaded(e) {
42+
const sdkVersion = appBaseInfo.SDKVersion;
43+
const { mode, tId } = this.properties;
44+
const isInCompatible = compareVersion(sdkVersion, '2.10.3') < 0;
45+
if (mode === 'heightFix' && isInCompatible) {
46+
const { height: picHeight, width: picWidth } = e.detail;
47+
getRect(this, `#${tId || 'image'}`).then((rect) => {
48+
const { height } = rect;
49+
const resultWidth = ((height / picHeight) * picWidth).toFixed(2);
50+
this.setData({ innerStyle: `height: ${addUnit(height)}; width: ${resultWidth}px;` });
51+
});
52+
}
53+
this.setData({
54+
isLoading: false,
55+
isFailed: false,
56+
});
57+
this.triggerEvent('load', e.detail);
58+
},
59+
onLoadError(e) {
60+
this.setData({
61+
isLoading: false,
62+
isFailed: true,
63+
});
64+
this.triggerEvent('error', e.detail);
65+
},
66+
calcSize(width, height) {
67+
let innerStyle = '';
68+
if (width) {
69+
innerStyle += `width: ${addUnit(width)};`;
70+
}
71+
if (height) {
72+
innerStyle += `height: ${addUnit(height)};`;
73+
}
74+
this.setData({
75+
innerStyle,
76+
});
77+
},
78+
update() {
79+
const { src } = this.properties;
80+
this.preSrc = src;
81+
if (!src) {
82+
this.onLoadError({ errMsg: '图片链接为空' });
83+
}
84+
else {
85+
this.setData({
86+
isLoading: true,
87+
isFailed: false,
88+
});
89+
}
90+
},
91+
};
92+
}
93+
};
94+
Image = __decorate([
95+
wxComponent()
96+
], Image);
97+
export default Image;

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/image.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"component": true,
3+
"styleIsolation": "apply-shared",
4+
"usingComponents": {
5+
"t-loading": "../loading/loading",
6+
"t-icon": "../icon/icon"
7+
}
8+
}

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/image.wxml

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<wxs src="../common/utils.wxs" module="_" />
2+
3+
<view style="{{_._style([style, customStyle])}}" class="class {{prefix}}-class {{classPrefix}}">
4+
<!-- 加载中占位 -->
5+
<view
6+
wx:if="{{isLoading}}"
7+
style="{{_._style([innerStyle])}}"
8+
class="{{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}"
9+
aria-hidden="{{ariaHidden}}"
10+
>
11+
<t-loading
12+
wx:if="{{loading === 'default'}}"
13+
theme="dots"
14+
size="44rpx"
15+
loading
16+
inherit-color
17+
t-class="t-class-load"
18+
t-class-text="{{classPrefix}}--loading-text"
19+
></t-loading>
20+
<view wx:elif="{{loading !== '' && loading !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load">
21+
{{loading}}
22+
</view>
23+
<slot wx:else name="loading" />
24+
</view>
25+
<!-- 加载失败占位 -->
26+
<view
27+
wx:elif="{{isFailed}}"
28+
style="{{_._style([innerStyle])}}"
29+
class="{{classPrefix}}__mask {{classPrefix}}--failed {{classPrefix}}--shape-{{shape}} {{prefix}}-class-error"
30+
aria-hidden="{{ariaHidden}}"
31+
>
32+
<view wx:if="{{error === 'default'}}" style="font-size: 44rpx" class="{{prefix}}-class-load">
33+
<t-icon name="close" aria-role="img" aria-label="加载失败" />
34+
</view>
35+
<view wx:elif="{{error && error !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load">
36+
{{error}}
37+
</view>
38+
<slot wx:else name="error" />
39+
</view>
40+
<!-- 图片 -->
41+
<image
42+
id="{{tId||'image'}}"
43+
wx:if="{{ !isFailed }}"
44+
style="{{_._style([innerStyle])}}"
45+
class="{{classPrefix}}__img {{classPrefix}}--shape-{{shape}} {{isLoading ? classPrefix + '--lazy' : ''}} {{prefix}}-class-image"
46+
src="{{src}}"
47+
mode="{{mode}}"
48+
webp="{{webp}}"
49+
lazy-load="{{lazy}}"
50+
bind:load="onLoaded"
51+
bind:error="onLoadError"
52+
show-menu-by-longpress="{{showMenuByLongpress}}"
53+
aria-hidden="{{ariaHidden || isLoading || isFailed}}"
54+
aria-label="{{ariaLabel}}"
55+
/>
56+
</view>

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/image.wxss

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
.t-float-left {
2+
float: left;
3+
}
4+
.t-float-right {
5+
float: right;
6+
}
7+
@keyframes tdesign-fade-out {
8+
from {
9+
opacity: 1;
10+
}
11+
to {
12+
opacity: 0;
13+
}
14+
}
15+
.hotspot-expanded.relative {
16+
position: relative;
17+
}
18+
.hotspot-expanded::after {
19+
content: '';
20+
display: block;
21+
position: absolute;
22+
left: 0;
23+
top: 0;
24+
right: 0;
25+
bottom: 0;
26+
transform: scale(1.5);
27+
}
28+
.t-image {
29+
position: relative;
30+
display: inline-block;
31+
}
32+
.t-image__mask,
33+
.t-image__img {
34+
color: var(--td-image-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
35+
vertical-align: top;
36+
width: inherit;
37+
height: inherit;
38+
}
39+
.t-image__mask {
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
background-color: var(--td-image-loading-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
44+
color: var(--td-image-loading-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
45+
}
46+
.t-image--loading-text {
47+
width: 0;
48+
height: 0;
49+
}
50+
.t-image__common {
51+
width: 100%;
52+
height: 100%;
53+
}
54+
.t-image--lazy {
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
z-index: -1;
59+
}
60+
.t-image--shape-circle {
61+
border-radius: 50%;
62+
overflow: hidden;
63+
}
64+
.t-image--shape-round {
65+
border-radius: var(--td-image-round-radius, var(--td-radius-default, 12rpx));
66+
overflow: hidden;
67+
}
68+
.t-image--shape-square {
69+
border-radius: 0;
70+
overflow: hidden;
71+
}

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/index.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { TdImageProps } from './type';
2+
export declare type ImageProps = TdImageProps;
3+
export * from './props';
4+
export * from './image';

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './props';
2+
export * from './image';

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/props.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { TdImageProps } from './type';
2+
declare const props: TdImageProps;
3+
export default props;

‎miniprogram/packageAPI/components/tdesign-miniprogram/image/props.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const props = {
2+
error: {
3+
type: String,
4+
value: 'default',
5+
},
6+
height: {
7+
type: null,
8+
},
9+
lazy: {
10+
type: Boolean,
11+
value: false,
12+
},
13+
loading: {
14+
type: String,
15+
value: 'default',
16+
},
17+
mode: {
18+
type: String,
19+
value: 'scaleToFill',
20+
},
21+
shape: {
22+
type: String,
23+
value: 'square',
24+
},
25+
showMenuByLongpress: {
26+
type: Boolean,
27+
value: false,
28+
},
29+
src: {
30+
type: String,
31+
value: '',
32+
},
33+
tId: {
34+
type: String,
35+
value: '',
36+
},
37+
webp: {
38+
type: Boolean,
39+
value: false,
40+
},
41+
width: {
42+
type: null,
43+
},
44+
};
45+
export default props;

0 commit comments

Comments
 (0)