Vue: Membuat Menu Toggle Fullscreen Page

Kita dapat membuat menu yang dapat mengubah browser menampilkan halaman web kita menjadi fullscreen menggunakan API Fullscreen Javascript. Sehingga tampilan web kita akan menjadi lebih luas karena taskbar dan address bar akan disembunyikan pada mode fullscreen.

Pada kesempatan kali ini, tombol yang mau digunakan untuk membuat toggle fullscreen dibuat menggunakan komponen Switch vuetify. Berikut kodingan untuk membuat tombol switch menggunakan vuetify.

<v-switch
 hide-details
 v-model="fullscreen"
 label="Layar Penuh"
></v-switch>

Pada contoh di atas dapat dilihat tombol switch menggunakan model fullscreen untuk manipulasi nilainya. Secara default, nilai fullscreen ini diset dengan nilai false. Berikut contoh kodingannya:

data() {
    return {
        fullscreen: false
    }
}

Selanjutnya fullscreen pada data tersebut dipantau nilainya menggunakan watcher. Jika nilainya true maka kita memanggil API untuk mengubah browser menjadi fullscreen. Jika nilainya false maka mode fullscreen dinonaktifkan,

Contoh kodingan untuk menghandel fullsrcreen menggunakan watcher adalah sebagai berikut:

watch:{
  fullscreen(isFullscreen){
     if(isFullscreen){
        document.documentElement.requestFullscreen();
     }else{
        document.exitFullscreen();
     }
  },

}