vue 全屏功能组件(screenfull)的使用

2021-11-01 20:05:13 阅读：318 来源： 互联网

标签：vue js 全屏注册 ScreenFull 组件 screenfull 全局

在顶部的工具栏中补充一个按钮，点它之后进行全屏展示。为了方便复用功能，把它注册成一个全局组件

1 创建组件

<template>
  <!-- 放置一个图标 -->
  <div style="display:inline-block">
    <svg-icon icon-class="fullscreen" class="fullscreen" />
  </div>
</template>

<script>
export default {
  name: 'ScreenFull'
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>

2 注册全局组件

在 component/index.js ( 这个文件是我把需要全局注册的组件集中注册,再在main.js 中进行全局注册 ) 中进行全局组件注册

2.1 component/index.js 代码如下`:`

import ScreenFull from './ScreenFull'
const componentsPlugin = {
  install(Vue) {
    // 省略其他...
    Vue.component('ScreenFull', ScreenFull)
  }
}

2.2 在main.js 中引入 component/index.js 并进行全局注册的代码如下:

3 安装组件

npm i screenfull

4 在全屏组件中引入

import screenfull from 'screenfull'

5 给icon 添加点击事件，在回调中使用使用插件的核心api

<svg-icon
   icon-class="fullscreen"
   class="fullscreen"
+  @click="toggleScreen"
/>

回调函数

toggleScreen () {
   screenfull.toggle()
}

标签：vue,js,全屏,注册,ScreenFull,组件,screenfull,全局
来源： https://blog.csdn.net/weixin_58206976/article/details/121086710

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9