点击图片放大图片预览左右切换 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>点击图片放大图片预览左右切换</title>
  8     <link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
  9     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 10     <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
 11     <style>
 12     .el-image__inner {
 13         width: 100%;
 14         height: 100%;
 15     }
 16     </style>
 17 </head>
 18 <body>
 19     <div id="app">
 20         <div class="demo-image__preview">
 21             <el-image
 22                 style="width: 100px; height: 100px"
 23                 :src="url" 
 24                 :preview-src-list="srcList">
 25             </el-image>
 26         </div>
 27         <el-table
 28           :data="tableData"
 29           style="width: 100%">
 30           <el-table-column
 31             label="图片"
 32             width="180">
 33             <template slot-scope="scope">
 34                     <el-image
 35                     style="width: 100px; height: 100px"
 36                     :src="scope.row.url"
 37                     :preview-src-list="scope.row.srcList"
 38                     >
 39                   </el-image>          
 40             </template>
 41           </el-table-column>
 42           <el-table-column
 43             prop="date"
 44             label="日期"
 45             width="180">
 46           </el-table-column>
 47           <el-table-column
 48             prop="name"
 49             label="姓名"
 50             width="180">
 51           </el-table-column>
 52           <el-table-column
 53             prop="address"
 54             label="地址">
 55           </el-table-column>
 56         </el-table>
 57     </div>
 58     
 59       <script>
 60           var app = new Vue({
 61             el: '#app',
 62             data() {
 63                 return {
 64                     url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
 65                     srcList: [
 66                     'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
 67                     'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
 68                     ],
 69                     tableData: [{
 70                         date: '2016-05-02',
 71                         name: '王小虎',
 72                         address: '上海市普陀区金沙江路 1518 弄',
 73                         url: 'https://cn.bing.com/th?id=OIP.4Zu1i_Id-ZHrm2qXDSghwAHaEz&pid=Api&rs=1',
 74                         srcList: [
 75                         'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
 76                         'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
 77                         ]
 78 
 79                     }, {
 80                         date: '2016-05-04',
 81                         name: '王小虎',
 82                         address: '上海市普陀区金沙江路 1517 弄',
 83                         url: 'http://photocdn.sohu.com/20100628/Img273133689.jpg',
 84                         srcList: [
 85                         'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
 86                         'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
 87                         ]
 88                     }, {
 89                         date: '2016-05-01',
 90                         name: '王小虎',
 91                         address: '上海市普陀区金沙江路 1519 弄',
 92                         url: 'http://www.fj.xinhuanet.com/titlepic/112424/1124243097_1552731566217_title0h.jpg',
 93                         srcList: [
 94                         'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
 95                         'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
 96                         ]
 97                     }, {
 98                         date: '2016-05-03',
 99                         name: '王小虎',
100                         address: '上海市普陀区金沙江路 1516 弄',
101                         url: 'http://pica.nipic.com/2008-03-26/2008326165225669_2.jpg',
102                         srcList: [
103                         'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
104                         'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
105                         ]
106                     }]
107                 }
108             }
109           })
110       </script>
111 </body>
112 </html>

 

posted on 2019-10-16 10:53  奔驰的码儿  阅读(638)  评论(0)    收藏  举报

导航