vue使用screenfull外掛實現全屏功能
阿新 • • 發佈:2020-09-17
本文例項為大家分享了vue使用screenfull外掛實現全屏功能的具體程式碼,供大家參考,具體內容如下
1、安裝screenfull.js外掛(在npm官網上有)
npm install screenfull --save
2、在vue專案中 src/components/ScreenFull/index.vue(寫成公共元件)
<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元件
<template> <screenfull class="ml64" :width="20" :height="20"></screenfull> </template> <script> import screenfull from '@/components/ScreenFull' export default { name: 'navbar',components: { screenfull },methods: { },mounted() { } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="less" scoped> </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。