发布预览
项目中,后台管理添加成功之后,我们需要判断看到网站上的布局是否混乱,是否是我们想要的样式,所以就有发布预览
1,首先,我们需要在网站上新建一个发布预览的.vue页面,然后把共用页面的引入
<template>
<div>
<!-- 放图片 -->
<div>
<b-card
overlay
:img-src="listings"
img-alt="Card Image"
text-variant="white"
title="发布预览"
>
</b-card>
</div>
<!-- 详情 -->
<div class="wow fadeInUp animated" data-wow-delay="0.5s">
<b-container>
<b-row no-gutters v-show="!isloading">
<b-card-body>
<b-card-text><div v-html="content"></div></b-card-text>
</b-card-body>
</b-row>
</b-container>
</div>
</div>
</template>
<script>
import listings from '@/assets/listings-parallax.jpg'
export default {
name: 'productCenterInfo',
data () {
return {
listings,
item: [],
content: '',
isloading: true
}
},
mounted () {
this.init()
},
watch: {
'$route' () {
this.init()
}
},
methods: {
init () {
this.isloading = true
if (this.$route.query) {
var code = this.$route.query.code
var cCode = this.$route.query.cCode
if (this.$route.query.name == 'product') {
this.$http.get('api/ererer/erer/erer/' + code).then(res => {
this.isloading = false
// eslint-disable-next-line eqeqeq
if (res != undefined) {
this.content = res.data.data.productDetails
}
})
}
<!-- if (this.$route.query.name == 'solution') {
this.$http.get('api/sds