V-панель инструментов не ведет себя отзывчиво - PullRequest
Новая
       15

V-панель инструментов не ведет себя отзывчиво

0 голосов
/ 14 июня 2019

Я пытаюсь реализовать vuetify в моем проекте. Я новичок в VueJs и тоже vuetify.

Я пытаюсь использовать панель инструментов, которая содержит округленное изображение в правом углу. Но, это не отзывчиво. Когда я открою опцию разработчика и уменьшу размер экрана до мобильного. Округленное изображение не отображается.

Я пытался использовать простые теги, но это на самом деле нарушает макет.

Вот код VuetifyTest.vue: 

<template lang="html">
    <v-toolbar>
        <v-toolbar-side-icon>
            <!-- <v-img src="../assets/mad_logo.png" aspect-ratio="1.7"></v-img> -->
        </v-toolbar-side-icon>
        <v-toolbar-title>Title</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">       
        <v-layout
            align-center
            justify-space-around
            wrap
        >
            <v-avatar
            :tile= false 
            size="36"
            color="grey lighten-4"
            >
            <img src="../assets/static.jpeg" alt="avatar">
            </v-avatar>
        </v-layout>
        </v-toolbar-items>
    </v-toolbar>


</template>

<script lang="js">
  export default  {
    name: 'VuetifyTest',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped >

</style>

Вот так это выглядит на экране ноутбука

enter image description here

Вот так это выглядит на экране мобильного телефона

enter image description here

Как изменить код, чтобы он стал отзывчивым

PS: я также пытался уменьшить размер экрана при просмотре здесь в уменьшенном размере экрана. Хотя это показало, как это .. enter image description here

Даже если в официальной документации есть эта проблема? Как мне сделать его отзывчивым ..

спасибо!

1 Ответ

1 голос
/ 14 июня 2019

Вам не нужно указывать v-layout в пределах v-toolbar - если вы удалите v-layout и замените его просто на v-avatar, это работает .. Примеры ниже:

[CodePen Mirror]

Отрывок: 

new Vue({ el: "#app" })
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-toolbar>
      <v-toolbar-side-icon>
      </v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-avatar :tile=false size="36" color="grey lighten-4">
        <img src="https://i.pravatar.cc/300?img=3" alt="avatar">
      </v-avatar>
    </v-toolbar>
  </v-app>
</div>
...