@x-edu/image-player

概述

一个图片播放器，用于播放单图或多图，多图时支持左右切换。

安装

npm install @x-edu/image-player

使用

import React from 'react'
import ImagePlayer from '@x-edu/image-player'

export default function Demo() {
  const data1 = [
    'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_01.png'
  ]
  const data2 = [
    'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_01.png',
    'https://pretest-s-file-1.ykt.cbern.com.cn/zxx/x_resource/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425/%E5%85%A8%E5%9B%BD%E6%80%BB%E5%B7%A5%E4%BC%9A--%E5%8A%B3%E6%A8%A10425_32.png'
  ]

  return (
    <div className="demo">
      <h2>单图展示</h2>
      <ImagePlayer data={data1} />
      <br />
      <h2>多图展示</h2>
      <ImagePlayer data={data2} />
    </div>
  )
}

.demo {
  width: 100%;
  /* 使播放器在页面中居中显示 */
  max-width: 1000px;
  margin: 0 auto;
}

API

| 参数 | 说明 | 类型 | 默认值 | |---------|--------|--------|---------| | className | 自定义类名 | string | - | | style | 自定义行内样式 | React.CSSProperties | - | | data | 数据源，图片地址数组 | Array | - | | imgSize | 图片大小，可选值：1080, 720, 480, 360, 240（影响图片质量，默认使用原图） | number | - | | showPageNo | 是否显示底部页码 | boolean | true | | onError | 图片加载失败时的回调函数 | (e) => {} | - |

注：播放器默认最大宽度为 1000px，如需调整，请使用自定义样式。