({ el: '#app', data: { layout: testLayout, }, }); html <grid-layout :i="item.i" :key="item.i"> {{item.i}} </grid-item> </grid-layout
八、用户配置界面用户配置界面是通过用户拖拽生成的,大小等是通过grid网格布局的形式,让用户随意拖动摆放 <grid-layout :layout.sync="layout layoutItem" @click.native="handleClick(item, index)" > </grid-layout
/* 公共网格布局样式 */ .grid-layout { display: grid; grid-template-columns: 1fr 3fr; } /* 公共内容样式 */ .grid-content { font-size: 0.8rem; } /* .comment 样式 */ .comment { @extend .grid-layout; } .comment img { border grey; } .comment .content { @extend .grid-content; } /* .list-item 样式 */ .list-item { @extend .grid-layout
浏览器兼容性测试使用 BrowserStack 多平台测试.grid-layout { display: grid; /* Fallback for IE */ display: -ms-grid
// 如下代码来自ant-simple-pro import { GridLayout, GridItem } from '@/components/grid-layout' <GridLayout
-- components/GridLayout.vue --><template>
Grid是一个趋势,grid-layout不是为了取代flex-layout,它是flex的补充。grid擅长二维布局,flex擅长一维布局。他们需要各司其职。 flex grid-layout ?
.grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: