e2hang/HuajisheTools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

New Huajishe Check ChaoXing

Browse Source
This commit is contained in:
e2hang
2025-10-01 10:01:52 +08:00
parent 240b884eac
commit 80be8ae3cf
1094 changed files with 61709 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/README.en-US.md Normal file
View File

@@ -0,0 +1,40 @@
:: BASE_DOC ::
## API
### ImageViewer Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
background-color | String | 'rgba(0, 0, 0, 1)' | \- | N
close-btn | String / Boolean / Object / Slot | false | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
delete-btn | String / Boolean / Object / Slot | false | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
images | Array | [] | Typescript：`Array<string>` | N
initial-index | Number | 0 | Typescript：`Number` | N
show-index | Boolean | false | \- | N
using-custom-navbar | Boolean | false | `v1.1.4` | N
visible | Boolean | false | hide or show image viewer | N
default-visible | Boolean | undefined | hide or show image viewer。uncontrolled property | N
### ImageViewer Events
name | params | description
-- | -- | --
change | `(index: Number)` | \-
close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | \-
delete | `(index: Number)` | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-image-viewer-close-margin-left | @spacer-1 | -
--td-image-viewer-delete-margin-right | @spacer-1 | -
--td-image-viewer-nav-bg-color | @font-gray-3 | -
--td-image-viewer-nav-color | @font-white-1 | -
--td-image-viewer-nav-height | 96rpx | -
--td-image-viewer-nav-index-font-size | @font-size-base | -
--td-image-viewer-top | @position-fixed-top | -

86
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/README.md Normal file
View File

