Merge branch 'dev' into next

This commit is contained in:
chenjiahan
2020-09-28 11:46:26 +08:00
72 changed files with 259 additions and 243 deletions
+9 -9
View File
@@ -2,7 +2,7 @@
### 介绍
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航
### 引入
@@ -19,7 +19,7 @@ app.use(GridItem);
### 基础用法
通过`icon`属性设置格子内的图标,`text`属性设置文字内容
通过 `icon` 属性设置格子内的图标,`text` 属性设置文字内容
```html
<van-grid>
@@ -32,7 +32,7 @@ app.use(GridItem);
### 自定义列数
默认一行展示四个格子,可以通过`column-num`自定义列数
默认一行展示四个格子,可以通过 `column-num` 自定义列数
```html
<van-grid :column-num="3">
@@ -42,7 +42,7 @@ app.use(GridItem);
### 自定义内容
通过插槽可以自定义格子展示的内容
通过插槽可以自定义格子展示的内容
```html
<van-grid :border="false" :column-num="3">
@@ -60,7 +60,7 @@ app.use(GridItem);
### 正方形格子
设置`square`属性后,格子的高度会和宽度保持一致
设置 `square` 属性后,格子的高度会和宽度保持一致
```html
<van-grid square>
@@ -70,7 +70,7 @@ app.use(GridItem);
### 格子间距
通过`gutter`属性设置格子之间的距离
通过 `gutter` 属性设置格子之间的距离
```html
<van-grid :gutter="10">
@@ -80,7 +80,7 @@ app.use(GridItem);
### 内容横排
`direction`属性设置为`horizontal`,可以让宫格的内容呈横向排列
`direction` 属性设置为 `horizontal`,可以让宫格的内容呈横向排列
```html
<van-grid direction="horizontal" :column-num="2">
@@ -92,7 +92,7 @@ app.use(GridItem);
### 页面导航
通过`to`属性设置`vue-router`跳转链接,通过`url`属性设置 URL 跳转链接
通过 `to` 属性设置 `vue-router` 跳转链接,通过 `url` 属性设置 URL 跳转链接
```html
<van-grid clickable :column-num="2">
@@ -103,7 +103,7 @@ app.use(GridItem);
### 徽标提示
设置`dot`属性后,会在图标右上角展示一个小红点。设置`badge`属性后,会在图标右上角展示相应的徽标
设置 `dot` 属性后,会在图标右上角展示一个小红点。设置 `badge` 属性后,会在图标右上角展示相应的徽标
```html
<van-grid :column-num="2">