如何解决Vuetify用户配置文件的自定义组件
我想构建一个看起来像LinkedIn用户个人资料的自定义个人资料组件。如您所见,有一个Card元素,然后头像照片覆盖了它。如何构建这样的组件?我是Vuejs / Vuetify的新手。我在网上寻找了一些示例,但找不到任何能说明我需要的内容。
感谢您的代码段或建议。
解决方法
从他们的文档中,我仅以this为例并对其进行了修改,但是您可能需要添加不同的样式类,因为我无法使其响应。
<template>
<v-card class="mx-auto" max-width="434" tile>
<v-img height="100%" src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"></v-img>
<v-col>
<v-avatar size="100" style="position:absolute; top: 130px">
<v-img src="https://cdn.vuetifyjs.com/images/profiles/marcus.jpg"></v-img>
</v-avatar>
</v-col>
<v-list-item color="rgba(0,.4)">
<v-list-item-content>
<v-list-item-title class="title">Marcus Obrien</v-list-item-title>
<v-list-item-subtitle>Network Engineer</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-card>
</template>
,
我刚刚尝试过。我想你可以做更多的连击。 Preview Image
<template>
<v-card class="mx-auto" max-width="1000" tile>
<v-img height="200" src="https://cdn.vuetifyjs.com/images/cards/server-room.jpg"></v-img>
<v-row style="margin:2.5%;position:absolute; top: 130px">
<v-list-item>
<v-list-item-avatar size="100">
<img
src="https://www.w3schools.com/howto/img_avatar.png"
alt="John"
>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="title" style="margin-top:20px;">Injamamul Haque Sonet</v-list-item-title>
<v-list-item-subtitle>Software Engineer | dokanee</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-row>
</v-card>
</template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。