@@ -0,0 +1,86 @@
---
title: ImageViewer 图片预览
description: 图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范。
spline: data
isComponent: true
---
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
</svg>
该组件于 0.10.0 版本上线，请留意版本。
</div>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer",
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/9k7luimk7nSy" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 类型
#### 基础图片预览
{{ base }}
#### 带操作图片预览
顶部区域可以配置关闭按钮、页码信息、删除按钮。
{{ delete }}
> 当使用自定义导航栏的时候，顶部的操作按钮会被遮挡，此时需要开启 `using-custom-navbar` 来解决
## API
### ImageViewer Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
background-color | String | 'rgba(0, 0, 0, 1)' | 遮罩的背景颜色 | N
close-btn | String / Boolean / Object / Slot | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
delete-btn | String / Boolean / Object / Slot | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
images | Array | [] | 图片数组。TS 类型：`Array<string>` | N
initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N
show-index | Boolean | false | 是否显示页码 | N
using-custom-navbar | Boolean | false | `v1.1.4`。是否使用了自定义导航栏 | N
visible | Boolean | false | 隐藏/显示预览 | N
default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 | N
### ImageViewer Events
名称 | 参数 | 描述
-- | -- | --
change | `(index: Number)` | 翻页时回调
close | `(trigger: 'overlay' \| 'button', visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发
delete | `(index: Number)` | 点击删除操作按钮时触发
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-image-viewer-close-margin-left | @spacer-1 | -
--td-image-viewer-delete-margin-right | @spacer-1 | -
--td-image-viewer-nav-bg-color | @font-gray-3 | -
--td-image-viewer-nav-color | @font-white-1 | -
--td-image-viewer-nav-height | 96rpx | -
--td-image-viewer-nav-index-font-size | @font-size-base | -
--td-image-viewer-top | @position-fixed-top | -

88
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.d.ts vendored Normal file
View File

@@ -0,0 +1,88 @@
import { SuperComponent } from '../common/src/index';
export default class ImageViewer extends SuperComponent {
externalClasses: string[];
properties: {
backgroundColor?: {
type: StringConstructor;
value?: string;
};
closeBtn?: {
type: null;
value?: string | boolean | object;
};
deleteBtn?: {
type: null;
value?: string | boolean | object;
};
images?: {
type: ArrayConstructor;
value?: string[];
};
initialIndex?: {
type: NumberConstructor;
value?: Number;
};
showIndex?: {
type: BooleanConstructor;
value?: boolean;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
defaultVisible?: {
type: BooleanConstructor;
value?: boolean;
};
};
data: {
prefix: string;
classPrefix: string;
currentSwiperIndex: number;
windowHeight: number;
windowWidth: number;
swiperStyle: {};
imagesStyle: {};
maskTop: number;
};
options: {
multipleSlots: boolean;
};
controlledProps: {
key: string;
event: string;
}[];
ready(): void;
observers: {
'visible,initialIndex,images'(visible: any, initialIndex: any, images: any): void;
closeBtn(v: any): void;
deleteBtn(v: any): void;
};
methods: {
calcMaskTop(): void;
saveScreenSize(): void;
calcImageDisplayStyle(imageWidth: any, imageHeight: any): {
styleObj: {
width: string;
height: string;
left: string;
transform: string;
};
} | {
styleObj: {
width: string;
height: string;
left?: undefined;
transform?: undefined;
};
};
onImageLoadSuccess(e: WechatMiniprogram.TouchEvent): void;
onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
onClose(e: any): void;
onDelete(): void;
};
}

153
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.js Normal file
View File

@@ -0,0 +1,153 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { styles, calcIcon, systemInfo } from '../common/utils';
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-image-viewer`;
let ImageViewer = class ImageViewer extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [`${prefix}-class`];
this.properties = Object.assign({}, props);
this.data = {
prefix,
classPrefix: name,
currentSwiperIndex: 0,
windowHeight: 0,
windowWidth: 0,
swiperStyle: {},
imagesStyle: {},
maskTop: 0,
};
this.options = {
multipleSlots: true,
};
this.controlledProps = [
{
key: 'visible',
event: 'close',
},
];
this.observers = {
'visible,initialIndex,images'(visible, initialIndex, images) {
if (visible && (images === null || images === void 0 ? void 0 : images.length)) {
this.setData({
currentSwiperIndex: initialIndex >= images.length ? images.length - 1 : initialIndex,
});
}
},
closeBtn(v) {
this.setData({
_closeBtn: calcIcon(v, 'close'),
});
},
deleteBtn(v) {
this.setData({
_deleteBtn: calcIcon(v, 'delete'),
});
},
};
this.methods = {
calcMaskTop() {
if (this.data.usingCustomNavbar) {
const rect = (wx === null || wx === void 0 ? void 0 : wx.getMenuButtonBoundingClientRect()) || null;
const { statusBarHeight } = systemInfo;
if (rect && statusBarHeight) {
this.setData({
maskTop: rect.top - statusBarHeight + rect.bottom,
});
}
}
},
saveScreenSize() {
const { windowHeight, windowWidth } = systemInfo;
this.setData({
windowHeight,
windowWidth,
});
},
calcImageDisplayStyle(imageWidth, imageHeight) {
const { windowWidth, windowHeight } = this.data;
const ratio = imageWidth / imageHeight;
if (imageWidth < windowWidth && imageHeight < windowHeight) {
return {
styleObj: {
width: `${imageWidth * 2}rpx`,
height: `${imageHeight * 2}rpx`,
left: '50%',
transform: 'translate(-50%, -50%)',
},
};
}
if (ratio >= 1) {
return {
styleObj: {
width: '100vw',
height: `${(windowWidth / ratio) * 2}rpx`,
},
};
}
const scaledHeight = ratio * windowHeight * 2;
if (scaledHeight < windowWidth) {
return {
styleObj: {
width: `${scaledHeight}rpx`,
height: '100vh',
left: '50%',
transform: 'translate(-50%, -50%)',
},
};
}
return {
styleObj: {
width: '100vw',
height: `${(windowWidth / imageWidth) * imageHeight * 2}rpx`,
},
};
},
onImageLoadSuccess(e) {
const { detail: { width, height }, currentTarget: { dataset: { index }, }, } = e;
const { mode, styleObj } = this.calcImageDisplayStyle(width, height);
const originImagesStyle = this.data.imagesStyle;
const originSwiperStyle = this.data.swiperStyle;
this.setData({
swiperStyle: Object.assign(Object.assign({}, originSwiperStyle), { [index]: {
style: `height: ${styleObj.height}`,
} }),
imagesStyle: Object.assign(Object.assign({}, originImagesStyle), { [index]: {
mode,
style: styles(Object.assign({}, styleObj)),
} }),
});
},
onSwiperChange(e) {
const { detail: { current }, } = e;
this.setData({
currentSwiperIndex: current,
});
this._trigger('change', { index: current });
},
onClose(e) {
const { source } = e.currentTarget.dataset;
this._trigger('close', { visible: false, trigger: source || 'button', index: this.data.currentSwiperIndex });
},
onDelete() {
this._trigger('delete', { index: this.data.currentSwiperIndex });
},
};
}
ready() {
this.saveScreenSize();
this.calcMaskTop();
}
};
ImageViewer = __decorate([
wxComponent()
], ImageViewer);
export default ImageViewer;

8
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.json Normal file
View File

@@ -0,0 +1,8 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-image": "../image/image",
"t-icon": "../icon/icon"
}
}

63
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.wxml Normal file
View File

