@x-edu/image-player

0.0.2 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @x-edu/image-player

Weekly Downloads

2

Version

0.0.2

License

none

Unpacked Size

3.74 MB

Total Files

4

Last publish

Collaborators

  • huhb500
  • eliseisgood
  • dont_write_code
  • guoyh
  • caijiexuan
  • janya
  • githoniel
  • gylllll
  • caolvchong