From a250b6216753cfd0c0622a1fbc0f3254fc8e0a4f Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Tue, 19 Mar 2024 18:39:44 +0800
Subject: [PATCH] 图片预览组件，支持图片显示
---
forms/imagePicker/cImagePreview.scss | 16 ++++++++
forms/imagePicker/index.js | 5 +-
forms/imagePicker/CImagePreview.vue | 44 ++++++++++++++++++++--
3 files changed, 58 insertions(+), 7 deletions(-)
diff --git a/forms/imagePicker/CImagePreview.vue b/forms/imagePicker/CImagePreview.vue
index b92fef7..d36b9c3 100644
--- a/forms/imagePicker/CImagePreview.vue
+++ b/forms/imagePicker/CImagePreview.vue
@@ -4,12 +4,24 @@
*/
<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="img.thumb"
+ :key="index"
+ @tap="evt => $preview({ current: img.org, urls: imgs })"
+ />
+ </view>
</template>
<script>
import Taro from '@tarojs/taro';
import { $ } from '@tarojs/extend';
+import './cImagePreview.scss';
// 直线方程，点斜式参数
const createLineEquation = (p1, p2) => {
@@ -21,8 +33,32 @@
export default {
name: 'CImagePreview',
+ props: {
+ // 图片样式名
+ imgClass: String,
+ // 图片地址
+ imgs: {
+ type: Array,
+ default: () => [],
+ },
+ // 开启缩略图地址转换
+ useThumb: {
+ typeof: Boolean,
+ default: false,
+ },
+ },
data() {
return {};
+ },
+ computed: {
+ imgList() {
+ return this.imgs.map(img => ({
+ org: img,
+ thumb: this.useThumb
+ ? img.replace(/(.*?)(\.(png|jpg|jpeg|gif))$/, '$1_thumb$2')
+ : img,
+ }));
+ },
},
methods: {
// option { current, urls }
@@ -87,11 +123,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 +164,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;
diff --git a/forms/imagePicker/cImagePreview.scss b/forms/imagePicker/cImagePreview.scss
new file mode 100644
index 0000000..06c3c54
--- /dev/null
+++ b/forms/imagePicker/cImagePreview.scss
@@ -0,0 +1,16 @@
+/**
+ * CImagePreview
+ * @author Tevin
+ */
+
+@import "../../common/sassMixin";
+
+.c-image-preview {
+ .c-image-preview-img {
+ margin: 0 10px 10px 0;
+ max-width: 300px;
+ max-height: 300px;
+ background-color: #f2f2f2;
+ border-radius: 4px;
+ }
+}
\ No newline at end of file
diff --git a/forms/imagePicker/index.js b/forms/imagePicker/index.js
index 80b1495..2136be5 100644
--- a/forms/imagePicker/index.js
+++ b/forms/imagePicker/index.js
@@ -4,7 +4,6 @@
*/
import CImagePicker from '@components/forms/imagePicker/CImagePicker.vue';
+import CImagePreview from '@components/forms/imagePicker/CImagePreview.vue';
-export {
- CImagePicker,
-}
\ No newline at end of file
+export { CImagePicker, CImagePreview };
--
Gitblit v1.9.1