我的用的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>