ElementUI的image組件:https://element.eleme.cn/#/zh-CN/component/image
其中大圖預覽目前總是從第一張開始,簡單處理下,就是構建一個以當前圖片為起始的數組.
代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <div class="block" v-for="(url, index) in urls"> <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="getSrcList(index)"></el-image> </div> </div> </body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: { urls: [ 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' ] }, methods:{ getSrcList(index){ return this.urls.slice(index).concat(this.urls.slice(0,index)) } } }) </script> </html>
注：element-ui@2.13.0已修復此問題