分享一个vue项目中的全屏插件,先上插件地址:https://mirari.cc/2017/08/14/%E5%85%A8%E5%B1%8F%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6vue-fullscreen/
具体使用方法:
1.安装依赖:
npm install vue-fullscreen --save
2.全局引入并使用:(main.js里面)
import fullscreen from 'vue-fullscreen'
Vue.use(fullscreen)
3.组件中使用:
<template>
<div id="app">
<div class="example">
Content
</div>
<button type="button" @click="toggle" >Fullscreen</button>
</div>
</template>
<script>
export default {
methods: {
toggle () {
this.$fullscreen.toggle(this.$el.querySelector('.example'), {
wrap: false,
callback: this.fullscreenChange
})
},
fullscreenChange (fullscreen) {
this.fullscreen = fullscreen
}
},
data() {
return {
fullscreen: false
}
}
}
</script>
完成!如果你觉得对你有帮助,请留下小心心。