@taole/photo-wall

v0.4.5

Published

11 days ago

照片墙

0High
0Medium
0Low

本地开发

配置hosts

处理 local.tuwan.com => 127.0.0.1

安装依赖

npm install

启动预览访问https://local.tuwan.com:5173

npm run dev

参数说明

| 参数名 | 类型 | 必填 | 默认值 | 说明 | |:-------|:-----|:-----|:-------|:-----| | listType | Number | 是 | 102 | 列表类型：101 - 自己的照片墙（显示管理功能）102 - 他人的照片墙（浏览模式）105 - 详情页列表（排行榜详情等） | | targetUserId | String | 是 | - | 目标用户ID | | showMainPageBtn | Boolean | 否 | false | 是否显示跳转主页按钮 | | isAdmin | Boolean | 否 | false | 是否为后台管理模式（如果是，私聊改为跳转首页，隐藏举报按钮） | | columns | Number | 否 | 3 | 瀑布流布局的列数 | | showScanDetail | Boolean | 否 | false | 是否仅显示单张详情（单独查看模式，用于只使用 scanDetail 组件的场景） | | postId | String | 否 | - | 帖子ID，当 showScanDetail 为 true 时必传，用于定位显示的具体照片 |

UMD格式使用说明

1. 构建UMD格式

npm run build-npm

构建完成后会在 npm/ 目录下生成以下文件：

photoWall.umd.{version}.js - UMD格式的JavaScript文件
photoWall.{version}.css - 样式文件
photoWall.es.{version}.js - ESM格式文件（可选）

地址示例

https://asset-2025.tuwan.com/chatroom/photoWall/photoWall.umd.0.3.1.js

2. 在HTML中直接使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./npm/photoWall.0.0.2.css">
</head>
<body>
    <!-- 照片墙容器 -->
    <div id="photoWall"></div>
    
    <!-- 引入JavaScript文件 -->
    <script src="./npm/photoWall.umd.0.0.2.js"></script>
    <script>
        // 初始化照片墙
        PhotoWall.open({
            // 配置参数
            title: '我的照片墙',
            maxImages: 9,
            // 其他配置...
        }, '#photoWall');
    </script>
</body>
</html>

3. 在JavaScript中使用

// 确保已加载PhotoWall库
if (typeof PhotoWall !== 'undefined') {
    // 打开照片墙
    PhotoWall.open({
        // 配置参数
        title: '照片墙',
        maxImages: 9,
        onSuccess: function(result) {
            console.log('上传成功:', result);
        },
        onError: function(error) {
            console.error('上传失败:', error);
        }
    }, '#photoWall');
} else {
    console.error('PhotoWall库未加载');
}

4. 配置参数说明

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | title | string | '照片墙' | 照片墙标题 | | maxImages | number | 9 | 最大图片数量 | | onSuccess | function | - | 上传成功回调 | | onError | function | - | 上传失败回调 | | onClose | function | - | 关闭回调 |

5. 注意事项

确保CSS和JS文件路径正确
版本号要与实际构建的文件版本一致
支持现代浏览器（Chrome 61+）
需要网络环境支持OSS上传功能

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme