vuetify组件示例demo集合代码-html代码-BFW代码库

vuetify组件示例demo集合代码

代码语言：html

代码描述：vuetify组件示例demo集合代码

代码标签： demo 集合

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetify.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <style>
        .v-card--reveal {
            align-items: center;
            bottom: 0;
            justify-content: center;
            opacity: .5;
            position: absolute;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <v-app id="inspire">
            <v-data-table
                :headers="headers"
                :items="desserts"
                :items-per-page="5"
                class="elevation-1"
                ></v-data-table>
            <v-parallax
                height="300"
                src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
                ></v-parallax>
            <v-sheet
                height="400"
                class="overflow-hidden"
                style="position: relative;"
                >
                <v-container class="fill-height">
                    <v-row
                        align="center"
                        justify="center"
                        >
                        <v-btn
                            color="pink"
                            dark
                            @click.stop="drawer = !drawer"
                            >
                            Toggle
                        </v-btn>
                    </v-row>
                </v-container>

                <v-navigation-drawer
                    v-model="drawer"
                    absolute
                    temporary
                    >
                    <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 items5"
                            :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>
            </v-sheet>
            <v-row
                class="d-flex"
                justify="center"
                >
                <v-menu
                    v-model="showMenu"
                    absolute
                    offset-y
                    style="max-width: 600px"
                    >
                    <template v-slot:activator="{ on, attrs }">
                        <v-card
                            class="portrait"
                            img="https://cdn.vuetifyjs.com/images/cards/girl.jpg"
                            height="300"
                    .........完整代码请登录后点击上方下载按钮下载查看