第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

使用 Vue 創(chuàng)建靜態(tài)左側(cè)導(dǎo)航欄組件

使用 Vue 創(chuàng)建靜態(tài)左側(cè)導(dǎo)航欄組件

蠱毒傳說(shuō) 2023-07-06 15:15:16
我需要在應(yīng)用程序布局的左側(cè)放置一個(gè)垂直導(dǎo)航欄,并將內(nèi)容全部放在右側(cè)。就目前情況而言,我不能這樣做。我的導(dǎo)航欄將所有內(nèi)容向下推。我怎樣才能解決這個(gè)問(wèn)題?這就是我的App.vue's模板的樣子:<template>? ? <div id="app">? ? ? ? <v-app>? ? ? ? ? ? <navbar/>? ? ? ? ? ? <v-main>? ? ? ? ? ? ? ? <v-container class="main-container">? ? ? ? ? ? ? ? ? ? <router-view/>? ? ? ? ? ? ? ? </v-container>? ? ? ? ? ? </v-main>? ? ? ? </v-app>? ? </div></template>對(duì)于navbar我正在使用 vuetify 的組件,特別是迷你導(dǎo)航欄?根據(jù)示例代碼,它當(dāng)前的樣子如下:<template>? ? <v-navigation-drawer? ? ? ? v-model="drawer"? ? ? ? :mini-variant.sync="mini"? ? ? ? permanent? ? >? ? ? ? <v-list-item class="px-2">? ? ? ? ? ? <v-list-item-avatar>? ? ? ? ? ? ? ? <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>? ? ? ? ? ? </v-list-item-avatar>? ? ? ? ? ? <v-list-item-title>John Leider</v-list-item-title>? ? ? ? ? ? <v-btn? ? ? ? ? ? ? ? icon? ? ? ? ? ? ? ? @click.stop="mini = !mini"? ? ? ? ? ? >? ? ? ? ? ? ? ? <v-icon>mdi-chevron-left</v-icon>? ? ? ? ? ? </v-btn>? ? ? ? </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></template><script>import { Component, Prop, Vue } from 'vue-property-decorator';@Component<Navbar>({})export default class Navbar extends Vue {? ? private value: string = 'home';? ? private drawer: boolean = true;? ? private items: Array<Object> = [? ? ? ? { title: 'Home', icon: 'mdi-home-city' },? ? ? ? { title: 'My Account', icon: 'mdi-account' },? ? ? ? { title: 'Users', icon: 'mdi-account-group-outline' }? ? ]? ? private mini: boolean = true;}</script>正如上面提到的,這仍然只是將應(yīng)用程序的所有內(nèi)容向下推。這是目前的樣子:我該怎么做才能使導(dǎo)航欄在左側(cè)但在右側(cè)
查看完整描述

2 回答

?
江戶(hù)川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊

將導(dǎo)航欄和主要內(nèi)容包裝在<v-row>:


<template>

  <div id="app">

    <v-app>

      <v-row>

        <navbar/>

        <v-main>

          <v-container class="main-container">

            <router-view/>

          </v-container>

        </v-main>

      </v-row>

    </v-app>

  </div>

</template>

默認(rèn)情況下,v-app有一個(gè)帶有flex-direction: columnCSS 的內(nèi)部包裝器,這意味著它的子元素是垂直放置的。通過(guò)將這兩個(gè)子元素包裝在 a 中v-row,您可以將它們放置在帶有 的包裝元素中flex-direction: row。


查看完整回答
反對(duì) 回復(fù) 2023-07-06
?
躍然一笑

TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊

我猜你誤解了這些概念。您正在將 a 包裝在組件v-navigation-drawer內(nèi)navbar。

Vuetify?v-navigation-drawer中,有一個(gè)用于構(gòu)建側(cè)邊欄的組件,這就是您的組件處于垂直方向的原因。

編輯1

app您可以使用組件內(nèi)的選項(xiàng)配置應(yīng)用程序側(cè)邊欄或應(yīng)用程序?qū)Ш綑?,如下所示?/p>

? <v-navigation-drawer

? ? app

? >

? ...

? </v-navigation-drawer>

就像官方文檔中一樣。如果你這樣做,該組件將正常工作,并且你的內(nèi)容將不會(huì)被下推。


查看完整回答
反對(duì) 回復(fù) 2023-07-06
  • 2 回答
  • 0 關(guān)注
  • 366 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)