elementUI的vue的列表图片悬浮,鼠标移动去图片放大。

Posted 苏格拉的底

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了elementUI的vue的列表图片悬浮,鼠标移动去图片放大。相关的知识,希望对你有一定的参考价值。

<el-table-column label="图片" align="center" prop="picture" >
        <template slot-scope="scope">
            <el-popover placement="right" trigger="hover">
                <img :src="scope.row.picture" style="width:200px;height:350px;"/>
                <img slot="reference" :src="scope.row.picture"  style="max-width: 50px;max-height: 100px">
            </el-popover>
        </template>

就不上效果图了,在显示图片的基础下,鼠标移动去能放大图片。

以上是关于elementUI的vue的列表图片悬浮,鼠标移动去图片放大。的主要内容,如果未能解决你的问题,请参考以下文章

vue 悬浮效果(hover)

vue项目中鼠标悬浮图片实现hover效果切换图片-案例

elementui cacader 级联选择器 鼠标悬浮显示节点内容

鼠标放到划过图片出现悬浮透明边框,别的图片位置不变

js+css鼠标移动图片放大

vue鼠标悬停显示弹窗 如果弹窗在最下边