vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决

最新推荐文章于 2024-03-07 18:41:08 发布

欢喜~999

最新推荐文章于 2024-03-07 18:41:08 发布

阅读量3.1k

点赞数 7

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_52761651/article/details/127634470

版权

html代码,在需要预览大图的地方引入<el-image>

preview-teleported：image-viewer 是否插入至 body 元素上。嵌套的父元素属性会发生修改时应该将此属性设置为 true，设置这个属性图片遮罩层显示就不会有问题了。

preview-src-list：为预览大图的图片列表；

src：为图片地址

<div class="intro-img">
    <ul class="intro-img-list">
       <li class="app-intro-bd"
           v-for="i in appData?.GetAlgConfigMarket?.extraData?.previewImg"
          :key="i"
       >  
          <el-image style="width: 300px" :src="i" 
             :preview-src-list="appData?.GetAlgConfigMarket?.extraData?.previewImg"
             :preview-teleported="true"
           />
        </li>
   </ul>
</div>

预览效果展示：

优惠劵

欢喜~999

关注关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决

vue3.0 + element Plus实现预览大图的功能及图片遮罩层显示问题解决
复制链接

扫一扫

vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能

02-14

vue3-element-plus-typescript 基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能 vue-cli版： : vite版： : 系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和typescript，实践vue3.0的新特性以及vite打包工具，采用的是vue3.0的组成API，体验vue3和typescript以及打包工具vite等页面功能列表页列表页增删改改查采用vue3 composition api typescript在项目中运用，提供类型检查模拟数据，支持网络查看请求接口返回数据用typescript泛型约束 vue3-element-plus-typescript yarn install 编译和热重装以进行开发

Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip

05-02

Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 ........

3 条评论您还未登录，请先登录后发表或查看评论

【elementplus】el-image图片预览的显示不全问题（和el-table、el-dialog组合使用时）

最新发布

记录

03-07

806

在和el-table、el-dialog组合使用时，el-image图片预览的时候，会可能出现显示不全图片的情况。

vue3.0+vue-router+element-plus初实践

01-22

Vue3中文文档 Vue3.0对比Vue2.x优势框架内部做了大量的性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听，更小的打包文件等。新增的组合式API（即Composition API），更适合大型项目的编写方式。对TypeScript支持更好，去掉this操作，更强大的类型推导。初始化项目安装@vue/cli npm install @vue/cli -g 或 yarn global add @vue/cli 创建项目 vue create 项目名可以选择Vue3的配置进行项目初始化初始化完成后，安装vue-router，目前安装的版本是

vue3.0+element-plus实现国际化语言，动态路由菜单demo

01-27

vue3.0+element-plus实现国际化语言，动态路由菜单demo

使用vue+element ui图片放大预览遮盖层异常

weixin_46083166的博客

04-18

4191

使用element一个图片放大预览遮盖层只挡了一部分，如图错误代码 <el-image style="width: 100px; height: 100px" :src="'http://localhost:9090/file/'+scope.row.jlHeadurl" :preview-src-list="['http://localhost:9090/file/'+scope.row.jlH

Vue + ElementPlus 图片预览遮罩层异常

luyoo452470的博客

10-08

558

vue element plus 图片预览遮罩层异常显示问题

Element-plus 图片预览，遮罩层显示问题

qq_53172341的博客

02-20

440

Element-plus 图片预览，遮罩层显示问题。

element-plus设置全局遮罩层

周金鱼啊

06-16

1768

新建loading.ts文件 import { ElLoading } from 'element-plus'; let loadingCount = 0; let loading; const startLoading = () => { loading = ElLoading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.6)' });

Vue3 组件示例工程（四） —— 图片组件

Lyrelion的博客

07-23

2433

