vue图片预览和点击放大

vue图片预览和点击放大

1.效果一

鼠标放在图片上会放大图片

vue代码：

<el-table-column
              prop="attachment"
              header-align="center"
              align="center"
              width="150px"
              label="图片">
              <template slot-scope="scope">
              <el-popover
                placement="right"
                title=""
                trigger="hover">
                <img :src="scope.row.attachment"/>
                <img slot="reference" :src="scope.row.attachment" :alt="scope.row.attachment" style="max-height: 50px;max-width: 130px">
              </el-popover>
        </template>
      </el-table-column>

效果二：鼠标图片点击放大

      <el-table-column label="附件" align="center" prop="attachment" width="180">
        <template slot-scope='scope'>
         <div id="app">
          <div class="demo-image">
            <div class="block">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.attachment"
                :preview-src-list="srcList" 
              ></el-image>
            </div>
          </div>
         </div>
        </template>
      </el-table-column>

在export default 的下面data下的return加上自己的srcList

 export default {
    name: "Invoice",
    components: {
       UploadImage,
       procInfo
    },
    
    data() {
      return {
        srcList: [
          'xxxx',
        ],