跳到主要内容

媒体组件

媒体组件用于展示图片、视频、音频等多媒体内容。

Image - 图片​

用于展示图片内容。

基本用法​

Image() {
  // 图片内容
}

属性列表​

属性接受类型默认值说明
srcstring""图片地址
altstring""替代文字
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
fitstring"cover"适应方式
lazyboolfalse是否懒加载
placeholderstring""占位图
errorstring""错误图
loadingstring""加载图
onLoadfuncnull加载完成事件
onErrorfuncnull加载错误事件
onClickfuncnull点击事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影

适应方式​

值说明
"cover"覆盖
"contain"包含
"fill"填充
"scale-down"缩小
"none"无

示例​

// 基本图片
Image()
  .src("/images/example.jpg")
  .alt("示例图片")
  .width(300)
  .height(200)

// 懒加载图片
Image()
  .src("/images/large.jpg")
  .alt("大图片")
  .lazy(true)
  .placeholder("/images/placeholder.jpg")
  .onLoad(() => {
    // 加载完成
  })

Avatar - 头像​

用于显示用户头像。

基本用法​

Avatar() {
  // 头像内容
}

属性列表​

属性接受类型默认值说明
srcstring""头像地址
altstring""替代文字
sizestring, int, singlef32尺寸
shapestring"circle"形状
iconstring""图标
textstring""文字
colorstring"#ffffff"文字颜色
backgroundColorstring"#1890ff"背景颜色
borderstring"none"边框
onClickfuncnull点击事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距

形状值​

值说明
"circle"圆形
"square"方形

示例​

// 图片头像
Avatar()
  .src("/avatars/user.jpg")
  .alt("用户头像")
  .size(48)
  .shape("circle")

// 文字头像
Avatar()
  .text("张三")
  .size(40)
  .backgroundColor("#52c41a")
  .color("#ffffff")

// 图标头像
Avatar()
  .icon("user")
  .size(36)
  .backgroundColor("#f0f0f0")

Video - 视频​

用于播放视频内容。

基本用法​

Video() {
  // 视频内容
}

属性列表​

属性接受类型默认值说明
srcstring""视频地址
posterstring""封面图
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
controlsbooltrue是否显示控制条
autoplayboolfalse是否自动播放
loopboolfalse是否循环播放
mutedboolfalse是否静音
preloadstring"metadata"预加载方式
onPlayfuncnull播放事件
onPausefuncnull暂停事件
onEndedfuncnull结束事件
onErrorfuncnull错误事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"#000000"背景颜色
borderRadiusstring, int, singlef0圆角

预加载方式​

值说明
"none"不预加载
"metadata"预加载元数据
"auto"预加载整个视频

示例​

// 基本视频
Video()
  .src("/videos/demo.mp4")
  .poster("/images/video-poster.jpg")
  .width(640)
  .height(360)
  .controls(true)

// 自动播放视频
Video()
  .src("/videos/intro.mp4")
  .autoplay(true)
  .muted(true)
  .loop(true)
  .onPlay(() => {
    // 播放开始
  })

Audio - 音频​

用于播放音频内容。

基本用法​

Audio() {
  // 音频内容
}

属性列表​

属性接受类型默认值说明
srcstring""音频地址
widthstring, int, singlef"100%"宽度
heightstring, int, singlef32高度
controlsbooltrue是否显示控制条
autoplayboolfalse是否自动播放
loopboolfalse是否循环播放
mutedboolfalse是否静音
preloadstring"metadata"预加载方式
onPlayfuncnull播放事件
onPausefuncnull暂停事件
onEndedfuncnull结束事件
onErrorfuncnull错误事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

示例​

// 基本音频
Audio()
  .src("/audio/music.mp3")
  .width(300)
  .controls(true)

// 背景音乐
Audio()
  .src("/audio/background.mp3")
  .autoplay(true)
  .loop(true)
  .muted(false)
  .onPlay(() => {
    // 音乐开始播放
  })

Carousel - 轮播图​

用于展示图片轮播。

基本用法​

Carousel() {
  // 轮播内容
}

属性列表​

属性接受类型默认值说明
imagesarr[]图片数组
widthstring, int, singlef"100%"宽度
heightstring, int, singlef300高度
autoplayboolfalse是否自动播放
intervalint3000自动播放间隔(毫秒)
dotsbooltrue是否显示指示点
arrowsbooltrue是否显示箭头
fadeboolfalse是否淡入淡出
onChangefuncnull切换事件
onClickfuncnull点击事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

示例​

// 基本轮播
Carousel()
  .images([
    "/images/slide1.jpg",
    "/images/slide2.jpg",
    "/images/slide3.jpg"
  ])
  .width(800)
  .height(400)
  .autoplay(true)
  .interval(5000)

// 淡入淡出轮播
Carousel()
  .images([
    "/images/banner1.jpg",
    "/images/banner2.jpg"
  ])
  .fade(true)
  .dots(true)
  .arrows(false)
  .onChange((index) => {
    // 轮播切换
  })

Gallery - 图片画廊​

用于展示图片画廊。

基本用法​

Gallery() {
  // 画廊内容
}

属性列表​

