图片预览-基础版

基于element-ui 的图片预览，我这里没有封装组件，实际运用中要自己要封装组件

1、element-ui 自带

<el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList">
            </el-image>

url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList:['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'],

2、点击文字预览图片

<div>
    <span style="color: #3967FF; cursor: pointer;" @click="onPreview">图片预览</span>
    <el-image ref="preview" style="width: 0px; height: 0px;" :src="url" :preview-src-list="srcList"></el-image>
</div>

export default {
    data() {
        return {
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [  'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'],
        };
    },
    methods: {
        onPreview(){
            this.$refs.preview.clickHandler()
        }
    }
}

3、使用element-ui的element-ui/packages/image/src/image-viewer组件（没有遇见bug）

<div>
    <el-button @click="show=true">预览</el-button>
    <el-image-viewer v-if="show" :on-close="()=>{show=false}" :url-list="srcList" />
</div>

components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
},
data() {
    return {
        srcList: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'],
        show: false,
    };
},