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

javascript 复制代码

npm i vant@latest-v2 -S

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>

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

Vue 2 项目，安装 Vant 2：

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