求大佬指教一下Vue的问题

wws741 发表于 2021-11-24 23:04

怎么让这vuetify的card组件，一个页面两行三列分页显示数据，琢磨不明白哎，感谢

liuzhenhang 发表于 2021-11-24 23:13

这个东西不是css控制的嘛

gorkys 发表于 2021-11-25 00:41

用flex就可以了

baidu399 发表于 2021-11-25 01:27

分页做啥

wuaipojjielt312 发表于 2021-11-25 08:28

css布局呀

我今天是大佬 发表于 2021-11-25 09:08

css控制啊

黄hsir 发表于 2021-11-25 09:33

给你写了个小demo, 官网都有api案例,调整data对象里面的flex属性就行
ps:第一次看到这个框架,感觉还挺好看的

<!DOCTYPE html>
<html>
<head>
<linkrel="stylesheet">
<linkrel="stylesheet">
<linkrel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
   <v-main>
   <v-container>
         <template>
            <v-card
               class="mx-auto"
               max-width="500"
            >
               <v-container fluid>
               <v-row dense>
                  <v-col
                     v-for="card in cards"
                     :key="card.title"
                     :cols="card.flex"
                  >
                     <v-card>
                     <v-img
                        :src="card.src"
                        class="white--text align-end"
                        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                        height="200px"
                     >
                        <v-card-title v-text="card.title"></v-card-title>
                     </v-img>

                     <v-card-actions>
                        <v-spacer></v-spacer>

                        <v-btn icon>
                           <v-icon>mdi-heart</v-icon>
                        </v-btn>

                        <v-btn icon>
                           <v-icon>mdi-bookmark</v-icon>
                        </v-btn>

                        <v-btn icon>
                           <v-icon>mdi-share-variant</v-icon>
                        </v-btn>
                     </v-card-actions>
                     </v-card>
                  </v-col>
               </v-row>
               </v-container>
            </v-card>
         </template>
   </v-container>
   </v-main>
</v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
   el: '#app',
   vuetify: new Vuetify(),
   data: () => ({
   cards: [
         { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
         { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
         { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
         { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
         { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
         { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
   ],
}),
})
</script>
</body>
</html>

黄hsir 发表于 2021-11-25 09:36

回复被吞了,直接复制官网的案例,然后调整data里面card的flex属性就行了,这个框架是12格所以三列两行就把flex设置为4就行了
   data: () => ({
   cards: [
         { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
         { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
         { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
         { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 4 },
         { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 4 },
         { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 4 },
   ],

HappyCrazy 发表于 2021-11-25 09:39

这东西和vue没关系，看看css样式就行了比如display：fiex
又或者<el-row>
<el-col :span="8">内容</el-col>
<el-col :span="8">内容</el-col>
<el-col :span="8">内容</el-col>
</el-row>

52P 发表于 2021-11-25 09:42

本帖最后由 52P 于 2021-11-25 09:49 编辑

可以用Grid system（网格系统）试试,这个组件本身也支持栅格

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

求大佬指教一下Vue的问题