@@ -0,0 +1,63 @@
<import src="../common/template/icon.wxml" />
<wxs src="../common/utils.wxs" module="_" />
<view
wx:if="{{visible}}"
id="{{classPrefix}}"
class="{{classPrefix}} class {{prefix}}-class"
style="{{_._style([style, customStyle, '--td-image-viewer-top: ' + maskTop + 'px'])}}"
aria-modal="{{true}}"
aria-role="dialog"
aria-label="图片查看器"
catchtouchmove="true"
>
<view
class="{{classPrefix}}__mask"
data-source="overlay"
bind:tap="onClose"
style="{{ 'background-color: ' + backgroundColor }}"
aria-role="button"
aria-label="关闭"
/>
<block wx:if="{{images && images.length}}">
<view class="{{classPrefix}}__content">
<swiper
class="swiper"
style="{{swiperStyle[currentSwiperIndex].style}}"
autoplay="{{false}}"
current="{{currentSwiperIndex}}"
bindchange="onSwiperChange"
bindtap="onClose"
tabindex="0"
>
<swiper-item wx:for="{{images}}" wx:key="index" class="{{classPrefix}}__preview-image">
<t-image
t-class="t-image--external"
style="{{imagesStyle[index].style || ''}}"
mode="aspectFit"
lazy
src="{{item}}"
data-index="{{index}}"
class="{{classPrefix}}__image"
bindload="onImageLoadSuccess"
></t-image>
</swiper-item>
</swiper>
</view>
<view class="{{classPrefix}}__nav">
<view class="{{classPrefix}}__nav-close" catch:tap="onClose" aria-role="button" aria-label="关闭">
<slot name="close-btn" />
<template wx:if="{{_closeBtn}}" is="icon" data="{{ ..._closeBtn }}" />
</view>
<view wx:if="{{showIndex}}" class="{{classPrefix}}__nav-index">
{{currentSwiperIndex + 1}}/{{images.length}}
</view>
<view class="{{classPrefix}}__nav-delete" bind:tap="onDelete" aria-role="button" aria-label="删除">
<slot name="delete-btn" />
<template is="icon" data="{{ ..._deleteBtn }}" />
</view>
</view>
</block>
</view>

101
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.wxss Normal file
View File

@@ -0,0 +1,101 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-image-viewer {
position: fixed;
top: var(--td-image-viewer-top, var(--td-position-fixed-top, 0));
left: 0;
bottom: 0;
right: 0;
z-index: 1001;
transform: translateZ(0);
overflow: hidden;
}
.t-image-viewer__mask {
position: absolute;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.t-image-viewer__content {
width: 100vw;
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1005;
}
.t-image-viewer .swiper {
outline: 0;
}
.t-image-viewer__image {
width: 100%;
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.t-image-viewer .t-image--external {
width: inherit;
height: inherit;
display: block;
}
.t-image-viewer__nav {
width: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--td-image-viewer-nav-height, 96rpx);
background-color: var(--td-image-viewer-nav-bg-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
left: 0;
color: var(--td-image-viewer-nav-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
z-index: 1005;
}
.t-image-viewer__nav-close {
margin-left: var(--td-image-viewer-close-margin-left, var(--td-spacer-1, 24rpx));
}
.t-image-viewer__nav-close:empty {
display: none;
}
.t-image-viewer__nav-delete {
margin-right: var(--td-image-viewer-delete-margin-right, var(--td-spacer-1, 24rpx));
}
.t-image-viewer__nav-delete:empty {
display: none;
}
.t-image-viewer__nav-close,
.t-image-viewer__nav-delete {
font-size: 48rpx;
}
.t-image-viewer__nav-index {
flex: 1;
font-size: var(--td-image-viewer-nav-index-font-size, var(--td-font-size-base, 28rpx));
text-align: center;
}

3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdImageViewerProps } from './type';
declare const props: TdImageViewerProps;
export default props;

39
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/props.js Normal file
View File

@@ -0,0 +1,39 @@
const props = {
backgroundColor: {
type: String,
value: 'rgba(0, 0, 0, 1)',
},
closeBtn: {
type: null,
value: false,
},
deleteBtn: {
type: null,
value: false,
},
images: {
type: Array,
value: [],
},
initialIndex: {
type: Number,
value: 0,
},
showIndex: {
type: Boolean,
value: false,
},
usingCustomNavbar: {
type: Boolean,
value: false,
},
visible: {
type: Boolean,
value: null,
},
defaultVisible: {
type: Boolean,
value: false,
},
};
export default props;

38
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/type.d.ts vendored Normal file
View File

@@ -0,0 +1,38 @@
export interface TdImageViewerProps {
backgroundColor?: {
type: StringConstructor;
value?: string;
};
closeBtn?: {
type: null;
value?: string | boolean | object;
};
deleteBtn?: {
type: null;
value?: string | boolean | object;
};
images?: {
type: ArrayConstructor;
value?: Array<string>;
};
initialIndex?: {
type: NumberConstructor;
value?: Number;
};
showIndex?: {
type: BooleanConstructor;
value?: boolean;
};
usingCustomNavbar?: {
type: BooleanConstructor;
value?: boolean;
};
visible?: {
type: BooleanConstructor;
value?: boolean;
};
defaultVisible?: {
type: BooleanConstructor;
value?: boolean;
};
}

1
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/image-viewer/type.js Normal file
View File

@@ -0,0 +1 @@
export {};