Vue3使用v-viewer实现查看大图功能

安装

1	npm install v-viewer@next

全局引入

在main.js文件中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

const app = createApp(App)
app.use(Viewer).mount('#app')

在页面中使用

定义options的url

1
2
3

const options = ref({
    url: 'data-src'
})

HTML代码

src填图片在页面中的展示图片链接（一般是略缩图），data-src则填大图的图片链接（一般是更清晰的原图）

<el-table-column fixed="left" prop="imageName" label="头像" align="center" width="180">
    <template #default="scope">
        <div v-viewer="options">
            <el-image :src="'http://localhost:8080/images/adoption/' + scope.row.imageName"
                :data-src="'http://localhost:8080/images/adoption/' + scope.row.imageName"
                style="width: 150px" />
        </div>
    </template>
</el-table-column>