vue项目遇到的小功能记录

1、全屏功能

vue中有一个关于全屏的插件fullscreen,非常好用

第一步：安装插件，组件引入
import screenfull from 'screenfull';

第二步：监听button的click事件
 <el-button type="primary" @click="fullscreen()">全屏</el-button>
 
第三步：element表示要放大的dom元素，toggle表示放大还原状态的互相转化      
fullscreen(){
      const element = document.querySelector(".root");
      screenfull.toggle(element)
}

2、iframe标签预览本地pdf（不需要转化为网址形式的url，可为本地测试阅读pdf功能所用）

<iframe width="100%" height="100%" src="/123.pdf" frameborder="0"></iframe>                               

将需要打开的pdf放入项目的public文件夹下(src中的123.pdf即代表需要预览的文件名)

3、元素高度100%超出父元素

有时候用element ui 的tab组件，因为head自己占了一部分高度，因此content部分的高度很难设置，如果给head和content的父元素加一个fles布局，又会导致整体样式乱掉，设置百分之百又会多出来一截。因此，content高度充满父元素是一个待解决的问题。发现了一个符合这个问题的一个函数，在css中即可解决这个问题。

/deep/ .el-tabs__content {
            height: calc(100% - 2.5rem); 
}

其中2.5rem是我自己量的tab组件的head的高度。这样设置之后，content和head的高度加在一起刚好是整个父元素的高度，可以自适应浏览器的大小。