react中div的全屏与退出全屏

Z时代
2024-01-10
分类：综合

react

import React, { useState, useRef } from 'react'
import { Tabs, List, Input, Image } from 'antd'
import Api from '../../../../../api'
import moment from 'moment'
import { deepClone } from '../../../../../utils/tools'
import { Icon } from '../../../../../components/light'
const { Search } = Input
const { TabPane } = Tabs
let historyFriends = []
export default function useChatList() {
  const [isFullScreen, setIsFullScreen] = useState(false)
  const chatContent = useRef(null)
  //全屏
  const handleFullScreen = () => {
    if (isFullScreen) {
      document.exitFullscreen()
    } else {
      chatContent.current.requestFullscreen()
    }
    setIsFullScreen(!isFullScreen)
  }
  const getChatDom = () => {
    return (
      <div className="m-chat-list-wrap">
        <div className="m-chat-list-info" ref={chatContent}>
          <div className="m-chat-list-header">
            <span className="m-chat-list-header-title">聊天内容</span>
            <span className="m-chat-list-header-content"></span>
            <span className="m-chat-list-header-tool" onClick={handleFullScreen}>
              <Icon
                name={isFullScreen ? 'fullscreen-exit' : 'fullscreen'}
              ></Icon>
              {isFullScreen ? '退出全屏' : '全屏查看'}
            </span>
          </div>
        </div>
      </div>
    )
  }
  return {
    handleReset,
    getChatDom,
  }
}

    if (isFullScreen) {
      document.exitFullscreen()
    } else {
      chatContent.current.requestFullscreen()    }

加强版：

full.js:

//全屏
// 打开浏览器全屏模式
/**
 * screenChange <Function> 为窗口变化的 的回调函数  参数为当前是否为全屏状态
 */
const initFullScreen = (screenChange) => {
  // 取值17是为了处理页面内容出现滚动条的情况
  let isFull =
    window.screen.height - window.document.documentElement.clientHeight <= 17
  // 阻止F11键默认事件，用HTML5全屏API代替
  window.addEventListener('keydown', function (e) {
    e = e || window.event
    if (e.keyCode === 122 && !isFull) {
      e.preventDefault()
      enterFullScreen()
    }
  })
  //监听窗口变化
  window.onresize = function () {
    isFull =
      window.screen.height - window.document.documentElement.clientHeight <= 17
    screenChange(isFull)
  }
}
//进入全屏
const enterFullScreen = (el = document.documentElement) => {
  let rfs =
    el.requestFullScreen ||
    el.webkitRequestFullScreen ||
    el.mozRequestFullScreen ||
    el.msRequestFullscreen
  if (rfs) {
    // typeof rfs != "undefined" && rfs
    rfs.call(el)
  } else if (typeof window.ActiveXObject !== 'undefined') {
    // for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
    let wscript = new ActiveXObject('WScript.Shell') //eslint-disable-line
    if (wscript != null) {
      wscript.SendKeys('{F11}')
    }
  }
}
// 退出全屏
const exitFullScreen = () => {
  let el = document
  let cfs =
    el.cancelFullScreen ||
    el.mozCancelFullScreen ||
    el.msExitFullscreen ||
    el.webkitExitFullscreen ||
    el.exitFullscreen
  if (cfs) {
    // typeof cfs != "undefined" && cfs
    cfs.call(el)
  } else if (typeof window.ActiveXObject !== 'undefined') {
    // for IE，这里和fullScreen相同，模拟按下F11键退出全屏
    let wscript = new ActiveXObject('WScript.Shell') //eslint-disable-line
    if (wscript != null) {
      wscript.SendKeys('{F11}')
    }
  }
}
export {
  initFullScreen,
  enterFullScreen,
  exitFullScreen,
}

