vue轮播图里面预览穿透 :preview-teleported=“true“

于 2024-04-29 14:42:27 发布
阅读量125 收藏
点赞数 3
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ftally/article/details/138312661
版权
文章讲述了在Vue的el-carousel组件中，如何使用`preview-teleported`属性以及`preview-src-list`来实现在点击图片时显示预览效果，同时处理穿透问题的详细代码示例。
摘要由CSDN通过智能技术生成

vue轮播图里面预览穿透 :preview-teleported="true"

<el-carousel :interval="5000" arrow="always" :style="{ 'z-index': 1000 }">
                        <el-carousel-item v-for="(ite, idx) in list" :key="idx">
                            <div class="AllSMAYMap_swiper_cont">
                                <div class="AllSMAYMap_swiper_items" v-for="(ites, idxs) in ite.list" :key="idxs">
                                    
                                    <el-image style="width: 100%; height: 100%" :src="ites" :preview-teleported="true"  :preview-src-list="ite.list"  :initial-index="CloseImgIndex"  @click="CloseImgEvent(ite,idx,ites,idxs)"
                                        :alt="ite">
                                    </el-image>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>

Ftally
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue-preview-bug:vue-preview使用Bug
04-08
在开发过程中，我们常常需要处理图片预览的功能，这时`vue-preview`就派上了用场。`vue-preview`是一款专为Vue设计的图片预览和灯箱插件，它提供了一种简洁而高效的方式来实现这一功能。然而，在实际应用中，可能会...
vue-doc-preview:Vue文档预览组件
05-06
vue-doc-preview vue文档预览组件，此组件将在页面上显示文档的内容。 英文自述文件|用进口首先，从yarn或npm添加此程序包。 yarn add vue-doc-previewornpm i vue-doc-preview --save然后，将此组件导入.vue文件。 ...
【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效
m0_59699613的博客
11-14 1618
设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。
vue3 + element-plus 使用Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-30 7573
vue3 + element-plus 使用 Image 图片组件，点击图片预览功能。发现在table中，会出现预览的图片被遮罩。
vue3里面使用el-image-vie出现图片预览导致页面卡顿停止加载问题
qq_44552416的博客
02-27 1030
需求：我们在使用element-plus组件里面的图片预览时候，通过点击按钮来实现图片预览的效果。在开发过程中我们会遇到图片预览的时候出现卡顿出不来，导致当前的页面停止加载了。
vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决
m0_52761651的博客
11-01 3306
vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决
【Element】el-image 预览功能配置
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
08-29 274
<el-image :preview-teleported="true" v-for="img in item.imageList" style="width: 100%; height: auto" :src="img" :preview-src-list="item....
vue样式穿透 ::v-deep的具体使用
10-15
Vue.js 是一款流行的前端框架，它的组件化特性使得开发更加高效。然而，当涉及到组件间的样式隔离时，可能会遇到一些挑战。Vue 提供了一种叫做 `scoped` 的属性，用于限制样式只作用于当前组件，避免全局污染。但是...
vue轮播图插件vue-concise-slider的使用
08-27
Vue轮播图插件vue-concise-slider的使用 Vue轮播图插件vue-concise-slider是一个轻量级的滑动组件，配置简单，支持自适应/全屏+按钮+分页，同时兼容移动端和PC端版本。下面将详细介绍vue-concise-slider的使用和其...
vue轮播图插件vue-awesome-swiper
08-28
Vue-Awesome-Swiper 轮播图插件详解 Vue-Awesome-Swiper 是一个功能强大且灵活的 Vue.js 轮播图插件，支持 Vue.js 1.x 到 2.x 版本，兼顾 PC 和移动端，SPA 和 SSR 应用场景。下面将详细介绍 Vue-Awesome-Swiper 的...
图片实现鼠标悬浮蒙层、遮罩层，element 的 table 中使用 image 组件并实现预览放大，解决 图标 icon 遮挡图片预览放大事件。
youyudehan的博客
08-24 1668
图片实现鼠标悬浮蒙层、遮罩层，element 的 table 中使用 image 组件并实现预览放大，解决 图标 icon 遮挡图片预览放大事件。
【Element】el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整问题
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-14 1883
el-dialog 内使用 el-image 并添加 preview-src-list 预览，拖拽导致图片预览不完整。image-viewer 是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true。
解决el-image点击回显问题
最新发布
Mxy18851251178的博客
04-08 975
你看 点击会有一个这个画面崩掉的问题 这个时候用到一个东西就可以解决了。添加这个属性 preview-teleported ='true'
【el-image图片查看时 样式穿透表格问题】
regretTAT的博客
08-08 868
element-ui el-image图片查看 样式混乱。
vue2实现传送门效果
yinge0508的博客
07-13 2112
vue2实现传送门效果
el-image图片预览显示bug
_web_Z的博客
03-31 888
解决方案 ： 添加 preview-teleported 属性即可
[Vue3+Element-Plus]点击列表中的图片预览时，图片被表格覆盖问题
qq_43458194的博客
03-04 5678
问题复现： 源代码段： <el-table-column prop="id" label="ID" width="80" align="center" sortable/> <el-table-column label="头像" width="85px"> <template #default="scope"> <el-image style="width: 60px;height: 60px;" ..
<nut-cell title="工作写实" :is-link="true" to="/realistic/list" :show-icon="true" />怎么传值,怎么取值
05-26
你可以使用props来传递值，例如： ```html <!-- 父组件 --> <template> <div> <nut-cell :title="title" :is-link="isLink" :show-icon="showIcon" /> </div> </template> <script> import NutCell from '@/components/NutCell.vue' export default { components: { NutCell }, data() { return { title: '工作写实', isLink: true, showIcon: true } } } </script> ``` 你可以在子组件中使用props来接收这些值，例如： ```html <!-- 子组件 NutCell.vue --> <template> <div class="nut-cell"> <div class="nut-cell__title">{{ title }}</div> <div class="nut-cell__right-icon" v-if="showIcon"> <i class="iconfont icon-right"></i> </div> </div> </template> <script> export default { props: { title: { type: String, default: '' }, isLink: { type: Boolean, default: false }, showIcon: { type: Boolean, default: false } } } </script> ``` 这样就能够在父组件中传递数据给子组件了，子组件可以根据props来渲染自己的内容。对于父组件来说，可以使用computed或者methods来获取子组件的数据，例如： ```html <!-- 父组件 --> <template> <div> <nut-cell ref="cell" :title="title" :is-link="isLink" :show-icon="showIcon" /> <button @click="handleClick">获取子组件数据</button> </div> </template> <script> import NutCell from '@/components/NutCell.vue' export default { components: { NutCell }, data() { return { title: '工作写实', isLink: true, showIcon: true } }, methods: { handleClick() { const title = this.$refs.cell.title const isLink = this.$refs.cell.isLink const showIcon = this.$refs.cell.showIcon console.log(title, isLink, showIcon) } } } </script> ``` 在这个例子中，我们通过在父组件中给子组件添加ref属性来获取子组件的实例，并且通过访问子组件的属性来获取子组件的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值