demo 原始链接:https://vux.li/demos/v2/#/component/grid
\n下面的$t是Demo的i18n使用的翻译函数,一般情况下可以直接使用字符串。另外,下面代码隐藏了i18n标签部分的代码。
\n<template>\n <div>\n <group-title>2 columns</group-title>\n <grid>\n <grid-item :label=\"$t('Grid')\" v-for=\"i in 2\" :key=\"i\">\n <img slot=\"icon\" src=\"../assets/grid_icon.png\">\n </grid-item>\n </grid>\n <group-title>3 columns</group-title>\n <grid :show-lr-borders=\"false\" :show-vertical-dividers=\"false\">\n <grid-item link=\"/component/cell\" :label=\"$t('Go to Cell')\">\n <img slot=\"icon\" src=\"../assets/grid_icon.png\">\n </grid-item>\n <grid-item :link=\"{ path: '/component/cell'}\" :label=\"$t('Go to Cell')\">\n <img slot=\"icon\" src=\"../assets/grid_icon.png\">\n </grid-item>\n <grid-item link=\"/component/cell\" @on-item-click=\"onItemClick\">\n <img slot=\"icon\" src=\"../assets/grid_icon.png\">\n <span slot=\"label\">{{ $t('Go to Cell') }}</span>\n </grid-item>\n </grid>\n <group-title>4 columns</group-title>\n <grid :show-lr-borders=\"false\">\n <grid-item :label=\"$t('Grid')\" v-for=\"i in 4\" :key=\"i\">\n <img slot=\"icon\" src=\"../assets/grid_icon.png\">\n </grid-item>\n </grid>\n <group-title> {{ $t('Custom content') }} </group-title>\n <grid :show-vertical-dividers=\"false\">\n <grid-item v-for=\"i in 5\" :key=\"i\">\n <span class=\"grid-center\">{{i}}</span>\n </grid-item>\n </grid>\n <group-title> {{ $t('Custom col') }} </group-title>\n <grid :cols=\"3\" :show-lr-borders=\"false\">\n <grid-item v-for=\"i in 6\" :key=\"i\">\n <span class=\"grid-center\">{{i}}</span>\n </grid-item>\n </grid>\n </div>\n</template>\n\n\n\n<script>\nimport { Grid, GridItem, GroupTitle } from 'vux'\n\nexport default {\n components: {\n Grid,\n GridItem,\n GroupTitle\n },\n methods: {\n onItemClick () {\n console.log('on item click')\n }\n }\n}\n</script>\n\n<style scoped>\n.grid-center {\n display: block;\n text-align: center;\n color: #666;\n}\n</style>\n\n
\n