属性接受类型默认值说明
imagesarr[]图片数组
columnsint3列数
gapstring, int, singlef8间距
widthstring, int, singlef"100%"宽度
heightstring, int, singlef"auto"高度
lazyboolfalse是否懒加载
lightboxbooltrue是否支持灯箱
onImageClickfuncnull图片点击事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

示例​

// 基本画廊
Gallery()
  .images([
    "/images/gallery1.jpg",
    "/images/gallery2.jpg",
    "/images/gallery3.jpg"
  ])
  .columns(4)
  .gap(12)
  .lightbox(true)

// 懒加载画廊
Gallery()
  .images(largeImageList)
  .columns(3)
  .lazy(true)
  .onImageClick((image, index) => {
    // 图片点击处理
  })

Player - 播放器​

用于播放多媒体内容。

基本用法​

Player() {
  // 播放器内容
}

属性列表​

属性接受类型默认值说明
srcstring""媒体地址
typestring"video"媒体类型
widthstring, int, singlef"100%"宽度
heightstring, int, singlef300高度
controlsbooltrue是否显示控制条
autoplayboolfalse是否自动播放
loopboolfalse是否循环播放
mutedboolfalse是否静音
posterstring""封面图
onPlayfuncnull播放事件
onPausefuncnull暂停事件
onEndedfuncnull结束事件
onErrorfuncnull错误事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"#000000"背景颜色
borderRadiusstring, int, singlef0圆角

媒体类型​

值说明
"video"视频
"audio"音频

示例​

// 视频播放器
Player()
  .src("/videos/demo.mp4")
  .type("video")
  .width(800)
  .height(450)
  .poster("/images/poster.jpg")
  .controls(true)

// 音频播放器
Player()
  .src("/audio/music.mp3")
  .type("audio")
  .width(400)
  .height(60)
  .autoplay(false)

Icon - 图标​

用于显示图标。

基本用法​

Icon() {
  // 图标内容
}

属性列表​

属性接受类型默认值说明
namestring""图标名称
sizestring, int, singlef16尺寸
colorstring"currentColor"颜色
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

示例​

// 基本图标
Icon()
  .name("home")
  .size(24)
  .color("#1890ff")

// 大尺寸图标
Icon()
  .name("user")
  .size(48)
  .color("#52c41a")
  .backgroundColor("#f0f0f0")
  .padding(8)

Logo - 标志​

用于显示品牌标志。

基本用法​

Logo() {
  // 标志内容
}

属性列表​

属性接受类型默认值说明
srcstring""标志地址
altstring""替代文字
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
fitstring"contain"适应方式
onClickfuncnull点击事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角

示例​

// 基本标志
Logo()
  .src("/images/logo.png")
  .alt("公司标志")
  .width(120)
  .height(40)

// 可点击标志
Logo()
  .src("/images/brand.png")
  .alt("品牌标志")
  .width(100)
  .onClick(() => {
    // 跳转到首页
  })

Thumbnail - 缩略图​

用于显示图片缩略图。

基本用法​

Thumbnail() {
  // 缩略图内容
}

属性列表​

属性接受类型默认值说明
srcstring""图片地址
altstring""替代文字
widthstring, int, singlef100宽度
heightstring, int, singlef100高度
fitstring"cover"适应方式
lazyboolfalse是否懒加载
onClickfuncnull点击事件
paddingstring, int, singlef4内边距
marginstring, int, singlef0外边距
backgroundColorstring"#f5f5f5"背景颜色
borderRadiusstring, int, singlef4圆角
boxShadowstring"0 1px 3px rgba(0,0,0,0.12)"阴影

示例​

// 基本缩略图
Thumbnail()
  .src("/images/thumb1.jpg")
  .alt("缩略图1")
  .width(80)
  .height(80)

// 懒加载缩略图
Thumbnail()
  .src("/images/thumb2.jpg")
  .alt("缩略图2")
  .width(120)
  .height(120)
  .lazy(true)
  .onClick(() => {
    // 查看大图
  })

LazyImage - 懒加载图片​

用于懒加载图片的组件。

基本用法​

LazyImage() {
  // 懒加载图片内容
}

属性列表​

属性接受类型默认值说明
srcstring""图片地址
altstring""替代文字
widthstring, int, singlef"auto"宽度
heightstring, int, singlef"auto"高度
fitstring"cover"适应方式
placeholderstring""占位图
errorstring""错误图
loadingstring""加载图
thresholdint, singlef0触发距离(像素)
rootMarginstring"0px"根边距
onLoadfuncnull加载完成事件
onErrorfuncnull加载错误事件
onClickfuncnull点击事件
paddingstring, int, singlef0内边距
marginstring, int, singlef0外边距
backgroundColorstring"transparent"背景颜色
borderRadiusstring, int, singlef0圆角
boxShadowstring"none"阴影

适应方式​

值说明
"cover"覆盖
"contain"包含
"fill"填充
"scale-down"缩小
"none"无

示例​

// 基本懒加载图片
LazyImage()
  .src("/images/large.jpg")
  .alt("懒加载图片")
  .width(400)
  .height(300)
  .threshold(100)

// 带占位图的懒加载
LazyImage()
  .src("/images/banner.jpg")
  .alt("横幅图片")
  .placeholder("/images/placeholder.jpg")
  .error("/images/error.jpg")
  .rootMargin("50px")
  .onLoad(() => {
    // 图片加载完成
  })