@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，如需调整，请使用自定义样式。