本文實(shí)例為大家分享了vue使用screenfull插件實(shí)現(xiàn)全屏功能的具體代碼，供大家參考，具體內(nèi)容如下

1、安裝screenfull.js插件（在npm官網(wǎng)上有）

npm install screenfull --save

2、在vue項(xiàng)目中 src/components/ScreenFull/index.vue（寫成公共組件）

<template> <el-tooltip effect='dark' content='全屏' placement='bottom'> <img @click='screen' :src='http://www.leifengta.com.cn/bcjs/require(’@/assets/images/screenful.png’)' : :height='height'> </el-tooltip></template><script>import screenfull from ’screenfull’export default { name: ’screenful’, components: { }, props: { width: { type: Number, default: 20 }, height: { type: Number, default: 20 } }, data() { return { } }, computed: { }, watch: { }, methods: { screen() { if (!screenfull.isEnabled) { this.$message({ message: ’you browser can not work’, type: ’warning’ }) return false } screenfull.toggle() } }, created() { }, mounted() { }}</script><!-- Add 'scoped' attribute to limit CSS to this component only --><style lang='less' scoped></style>

3、使用screenful組件

<template> <screenfull : :height='20'></screenfull></template><script>import screenfull from ’@/components/ScreenFull’export default { name: ’navbar’, components: { screenfull }, data() { return { } }, computed: { }, watch: { }, methods: { }, created() { }, mounted() { }}</script><!-- Add 'scoped' attribute to limit CSS to this component only --><style lang='less' scoped></style>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。