cj-toolkit-x-full-screen

给界面上任意元素提供全屏能力的组件;
1.支持多层级逐级打开全屏和取消全屏。
2.提供完善的生命周期监听函数。
3.默认提供vue自定义指令，开箱即用

配置项

使用方法

1.安装插件

npm i @cj-toolkit-x/full-screen

2.引入样式

import '@cj-toolkit-x/full-screen/dist/index.css'

3.1自定义使用

import { FullScreen, FullScreenOptions } from '@cj-toolkit-x/full-screen'
let fullScreen: FullScreen
onMounted(() => {
    const table = document.getElementById('table-data-container')
    if (table) {
        const options: FullScreenOptions = {
            targetEl: table,// 绑定需要被全屏的元素
        }
        // 创建全屏实例
        fullScreen = new FullScreen(options)
    }
})
onUnmounted(() => {
    // 销毁全屏实例
    fullScreen1?.destory();
})

3.2指令方式使用

a.安装vue全局指令

// vue2指令
import { v2FullScreen } from '@cj-toolkit-x/full-screen'
Vue.directive("full-screen", v2FullScreen);

// vue3 指令
import { v3FullScreen } from '@cj-toolkit-x/full-screen'
createApp(App).directive('full-screen', v3FullScreen)

b.业务中使用

<!-- 通过指令方式绑定-->
<div class="item table-data-container" v-full-screen="fullScreenOptions">
  <span class="title">指令方式绑定</span>
  <el-table :data="data" highlight-current-row border>
    <el-table-column label="省" prop="province" align="center"></el-table-column>
    <el-table-column label="市" prop="city" align="center"></el-table-column>
    <el-table-column label="性别" prop="gender"></el-table-column>
    <el-table-column label="编号" prop="code"></el-table-column>
    <el-table-column label="姓名" prop="cnName"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
  </el-table>
</div>
<script lang="ts" setup>
    // 指令绑定的配置项
    const fullScreenOptions = {}
</script>

4.监听全屏和取消全屏事件实现动态修改textarea的高度

const fullScreenOptions: FullScreenOptions = {
  // zIndex: 1000, // 手动指定zIndex
  // closeAllOnEsc: true, // 按ESC 的时候取消所有的全屏效果
  actionListeners: {
    /**
     * 全屏修改rows
     */
    fullScreen (fullScreen: FullScreen) {
      const { targetEl } = fullScreen
      const children = targetEl.getElementsByTagName('textarea')
      for (let i = 0; i < children.length; i++) {
        const child = children[i]
        const oldRows = child.getAttribute('rows')
        child.setAttribute('rows', '50')
        oldRows && child.setAttribute('oldRows', oldRows)
      }
    },
    /**
     * 取消全屏文本域恢复
     */
    cancelFullScreen (fullScreen: FullScreen) {
      const { targetEl } = fullScreen
      const children = targetEl.getElementsByTagName('textarea')
      for (let i = 0; i < children.length; i++) {
        const child = children[i]
        const oldRows = child.getAttribute('oldRows') || '2'
        child.removeAttribute('oldRows')
        oldRows && child.setAttribute('rows', oldRows)
      }
    }
  }
}

5.样式覆盖

6.常见问题

1.如果全屏后界面显示异常，请先检查是否在元素上设置了zIndex,

源代码地址传送门
demo地址传送门