移动端预览(双指缩放移动)富文本编辑器上传的图片

Posted 初辰ge

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端预览(双指缩放移动)富文本编辑器上传的图片相关的知识,希望对你有一定的参考价值。

通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能。

1.安装插件

npm install vue-photo-preview --save

2.main引入

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

3.给dom加点击事件

<div v-html="contents"
     @click="showImg($event)"></div>
<img :src="previewImg"
     style="display:none"
     ref="previewImg"
     preview="1">
showImg (e) 
  if (e.target.tagName == 'IMG') 
    this.previewImg = e.target.src
    this.$nextTick(() => 
      this.$refs.previewImg.click()
    )
  
,

以上是关于移动端预览(双指缩放移动)富文本编辑器上传的图片的主要内容,如果未能解决你的问题,请参考以下文章