1.图片组件 image-viewer 编写效果展示：使用该组件时，当前页面会被加上黑色遮罩，屏幕中间会放大图片，屏幕四周会展示一些操作按钮，用于实现轮播、关闭、放大缩小、全屏、旋转等功能组件名称：TImageViewer 定义关键字段及图标名（全屏 / 恢复原状）： constMode={ CONTAIN:{ name:'contain', icon:'el-icon-full-screen', }, ORIGINAL:{ ...

el-image点击遮罩层关闭图片点击哪张图片就预览哪张图片

Yangpengxunb的博客

02-22

611

【代码】el-image点击遮罩层关闭图片点击哪张图片就预览哪张图片。

Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统

05-02

Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...

【vue3+element-plus】el-image点击图片预览时，被表格覆盖问题，加preview-teleported也不生效

m0_59699613的博客

11-14

1212

设置此属性，是将image-viewer 插入至 body 元素上。而运行项目点击预览图片，image-viewer 并没有插入至 body 元素上。搜集很久解决方案都是加：preview-teleported=‘true’，但我这个项目没有生效。最终问题解决，image-viewer 插入至 body 元素上。# 使用 yarn 的情况，安装最新版本。# 使用 npm 的情况，安装最新版本。

vue3图片预览

laer_xiao的博客

08-25

946

1、安装：npm install vue3-preview-image -S2、在main.js中引入组合式api中引入方法调用关闭预览修改默认配置。

Element-ui 解决table设置fixed属性后 el-image组件放大图片样式被覆盖问题

还想做MAD

12-27

1929

Element-ui 解决table设置fixed属性后 el-image组件放大图片样式被覆盖问题 .el-table__fixed-body-wrapper { z-index: auto !important; }

vue3中文件预览功能的实现，包括图片、pdf、word、excel的实现

热门推荐

light的博客~~~

12-01

1万+

Vue3文件预览功能的实现，包括图片、pdf、word、excel的实现

Element ui 2.x抽离+封装图片预览功能，可以直接调用图片预览，加入点击遮罩层关闭图片预览功能

weixin_41308436的博客

11-15

1278

element ui得2.x版本得图片预览很随意啊，没有提供啥接口

利用element-ui图片查看器el-image实现“点击文字显示放大图片功能“

在奔跑中寻找的博客

04-28

5024

需求：如图，点击表格中的文件名查看大图查看element-ui的image组件源码，里面有两个文件(image-viewwe.vue和main.vue) el-image-viewer小组件源码其中props参数： props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, on.

element：大图预览出现层级穿透问题

weixin_45369499的博客

12-02

3720

项目中有这样的数据格式： [ { attachments: [] // 图片地址数组 // ...其它 }, // ...其它 ] 这时候需要将外层循环后再循环图片，使用el-image的previewSrcList开启大图预览。当外层有多个的时候，这时点击前面的图片大图，后面的内容会穿透到大图上，此时查看后面内容的层级为1，但大图的层级为2000，按常理不会穿透，百思不得其解，F12调试将.el-card__body的层级去掉时候就正常了。 <el-row :gutter="20

vue3.0+element Plus表单校验

05-28

在Vue3.0中，可以使用Vue3.0官方推荐的表单校验库VeeValidate或者使用Element Plus提供的表单校验功能。下面是一个使用Element Plus表单校验的示例： 1. 在Vue3.0项目中，首先需要先安装Element Plus组件库： ``` npm install element-plus --save ``` 2. 在需要使用表单校验的组件中，引入Element Plus的表单组件和校验规则： ```javascript <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const form = ref({ username: '', password: '', }); const rules = ref({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }, ], }); const submitForm = () => { // 表单校验 const formRef = this.$refs.form; formRef.validate((valid) => { if (valid) { // 校验通过 console.log('submit'); } else { // 校验不通过 console.log('error submit!!'); return false; } }); }; return { form, rules, submitForm, }; }, }; </script> ``` 在上面的示例中，我们使用了Element Plus的表单组件和校验规则来实现表单校验，其中： - `ElForm`：表单组件，用于包裹需要校验的表单项； - `ElFormItem`：表单项组件，用于包裹表单控件和校验规则； - `ElInput`：输入框组件，用于输入表单数据； - `ElButton`：按钮组件，用于提交表单数据； - `ref`：Vue3.0中用于获取组件实例的方法。在`setup()`函数中，我们使用了`ref`来定义表单数据和校验规则，并且定义了一个`submitForm()`方法来提交表单数据，其中： - `validate()`：表单校验方法，用于校验表单数据是否满足校验规则； - `valid`：校验结果，如果校验通过则为`true`，否则为`false`。总体来说，使用Element Plus的表单校验功能非常简单，只需要在需要校验的表单项中定义相应的校验规则，并在提交表单时调用`validate()`方法即可。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交