Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

[Mr-Super-X]

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]

There's no problem with the library, its the default browser behaviour that cannot be manipulated.