我的用的vue2.0
# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -Smain.js
import Vant from "vant"
import 'vant/lib/index.css';
Vue.use(Vant)
<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.dataif(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>
