本地npm run dev 功能正常,然而打包后放在线上,预览不触发,页面有个上传功能,上传图片的时候会触发页面的预览功能(仅触发第一张图) 后面调整了el-image元素的位置,让其和触发的文字按钮在同一个父元素内,功能就正常了
移除scoped:如果可能,你可以移除 scoped 属性,这样你的样式将不再局限于当前组件,但这也可能导致样式污染。 使用全局样式:在全局样式文件中定义你需要的样式。 使用深度选择器(Vue 2 中的 hack):虽然这不是一个官方推荐的方法,但你可以使用 /deep/ 或>>>(在某些预处理器中)作为深度选择器。 对于你的具体情况...
log('srcList', this.srcList) }, }, computed: { // 处理预览图片数据 // previewSrc() { // return this.srcList // } }, } .preview-container { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; display: flex; justify-content: center; align-items: ce...
这么写的话预览是正常加载的,但是由于之前给html设置了-webkit-app-region: drag;,所以预览遮罩点击关闭功能会失效,关闭按钮也无法点击,只能自定义viewer给其添加-webkit-app-region: no-drag;样式,好让它表现正常。改为: <el-image :src="record.fileUrl" :preview-src-list="[fileUrl]" :hide-on-click-mo...
神马,没有生效,好吧,el-image-viewer写在了el-dialog中,对话框层级太高被覆盖了,zIndex处理一下: <el-buttontype="text"@click="onPreview">图片预览</el-button><el-image-viewer:zIndex='9999'v-if="showViewer":on-close="closeViewer":url-list="[img_url]"/> ...
有时候我们的需求和组件提供的不一致,就需要自己封装组件,有的功能实现起来很麻烦,产品要做一个双击图片打开预览的功能,原生js实现有点费劲。我们看一下Image的源码ui图片,发现大图预览是一个小组件image-,打开看看它的propsui图片,如下 props:{urlList:{type:Array,default:()=>[] ...
el-image图片预览 不生效,点击问题预览图片实现逻辑:点击文字的时候触发previewSrcList的点击事件触发预览本地npmrundev功能正常,然而打包后放在线上,预览不触发,页面有个上传功能,上传图片的时候会触发页面的预览功能(仅触发第一张图)后面调整了el-image元素的位置
element el-image,图片预览,::v-deep 样式穿透修改样式不生效? 当前是vue2的项目? ::v-deep .el-image-viewer__wrapper .el-image-viewer__canvas {width:80%!important;height:80%!important; } "vue":"^2.6.11","sass":"^1.26.5","sass-loader":"^8.0.2", 在Vue 2 中,并没有内置的::v...
element el-image,图片预览,::v-deep 样式穿透修改样式不生效? 当前是vue2的项目? ::v-deep .el-image-viewer__wrapper .el-image-viewer__canvas {width:80%!important;height:80%!important; } "vue":"^2.6.11","sass":"^1.26.5","sass-loader":"^8.0.2", 在Vue 2 中,并没有内置的::v...