取消el-upload自带动画效果及图片不裁剪功能

最新推荐文章于 2024-11-25 11:21:03 发布

SerendipityM

最新推荐文章于 2024-11-25 11:21:03 发布

阅读量3.2k

点赞数 4

文章标签：动画 vue.js css3

本文链接：https://blog.csdn.net/qq_45225759/article/details/122159288

版权

本文介绍如何通过CSS代码修改Vue中的el-upload组件，去除过渡效果并设置图片在方框内的显示方式为长边填充。当常规方法无效时，使用`::v-deep`深度选择器增强CSS选择器的影响力，确保样式生效。

摘要由CSDN通过智能技术生成

在应用el-upload所在页面加上如下代码，可以取消过渡效果，并且更改图片显示方式

/*去除upload组件过渡效果*/
.el-upload-list__item {
  transition: none !important;
}
 .el-upload-list__item-thumbnail {
    /* 图片在方框内显示长边 */
    object-fit: scale-down !important;
}

如果加上后仍然没有效果，可以加上::v-deep深度选择器

/*去除upload组件过渡效果*/
::v-deep .el-upload-list__item {
  transition: none !important;
}
::v-deep .el-upload-list__item-thumbnail {
    /* 图片在方框内显示长边 */
    object-fit: scale-down !important;
}

一起试试吧！！