安装
使用npm命令安装
npm install vue-fullscreen
使用
引入vue-fullscreen
,并使用Vue.use()
注册插件,之后即可使用。
个人代码
<template>
<div style="height: 100%;">
<fullscreen ref="fullscreen" class="fullscreenClass" :wrap="true" @change="fullscreenChange">
<i id="toggleBtn" :class="!fullscreen?'icon-quanping':'icon-suoxiaotuichuquanpingshouhui'" @click="toggle"/>
<div class="fullscreenContenT">
<header v-if="$slots.statistics">
<slot name="statistics"/>
</header>
<main>
<slot name="content"/>
</main>
<footer v-if="$slots.btnList">
<slot name="btnList"/>
</footer>
</div>
</fullscreen>
</div>
</template>
<script>
export default {
name: "fullscreen-container",
data() {
return {
fullscreen: false
}
},
methods: {
toggle() {
this.$refs['fullscreen'].toggle()
},
fullscreenChange(fullscreen) {
this.fullscreen = fullscreen
}
}
}
</script>