From d14f625a1b80ac06bd582d40cee566ec1c19b19c Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 03 Mar 2025 14:23:05 +0800
Subject: [PATCH] 知识库文档，请求层基类微调
---
forms/imagePicker/CImagePreview.vue | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 53 insertions(+), 7 deletions(-)
diff --git a/forms/imagePicker/CImagePreview.vue b/forms/imagePicker/CImagePreview.vue
index 4d29d4b..bff6cce 100644
--- a/forms/imagePicker/CImagePreview.vue
+++ b/forms/imagePicker/CImagePreview.vue
@@ -4,12 +4,25 @@
*/
<template>
- <view class="c-image-preview"></view>
+ <view class="c-image-preview">
+ <image
+ class="c-image-preview-img"
+ :class="imgClass"
+ mode="aspectFit"
+ :lazyLoad="true"
+ v-for="(img, index) of imgList"
+ :src="loadFail[index] ? img.org : img.thumb"
+ :key="index"
+ @tap="evt => $preview({ current: img.org, urls: imgs })"
+ @error="evt => handleLoadError(index)"
+ />
+ </view>
</template>
<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
+import './cImagePreview.scss';
// 直线方程，点斜式参数
const createLineEquation = (p1, p2) => {
@@ -21,10 +34,43 @@
export default {
name: 'CImagePreview',
+ props: {
+ // 图片样式名
+ imgClass: String,
+ // 图片地址
+ imgs: {
+ type: Array,
+ default: () => [],
+ },
+ // 开启缩略图地址转换
+ useThumb: {
+ typeof: Boolean,
+ default: false,
+ },
+ },
data() {
- return {};
+ return {
+ loadFail: [],
+ };
+ },
+ computed: {
+ imgList() {
+ return this.imgs.map((img, index) => ({
+ org: img,
+ thumb: this.useThumb
+ ? img.replace(/(.*?)(\.(png|jpg|jpeg|gif))$/, '$1_thumb$2')
+ : img,
+ }));
+ },
},
methods: {
+ handleLoadError(index) {
+ while (this.loadFail.length - 1 < index) {
+ this.loadFail.push(false);
+ }
+ this.loadFail.splice(index, 1, true);
+ },
+ // option { current, urls }
$preview(option) {
// 网页模式下，增加缩放操作
if (process.env.TARO_ENV === 'h5') {
@@ -39,8 +85,8 @@
// 小程序模式，直接支持缩放
else {
Taro.previewImage({
- current: file.url, // 当前显示图片的http链接
- urls, // 需要预览的图片http链接列表
+ current: option.current, // 当前显示图片的http链接
+ urls: option.urls, // 需要预览的图片http链接列表
});
}
},
@@ -86,11 +132,11 @@
if (scale - 1 > 0.1) {
equationX = createLineEquation(
{ x: 1, y: 0 },
- { x: scale, y: startOffsetX }
+ { x: scale, y: startOffsetX },
);
equationY = createLineEquation(
{ x: 1, y: 0 },
- { x: scale, y: startOffsetY }
+ { x: scale, y: startOffsetY },
);
}
// 初始状态，不计算
@@ -127,7 +173,7 @@
const yMove =
evt.touches[1].clientY - evt.touches[0].clientY;
const newDistance = Math.sqrt(
- xMove * xMove + yMove * yMove
+ xMove * xMove + yMove * yMove,
);
const distanceDiff = newDistance - distance;
const newScale = scale + 0.01 * distanceDiff;
--
Gitblit v1.9.1