本文实例为大家分享了vue使用screenfull插件实现全屏功能的具体代码，供大家参考，具体内容如下
1、安装screenfull.js插件（在npm官网上有）
|
1
|
npm install screenfull --save |
2、在vue项目中 src/components/ScreenFull/index.vue（写成公共组件）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<template> <el-tooltip effect="dark" content="全屏" placement="bottom"> <img @click="screen" class="pointer" :src="require('@/assets/images/screenful.png')" :width="width" :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组件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<template> <screenfull class="ml64" :width="20" :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> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/louting249/article/details/103735366
