J'ai lié l'attribut data d'un élément objet HTML dans un composant Vue, et j'ai un bouton plein écran pour afficher mon objet en mode plein écran.
il n'y a pas de problème avec chrome ou d'autres navigateurs, mais lorsque j'essaie d'afficher mon objet en mode plein écran sur le navigateur internet Samsung, mon objet se reconnecte et je dois rafraîchir la page.
J'ai regardé le "gameLink" et il ne change jamais sur "toggleFullScreen", il ne change qu'une fois sur le hook créé quand il est initialisé.
Comment puis-je l'empêcher de se reconnecter ?
Voici le code :
<b-nav-form>
<b-button id="fullscreen-btn" @click="toggleFullScreen">
<font-awesome-icon icon="expand" />
</b-button>
<b-tooltip target="fullscreen-btn" placement="bottom" variant="warning">Full screen</b-tooltip>
</b-nav-form>. . . .
<div class="game-screen-size">
<div id="target" style="width:100%; height:100%;">
<div v-if="fullscreen" style="position:fixed; top:15px; left:50%; z-index:1500">
<b-button id="compress-btn" @click="toggleFullScreen">
<font-awesome-icon icon="compress" />
</b-button>
<b-tooltip target="compress-btn" placement="bottom" variant="warning">Normall view</b-tooltip>
</div>
<object type="text/html" class="game-screen" :data="gameLink"></object>
</div>
</div>. . . .
computed: {
...mapState("playGame", ["status", "gameLink", "userGameInfo", "activeTables", "emptyTables"]),
},
methods: {
...mapActions("playGame", ["play", "userInfo", "tablesData"]),
toggleFullScreen () {
// toggle full screen using screenfull
const element = document.getElementById('target');
screenfull.toggle(element);
this.fullscreen = !this.fullscreen;
},
}
created() {
//gets the link and sets the gameLink on vuex store
this.play();
}....
vidéo du problème :
