Saya memiliki aplikasi Vue yang menjalankan Vuetify tetapi tidak satu pun dari aplikasi ini yang tampaknya dilengkapi untuk menangani keinginan saya untuk membatasi panjang maksimum halaman sehingga tidak ada pengguliran. Saya harap itu masuk akal. Harapan saya adalah hanya menarik layar dengan banyak perutean ke layar yang diformat serupa. Tentu saja, pengguna dapat membuat jendela lebih kecil, dalam hal ini saya perlu menggulir. Jadi bagaimana saya mengaturnya ketika saya ingin halaman terbuka ke layar penuh dengan panjang halaman maksimum yang akan mencegah KEBUTUHAN untuk menggulir, tetapi masih mengizinkan pengguliran jika diperlukan karena pengguna mengubah ukuran halaman menjadi sesuatu bagus lebih kecil?

Saya menghabiskan berjam-jam mencari-cari detail tentang ini tetapi tidak menemukan apa pun yang tampaknya benar-benar merupakan solusi langsung. Bagaimana saya bisa mengatur panjang halaman maksimum? Apakah CSS akan menawarkan ini? Saya melihat solusi menempatkan CSS di tag <head> tetapi dengan aplikasi Vue tag kepala ini tidak digunakan dengan cara yang sama seperti halaman HTML biasa.

EDIT: karena menurut saya tidak jelas bahwa karena saya bekerja di vue/vuetify, solusinya mungkin berbeda dari kasus umum, saya pikir yang terbaik adalah jika saya memberikan App.vue saya dan halaman contoh.

--- App.vue ---


<template>
  <v-app>
    <app-toolbar></app-toolbar>
    <router-view></router-view>
    <app-footer></app-footer>
  </v-app>
</template>

<script>
import AppToolbar from "./components/AppToolbar.vue";
import AppFooter from "./components/AppFooter.vue";

export default {
  name: "App",

  components: {
    AppToolbar,
    AppFooter
  },

  data: () => ({
    //
  })
};
</script>
<style scoped></style>

--- Beranda.vue ---

<template>
  <div>
    <v-app>
      <v-responsive aspect-ratio="16/9">
        <v-carousel cycle hide-delimiter-background show-arrows-on-hover>
          <v-carousel-item
            v-for="(item, i) in items"
            :key="i"
            :src="item.src"
            reverse-transition="fade-transition"
            transition="fade-transition"
          ></v-carousel-item>
        </v-carousel>
      </v-responsive>
    </v-app>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
        },
        {
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
        }
      ]
    };
  }
};
</script>

<style></style>

EDIT 2: Menambahkan app-toolbar & app-footer

--- Bilah Alat.vue ---

  <template>
  <div>
    <v-toolbar dense color="#3F51B5" dark>
      <v-app-bar-nav-icon
        color="#76ff03"
        @click.stop="drawer = !drawer"
      ></v-app-bar-nav-icon>

      <v-btn to="/" color="#76ff03" text>Vuetification</v-btn>

      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-row align="center" justify="center">
        <v-badge bordered color="error" icon="mdi-lock" overlap>
          <v-btn class="white--text" color="error" depressed>
            Lock Account
          </v-btn>
        </v-badge>

        <div class="mx-3"></div>

        <v-badge
          bordered
          bottom
          color="deep-purple accent-4"
          dot
          offset-x="10"
          offset-y="10"
        >
          <v-avatar size="40">
            <v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
          </v-avatar>
        </v-badge>

        <div class="mx-3"></div>

        <v-badge avatar bordered overlap>
          <template v-slot:badge>
            <v-avatar>
              <v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
            </v-avatar>
          </template>

          <v-avatar size="40">
            <v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
          </v-avatar>
        </v-badge>
      </v-row>
      <div class="hidden-sm-and-down">
        <v-btn icon>
          <v-icon color="#76ff03">mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon color="#76ff03">mdi-heart</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon color="#76ff03">mdi-dots-vertical</v-icon>
        </v-btn>
        <v-btn color="#76ff03" text>About</v-btn>
        <v-btn to="/contact" color="#76ff03" text>Contact</v-btn>
        <v-btn to="/login" color="#76ff03" text>Login</v-btn>
      </div>
    </v-toolbar>

    <v-navigation-drawer
      v-model="drawer"
      expand-on-hover
      app
      temporary
      right
      height="160px"
    >
      <v-list-item>
        <v-list-item-avatar>
          <v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>John Leider</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-divider></v-divider>

      <v-list dense>
        <v-list-item v-for="item in items" :key="item.title" link>
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>

          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawer: false,
      items: [
        { title: "Home", icon: "mdi-ghost" },
        { title: "About", icon: "mdi-kabaddi" }
      ]
    };
  }
};
</script>
<style scoped>
.toolbar-item {
  color: #76ff03;
}
</style>

