Question

我正在尝试在我的项目中实施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>

这是笔记本电脑屏幕上的样子

这是手机屏幕上的样子

如何更改代码以使其具有响应性

PS：我还尝试了缩小屏幕尺寸，同时以缩小的屏幕尺寸查看here。即使这样显示

即使官方文档存在此问题？我如何使其具有响应能力。

谢谢！

Answer 1

您不必在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>

v工具栏行为不灵敏

1 个答案: