vue 预览v-html 富文本里的图片 使用vant

我的用的vue2.0

Vue 2 项目,安装 Vant 2:

javascript 复制代码
npm i vant@latest-v2 -S

main.js

javascript 复制代码
import Vant from "vant"
import 'vant/lib/index.css';
Vue.use(Vant)
javascript 复制代码
<template>
  <div class="wrap">
    <!--type == 5是推广页是纯H5 contentType != 1 也是纯H5-->
    <video v-if="info.type != 5 && info.contentType == 1" :src="info.content" :poster="coverImage" controls class="video-style"></video>   
    <div v-if="info.type != 5" class="title">
      <div class="d1">{{ info.name }}</div>
      <div class="d2">{{ info.createDate }}</div>
    </div>
    <div v-if="info.type != 5" class="share">
      <div class="create-by">{{info.createBy ? (info.createBy != 'admin' ? info.createBy : '管理员') : ''}}</div>
    </div>
    <!--真正使用的地方vant预览富文本里的图片-->
    <div v-html="info.brief" class="content" @click="judgeImg($event)"></div> 
  </div>
</template>

<script>
import { getTrainingDetail } from "@/api/course/training";
import {ImagePreview} from "vant"  //引入vant预览图片组件

export default {
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' }
    ]
  },
  name: "webview",
  data () {
    return {
      info: {},
      coverImage: ''      
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created () {
    //console.log(this.$route.query.id)
    if(this.$route.query.id){
      this.handleView(this.$route.query.id)      
    }    
  },
  mounted() {
    document.title = '详情';
  },
  methods: {
    //判断是否为图片并提取当前图片地址
    judgeImg(e){
        if(e.target.tagName=="IMG" && e.target.currentSrc){
            this.previewSingleImg(e.target.currentSrc)
        }
    },
    //查看单个大图
    previewSingleImg(url) {
        ImagePreview({
            images: Array.of(url),
            startPosition: 0,
        });
    },

    handleView(id){
      getTrainingDetail(id).then(res => {
        if(res.code == 200){
          this.info = res.data
          if(this.info.name.length > 12){
            document.title = this.info.name.substring(0, 12);
          }else{
            document.title = this.info.name
          }
          this.coverImage = this.info.cover
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.video-style { display: block; width: 100%}
.title{ padding: 10px; display: flex;}
.title .d1{ flex: 1; color: #333; font-size: 18px; font-weight: bold;}
.title .d2{ padding-top: 6px; white-space: nowrap; font-size: 12px; color: #999;}
.content{ padding: 0 10px 40px 10px; font-size: 14px;}
.share{ margin-top: 10px; padding-left: 10px}
.create-by{ font-size: 14px; color: #333;}
.content img{ max-width: 100%;}
</style>
相关推荐
会写代码的饭桶5 分钟前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中7 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略26 分钟前
web vue之状态管理Pinia
前端·javascript·vue.js
董世昌4127 分钟前
js怎样改变元素的内容、属性、样式?
开发语言·javascript·ecmascript
mosen86833 分钟前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
鸠摩智首席音效师1 小时前
如何清除 Yarn 缓存 ?
javascript
oh,huoyuyan2 小时前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明20022 小时前
single-spa原理解析
前端·javascript
一枚前端小能手2 小时前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm
@大迁世界3 小时前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript