TvPreviewer 图片预览 TV
该方法或组件支持轻应用调用

全屏预览一组图片

引入方式

数字生活小程序工程-TV模板，不需要 import，直接使用组件标签即可。

import { TvPreviewer } from '@21cnfe/tv-vui'
Vue.component('TvPreviewer', TvPreviewer)

代码演示

<tv-previewer
        v-model="isShowPreviewImg"
        @clickPreviewer="onClickPreviewer"
        :autoplay="previewerAutoPlay"
        :lastFocusElement="lastElementBeforePreviewImg"
        :activeIndex="previewImgActiveIndex"
        :sliders="sliders">
</tv-previewer>

API

属性	说明	类型	默认值
`sliders`	预览图数组，可只设置src属性 `[{src: '大图', msrc: '小图'}]`	Array	[]
`autoplay`	自动切换图片	Boolean	false
`interval`	自动切换图片间隔	Number	3000
`activeIndex`	显示一组预览图，设置当前显示图片下标	Number	0
`lastFocusElement`	设置关闭预览图后，焦点转移元素	Object	null
`showArrowButton`	显示左右箭头	Boolean	true

Events

事件名称	说明	回调参数
`clickPreviewer`	元素获取焦点时触发	currentIndex
`change`	预览图片下标发生变化时触发（回调改变后的下标）	currentIndex
`left`	按下左方向键时触发	currentIndex
`right`	按下右方向键时触发	currentIndex

1. TvPreviewer 图片预览 TV 该方法或组件支持轻应用调用

TvPreviewer 图片预览 TV 该方法或组件支持轻应用调用

引入方式

代码演示

API

Events

TvPreviewer 图片预览 TV
该方法或组件支持轻应用调用