## 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 |