## Preview 图片预览 预览缩略图时使用。  ### 代码示例 ```html <template> <div class="container"> <cvu-button type="primary" @click.native="handlePreviewShow">预览图片</cvu-button> <cvu-preview v-model="show" :currentIndex="currentIndex" :files="files" :width="800" :height="600" loop @on-close="handleClose" @on-visible="handleVisible" @on-click="handleClick" ></cvu-preview> </div> </template> <script> export default { data () { return { show: false, currentIndex: 0, files: [ { url: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF', name: '图片一' }, { url: 'https://t7.baidu.com/it/u=737555197,308540855&fm=193&f=GIF', name: '图片二' }, { url: 'https://t7.baidu.com/it/u=3652245443,3894439772&fm=193&f=GIF', name: '图片三' } ] } }, mounted () {}, methods: { handlePreviewShow() { this.show = true }, handleClose() { this.currentIndex = 0 }, handleVisible(e) { console.log(e) }, handleClick(index) { console.log(index); } } } </script> ``` ### props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value | 是否显示，可使用 v-model 双向绑定数据。 | Boolean | false | | currentIndex | 当前显示索引 | Number | 0 | files | 图片文件地址集合, 格式： [{ url: '', name: '' }] | Array | [] | width| 对话框的宽度，可填 auto 或具体高度数值，单位 px | String \| Number | 520 | | height | 对话框的高度，可填 auto 或具体高度数值，单位 px | String\|Number | auto | | fullscreen | 是否全屏显示 | Boolean | false | | mask-closable | 是否允许点击遮罩层关闭 | Boolean | true | | loop | 是否开启循环 | Boolean | false | | autoplay | 是否自动切换 | Boolean | false | | autoplay-speed | 自动切换的时间间隔，单位为毫秒 | Number | 2000 | | dots | 指示器的位置，可选值为 inside （内部），outside（外部），none（不显示） | String | inside | | radius-dot | 是否显示圆形指示器 | Boolean | false | | trigger | 指示器的触发方式，可选值为 click（点击），hover（悬停） | String | click | | arrow | 切换箭头的显示时机，可选值为 hover（悬停），always（一直显示），never（不显示） | String | hover | | easing | 动画效果 | String | ease | ### events | 事件名 | 说明 | 返回值 | | --- | --- | --- | | on-close| 点击关闭时触发 | \- | | on-visible | 显示 \|隐藏监听 | { code: true \| false } | | on-change | 图片切换时触发，目前激活的图片的索引，原图片的索引 | oldValue, value | | on-click4.1.0 | 点击图片时触发，返回索引值 | index |