ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## Preview 图片预览 预览缩略图时使用。 ![](https://img.kancloud.cn/b0/58/b058741d04add5383d7613ba0bbb6f23_2527x1386.png) ### 代码示例 ```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 |