--- Footer.vue ---

plate>
  <v-app>
    <v-footer dark padless fixed>
      <v-card class="flex" text tile>
        <v-card-title class="teal">
          <strong class="subheading"
            >Get connected with us on social networks!</strong
          >

          <v-spacer></v-spacer>

          <v-btn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
            <v-icon color="#76ff03" size="24px">{{ icon }}</v-icon>
          </v-btn>
        </v-card-title>

        <v-card-text class="text-center">
          <v-layout>
            <v-flex class="toolbar-item" v-for="(col, i) in rows" :key="i" xs3>
              <span class="body-2" v-text="col.title.toUpperCase()" />
              <div v-for="(child, i) in col.children" :key="i" v-text="child" />
            </v-flex>
            <v-flex class="toolbar-item" xd3 layout column>
              <span class="body-2">CONTACT</span>
              <div>
                <v-icon color="#76ff03" size="18px" class="mr-3"
                  >fa-home</v-icon
                >
                New York, NY 10012, US
              </div>
              <div>
                <v-icon color="#76ff03" size="18px" class="mr-3"
                  >fa-envelope</v-icon
                >
                info@example.com
              </div>
              <div>
                <v-icon color="#76ff03" size="18px" class="mr-3"
                  >fa-phone</v-icon
                >
                + 01 234 567 89
              </div>
              <div>
                <v-icon color="#76ff03" size="18px" class="mr-3"
                  >fa-print</v-icon
                >
                + 98 765 432 10
              </div>
            </v-flex>
          </v-layout>
          <strong> {{ new Date().getFullYear() }} — Vuetify </strong>
        </v-card-text>
      </v-card>
    </v-footer>
  </v-app>
</template>
<script>
export default {
  data: () => ({
    icons: [
      "fab fa-facebook",
      "fab fa-twitter",
      "fab fa-google-plus",
      "fab fa-linkedin",
      "fab fa-instagram"
    ],
    rows: [
      {
        title: "Company Name",
        children: [
          "Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit"
        ]
      },
      {
        title: "Produts",
        children: [
          "MDBootstrap",
          "MDWordPress",
          "BrandFlow",
          "BootstrapAngular"
        ]
      },
      {
        title: "Useful Links",
        children: [
          "Your account",
          "Become an Affiliate",
          "Shipping Rates",
          "Helper"
        ]
      }
    ]
  })
};
</script>
<style scoped>
strong {
  color: #76ff03;
}
.toolbar-item {
  color: #76ff03;
}
</style

>

2
a_here_and_now 20 Januari 2020, 19:25

2 jawaban

Jawaban Terbaik

Secara default, jika konten HTML lebih besar dari jendela, browser akan membuat scrollbar dan jika lebih kecil dari jendela tidak akan ada scroll. Namun, saya tidak berpikir ini adalah apa yang Anda benar-benar minta. Saya pikir Anda mencoba mengubah ukuran jendela itu sendiri.


Saya akan mulai dengan mengatakan praktik yang sangat buruk untuk mengubah ukuran jendela browser pengguna. Anda harus bekerja untuk membuat konten Anda pas.

Karena itu, karena Vue.js dan Vuetify dibangun di atas Javascript, dan Anda harus menulis beberapa JS khusus untuk mengubah ukuran jendela browser. Default overflow pada tag <body> (ya yang ada di aplikasi Vue) akan menangani pengguliran...

window.resizeTo(width, height);

Harus dipanggil setelah Vue merender konten ke layar, jadi di dalam kait Siklus Hidup yang Dipasang.

Sekarang, saya berasumsi ketinggian konten berubah sehingga Anda ingin mengambil ketinggian div Vue app.

var newHeight = document.getElementById('app').innerHeight()

Anda juga ingin mendapatkan ukuran layar sehingga Anda tidak membuat jendela lebih besar dari layar. Anda bisa mendapatkan ketinggian itu dari objek screen.

var screenHeight = window.screen.height

Begitu

if(newHeight < screenHeight){
   window.resizeTo('800px', newHeight);
} else {
   window.resizeTo('800px', screenHeight);
}

Sebelum Anda melakukan ini

Anda harus tahu bahwa sebagian besar browser modern BLOKIR fungsi window.resizeTo() jadi sekali lagi Anda harus menemukan solusi yang berbeda untuk masalah tersebut.

1
Community 20 Juni 2020, 09:12

Anda Dapat menyarangkan konten Anda di dalam elemen div lain. Jika tinggi maksimum div dalam Anda sama dengan tinggi wadahnya, bilah gulir tidak akan pernah muncul. jika Anda ingin melihat bilah gulir gunakan ini.

.scrollDiv {
    height:auto;
    max-height:150%;
    overflow:auto;   
}
0
nhab 20 Januari 2020, 16:31