1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| /*
| * @Author: rileycai
| * @Date: 2022-03-14 14:21:26
| * @LastEditTime: 2022-03-14 15:23:04
| * @LastEditors: rileycai
| * @Description: webp-image组件对t-image包裹了一层，主要实现图片裁剪、webp压缩功能
| * @FilePath: /tdesign-miniprogram-starter/components/webp-image/index.js
| */
| const systemInfo = wx.getSystemInfoSync();
| Component({
| externalClasses: ['t-class', 't-class-load'],
| properties: {
| loadFailed: {
| type: String,
| value: 'default',
| },
| loading: {
| type: String,
| value: 'default',
| },
| src: {
| type: String,
| value: '',
| },
| mode: {
| type: String,
| value: 'aspectFill',
| },
| webp: {
| type: Boolean,
| value: true,
| },
| lazyLoad: {
| type: Boolean,
| value: false,
| },
| showMenuByLongpress: {
| type: Boolean,
| value: false,
| },
| },
| data: {
| thumbHeight: 375,
| thumbWidth: 375,
| systemInfo,
| },
| lifetimes: {
| ready() {
| const { mode } = this.properties;
| // 获取容器的真实宽高，设置图片的裁剪宽度
| this.getRect('.J-image').then((res) => {
| if (res) {
| const { width, height } = res;
| this.setData(
| mode === 'heightFix'
| ? {
| thumbHeight: this.px2rpx(height) || 375,
| }
| : {
| thumbWidth: this.px2rpx(width) || 375,
| },
| );
| }
| });
| },
| },
| methods: {
| px2rpx(px) {
| return (750 / (systemInfo.screenWidth || 375)) * px;
| },
| getRect(selector) {
| return new Promise((resolve) => {
| if (!this.selectorQuery) {
| this.selectorQuery = this.createSelectorQuery();
| }
| this.selectorQuery.select(selector).boundingClientRect(resolve).exec();
| });
| },
| onLoad(e) {
| this.triggerEvent('load', e.detail);
| },
| onError(e) {
| this.triggerEvent('error', e.detail);
| },
| },
| });
|
|
