From f9cae9b8bd87208b84c247d6d558f51e22755e33 Mon Sep 17 00:00:00 2001
From: chensiAb <chenchenco03@163.com>
Date: Mon, 05 Aug 2024 12:00:53 +0800
Subject: [PATCH] feat:验证码输入组件-添加刷新cd回到60秒通知父组件
---
forms/imagePicker/CImagePreview.vue | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 50 insertions(+), 5 deletions(-)
diff --git a/forms/imagePicker/CImagePreview.vue b/forms/imagePicker/CImagePreview.vue
index b92fef7..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,42 @@
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) {
// 网页模式下，增加缩放操作
@@ -87,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 },
);
}
// 初始状态，不计算
@@ -128,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