怎么让按钮或者文字触发elementui的查看大图功能
今天开发遇到了一个问题,就是一个列表,图片默认是以文字的形式展示的,但是点击文字的时候要查看大图,
刚开始一想到用elementui自带的查看大图功能会比较方便,但是,后来写上才发现,用官方自带的就必须要添加一张默认图片,可是这张图片需求是默认不能展示的,这就犯了难,于是思前想后,痛定思痛,想到了一个还算不错的解决办法,就是把图片默认定位到文字的位置,大概就是这样
// 展示图片的样式
.bigImg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
}
把图片默认放在文字的上面,可是这样就挡住了文字,没关系,这时候只要设置透明度就可以了,把透明度设置成0,这样图片就不会出现了,但是点击文字的时候还是可以查看大图的
设置完透明度之后的结果这样,完美无瑕,图片就隐藏在这个红框的位置了,非常nice
zz
因为官方文档也没有可以触发大图展示的方法所以这个方法在我看来,算是比较好的解决办法了吧,友友们要是有比较好的方法请一定要私信我,让俺学习下。