基础版：
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={{ '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,
}
}
参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen