vue对富文本图片放大和宽度控制

1. vue控制富文本图片宽度

通过 v-html 创建的 DOM 内容不受作用域(scoped)内的样式影响,所以正常在scoped里面设置宽高是不起作用的,添加 !important 也是没用的。

解决方法:
在css内再写一个不加 scoped 的 style,单独设置富文本的img样式

<style lang="scss">
img {width: 100%;
}
</style>

2.vue实现富文本图片点击放大功能

<!-- 新增点击富文本图片放大功能 --><p class="content-detail" v-html="articleContent" @click="showImg($event)"></p>
<!-- 富文本图片放大区域 --><divclass="imgDolg"v-show="imgPreview.show"@click.stop="imgPreview.show = false"><iclass="el-icon-close"id="imgDolgClose"@click.stop="imgPreview.show = false"></i><img @click.stop="imgPreview.show = true" :src="imgPreview.img" /></div><!-- 放大demo区 -->

data中:
// 图片放大imgPreview:{img:"",show:false}

methods中:
// 图片点击放大showImg(e) {// console.log(e.target)if (e.target.tagName == 'IMG') {this.imgPreview.img = e.target.srcthis.imgPreview.show = true}},

//富文本图片放大
.imgDolg {width: 100vw;height: 100vh;position: fixed;z-index: 9999;background-color: rgba(140, 134, 134, 0.6);top: 0;left: 0;display: flex;align-items: center;justify-content: center;#imgDolgClose {position: fixed;top: 35px;cursor: pointer;right: 7%;font-size: 50px;color: white;}img{width: 80%;}
}

vue对富文本图片放大和宽度控制相关推荐

小程序富文本图片放大功能
// 富文本图片放大 function richImg(txt) {//txt 指的是接口返回的富文本// 主要代码let imgarr = [];let regex = new RegExp(/&l ...
vue v-html 富文本图片附件前图标显示问题
vue v-html 富文本图片溢出,解决图片溢出问题之后会出现附件的图片也是100%显示如图所示:附件前面的图片也是100% 解决方案:给富文本中所有图片增加 class 富文本 JavaScri ...
elementui图片上传php,vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
vue+element-ui+富文本————图片上传
最近用vue+element-ui开发一套后台管理系统,其中项目中需要用到富文本编辑器,这里总结下开发过程中遇到的坑和使用方法. 刚开始用的是vue-quill-editor结合element-ui上 ...
vue tinymce富文本设置图片宽度最大100%
vue tinymce富文本设置图片宽度最大100% 一.效果没有加样式前的图片显示加了之后二.实现方法控件配置中添加自定义内容样式 //自定义样式 defaultSetting: {con ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...
vue+php使用七牛云存储解决富文本图片冗余问题
解决服务器中图片冗余的方法很多,本篇介绍利用七牛云自带的api解决图片冗余问题问题: 在前端编辑富文本上传图片时,一般有两种方式,一种是将图片在本地预览,文件则在本地缓存,一种是直接上传服务器,然后 ...
html加载富文本_富文本图片懒加载解决方案
图片懒加载,作为性能优化的一部分,想必我们并不陌生. 在React.Vue项目中,我们都可以引入对应的NPM包处理图片懒加载,如 lazyload.react-lazyload.vue-lazyloa ...
使用vue的富文本编辑器操作
使用vue的富文本编辑器操作 vue的富文本编辑器使用以及多图片文件上传与回显一. vue-quill-edit 1. 安装vue的富文本 cd 当前的vue项目路径 npm install qui ...
UEditor +数学公式+ Vue+ Kityformula 富文本编辑器嵌入数学公式的实现
UEditor +数学公式+ Vue + Kityformula 富文本编辑器嵌入数学公式的实现首先展示一下代码实现后的效果: 现在我们开始写代码第一步:我们需要去下载Ueditor官方的包:Ue ...

vue对富文本图片放大和宽度控制

1. vue控制富文本图片宽度

2.vue实现富文本图片点击放大功能

vue对富文本图片放大和宽度控制相关推荐

最新文章

热门文章