Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
Mr-Super-X opened this issue · 1 comments
Mr-Super-X commented
Every time you click, Report an error in vue3 + element plus
<template>
<el-tooltip v-model="visible" :hide-after="0">
<template #content>
<span>{{ toolTipContent }}</span>
</template>
<v-svg-icon
:icon-class="iconClass"
@click="handleToggle"
@mouseenter="visible = true"
@mouseleave="visible = false"
/>
</el-tooltip>
</template>
<script setup lang="ts">
import { ref, computed, onBeforeUnmount, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import screenfull from 'screenfull'
const visible = ref(false)
const isFullscreen = ref(false)
const toolTipContent = computed(() => (isFullscreen.value ? '退出全屏' : '全屏'))
const iconClass = computed(() => (isFullscreen.value ? 'exit-fullscreen' : 'fullscreen'))
const handleToggle = () => {
if (!screenfull.isEnabled) {
ElMessage({
message: 'you browser can not work',
type: 'warning',
})
return false
}
screenfull.toggle().catch(() => '')
}
const handleChange = () => {
isFullscreen.value = screenfull.isFullscreen
}
onBeforeUnmount(() => {
if (screenfull.isEnabled) {
screenfull.off('change', handleChange)
}
})
onMounted(() => {
if (screenfull.isEnabled) {
screenfull.on('change', handleChange)
}
})
</script>
gurvirbaraich commented
There's no problem with the library, its the default browser behaviour that cannot be manipulated.