import React, { useState, useRef, useEffect } from 'react'
import { Tabs, List, Input, Image } from 'antd'
import Api from '../../../../../api'
import moment from 'moment'
import { deepClone } from '../../../../../utils/tools'
import { Icon } from '../../../../../components/light'
import {
  initFullScreen,
  enterFullScreen,
  exitFullScreen,
} from '../../../../../utils/full'
const { Search } = Input
const { TabPane } = Tabs
let historyFriends = []
export default function useChatList() {
  const [activeKey, setActiveKey] = useState('1')
  const [friends, setFriends] = useState([])
  const [searchValue, setSearchValue] = useState()
  const [friendActiveId, setFriendActiveId] = useState()
  const [isFullScreen, setIsFullScreen] = useState(false)
  const chatContent = useRef(null)
  //获取好友或群列表
  const handleSearchFriendsList = ({ type }) => {
    Api.light.testInsightFriends({ type }).then((res) => {
      if (res.state === 1) {
        const friends = Array.isArray(res.data) ? res.data : []
        setFriends(friends)
        historyFriends = deepClone(res.data)
        if (friends.length > 0) {
          setFriendActiveId(friends[0].id)
        }
      }
    })
  }
  //切换tab
  const handleTabsChange = (key) => {
    setActiveKey(key)
    handleSearchFriendsList({ type: key })
  }
  //重置
  const handleReset = () => {
    setActiveKey('1')
    handleSearchFriendsList({ type: '1' })
  }
  //搜索
  const onSearch = (value) => {
    console.log(value)
    value = value.trim()
    if (value) {
      const newFriends = historyFriends.filter((item) => {
        if (item.name.includes(value)) {
          return true
        } else {
          return false
        }
      })
      setFriends(newFriends)
    } else {
      setFriends(historyFriends)
    }
  }
  //全屏
  const handleFullScreen = () => {
    if (isFullScreen) {
      exitFullScreen()
    } else {
      enterFullScreen(chatContent.current)
    }
    setIsFullScreen(!isFullScreen)
  }
  const screenChange = (isFull) => {
    console.log('是否全屏', isFull)
    setIsFullScreen(isFull)
  }
  useEffect(() => {
    //初始化
    initFullScreen(screenChange)
  }, [])
  const renderFriends = ({ type }) => {
    const friendsDom = (
      <List
        dataSource={friends}
        renderItem={(item) => (
          <div
            className={`m-friends-item ${
              item.id === friendActiveId ? 'active' : ''
            }`}
            onClick={() => setFriendActiveId(item.id)}
          >
            <Image
              className="m-friends-item-img"
              src={item.img}
              alt={'图片'}
              preview={{
                mask: '',
              }}
            ></Image>
            <div className="m-friends-item-info">
              <div className="m-friends-item-title">
                <div className="m-friends-item-title-nickname">{item.name}</div>
                <div className="m-friends-item-title-time">
                  {moment(item.date).format('YYYY-MM-DD')}
                </div>
              </div>
              <div className="m-friends-item-msg">{item.msg}</div>
            </div>
          </div>
        )}
      />
    )
    return (
      <div className="m-friends-wrap">
        <div className="m-friends-search">
          <Search
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
            placeholder="搜索好友昵称/备注"
            onSearch={onSearch}
            style={{ width: '100%' }}
          />
        </div>
        <div className="m-friends-info">{friendsDom}</div>
        <div className="m-friends-footer">
          共有数据： <span className="m-total-text">{friends.length}</span> 条
        </div>
      </div>
    )
  }
  const getChatDom = () => {
    return (
      <div className="m-chat-list-wrap">
        <div className="m-chat-list-sidebar">
          <Tabs
            activeKey={activeKey}
            onChange={handleTabsChange}
            centered
            className="m-friends-tabs"
          >
            <TabPane tab="外部好友" key="1">
              {renderFriends({ type: '1' })}
            </TabPane>
            <TabPane tab="内部好友" key="2">
              {renderFriends({ type: '2' })}
            </TabPane>
            <TabPane tab="外部群" key="3">
              {renderFriends({ type: '3' })}
            </TabPane>
            <TabPane tab="内部群" key="4">
              {renderFriends({ type: '4' })}
            </TabPane>
          </Tabs>
        </div>
        <div className="m-chat-list-info" ref={chatContent}>
          <div className="m-chat-list-header">
            <span className="m-chat-list-header-title">聊天内容</span>
            <span className="m-chat-list-header-content"></span>
            <span
              className="m-chat-list-header-tool"
              onClick={handleFullScreen}
            >
              <Icon
                name={isFullScreen ? 'fullscreen-exit' : 'fullscreen'}
              ></Icon>
              {isFullScreen ? '退出全屏' : '全屏查看'}
            </span>
          </div>
        </div>
      </div>
    )
  }
  return {
    handleReset,
    getChatDom,
  }
}