说明书组件封装（PDF等类型）

1.showInstructions.vue

<template>
	<div class="bookCont" v-if="isShow">
		<componentsHeader>
			<a class="btn_return" slot='left' @click="closePop">&lt; 返回</a>
	  		<h1 slot='center'>{{books.title}}</h1>
		</componentsHeader>
		<iframe :src="books.src" id="showinstructions" width="100%" height="800"></iframe>
		<div class="readBook">
			&#12288;&#12288;我以阅读《{{books.title}}》 <button @click="nextStep">下一步</button>
		</div>
	</div>
</template>

<script>
	import componentsHeader from '@/components/header.vue'
	export default{
		name:'showInstructions',
		components:{componentsHeader},
		props:{
			books:{
				type:Object,
				default:function () {
		        return {title:"产品说明书",src:""}
		     }
			},
			isShow:{
				type : Boolean,
				default: false
			}
		},
		data () {
			return {}
		},
		methods:{
			closePop(){
				this.$emit("popStateChange")
			},
			nextStep(){
				this.$emit("popStateChange","1")
			}
		},
		mounted(){
			console.log(this.books.src);
		}
		
		
	}
</script>

<style scoped>
.bookCont{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 940px;
	z-index: 200;
	background-color: #000000;
}
.readBook{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: #fff;
	font-size: 24px;
}
button{
	display: inline-block;
	/*width: 200px;*/
	height: 50px;
	margin: 0 auto;
	padding:0 40px;
	line-height: 25px;
	border-radius: 34px;
	color: #fff;
	font-weight:lighter;
	font-size: 24px;
	text-align: center;
	border: 1px solid rgba(255, 105, 119,.5);
	/* #cf4061 */
	background-color:#cf4061;
	cursor: pointer;
}
</style>

2.使用

<template>
<showInstructions
            v-if="isShowBook"
            :isShow="isShowBook"
            @popStateChange="changeShowBook"
            :books="currentBook"
        ></showInstructions>
</template>
<script>
import showInstructions from "@/components/showInstructions.vue";
components: {
        showInstructions
    },