87 lines
1.9 KiB
JavaScript
87 lines
1.9 KiB
JavaScript
/*
|
||
* @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);
|
||
},
|
||
},
|
||
});
|