docs: prettier all markdown files
This commit is contained in:
+23
-27
@@ -14,11 +14,7 @@ Vue.use(Image);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-image
|
||||
width="100"
|
||||
height="100"
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
/>
|
||||
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
||||
```
|
||||
|
||||
### Fit Mode
|
||||
@@ -68,24 +64,24 @@ Vue.use(Lazyload);
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| src | Src | *string* | - |
|
||||
| fit | Fit mode | *string* | `fill` |
|
||||
| alt | Alt | *string* | - |
|
||||
| width | Width | *number \| string* | - |
|
||||
| height | Height | *number \| string* | - |
|
||||
| radius `v2.1.6` | Border Radius | *number \| string* | `0` |
|
||||
| round | Whether to be round | *boolean* | `false` |
|
||||
| lazy-load | Whether to enable lazy load,should register [Lazyload](#/en-US/lazyload) component | *boolean* | `false` |
|
||||
| show-error `v2.0.9` | Whether to show error placeholder | *boolean* | `true` |
|
||||
| show-loading `v2.0.9` | Whether to show loading placeholder | *boolean* | `true` |
|
||||
| error-icon `v2.4.2` | Error icon | *string* | `warning-o` |
|
||||
| loading-icon `v2.4.2` | Loading icon | *string* | `photo-o` |
|
||||
| --- | --- | --- | --- |
|
||||
| src | Src | _string_ | - |
|
||||
| fit | Fit mode | _string_ | `fill` |
|
||||
| alt | Alt | _string_ | - |
|
||||
| width | Width | _number \| string_ | - |
|
||||
| height | Height | _number \| string_ | - |
|
||||
| radius `v2.1.6` | Border Radius | _number \| string_ | `0` |
|
||||
| round | Whether to be round | _boolean_ | `false` |
|
||||
| lazy-load | Whether to enable lazy load,should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
|
||||
| show-error `v2.0.9` | Whether to show error placeholder | _boolean_ | `true` |
|
||||
| show-loading `v2.0.9` | Whether to show loading placeholder | _boolean_ | `true` |
|
||||
| error-icon `v2.4.2` | Error icon | _string_ | `warning-o` |
|
||||
| loading-icon `v2.4.2` | Loading icon | _string_ | `photo-o` |
|
||||
|
||||
### fit optional value
|
||||
|
||||
| name | desctription |
|
||||
|------|------|
|
||||
| --- | --- |
|
||||
| contain | Keep aspect ratio, fully display the long side of the image |
|
||||
| cover | Keep aspect ratio, fully display the short side of the image, cutting the long side |
|
||||
| fill | Stretch and resize image to fill the content box |
|
||||
@@ -94,15 +90,15 @@ Vue.use(Lazyload);
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click image | *event: Event* |
|
||||
| load | Triggered when image loaded | - |
|
||||
| error | Triggered when image load failed | - |
|
||||
| Event | Description | Arguments |
|
||||
| ----- | -------------------------------- | -------------- |
|
||||
| click | Triggered when click image | _event: Event_ |
|
||||
| load | Triggered when image loaded | - |
|
||||
| error | Triggered when image load failed | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| Name | Description |
|
||||
| ------- | -------------------------- |
|
||||
| loading | Custom loading placeholder |
|
||||
| error | Custom error placeholder |
|
||||
| error | Custom error placeholder |
|
||||
|
||||
+31
-35
@@ -20,11 +20,7 @@ Vue.use(Image);
|
||||
基础用法与原生`img`标签一致,可以设置`src`、`width`、`height`、`alt`等原生属性
|
||||
|
||||
```html
|
||||
<van-image
|
||||
width="100"
|
||||
height="100"
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
/>
|
||||
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
||||
```
|
||||
|
||||
### 填充模式
|
||||
@@ -100,44 +96,44 @@ Vue.use(Lazyload);
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| src | 图片链接 | *string* | - |
|
||||
| fit | 图片填充模式 | *string* | `fill` |
|
||||
| alt | 替代文本 | *string* | - |
|
||||
| width | 宽度,默认单位为`px` | *number \| string* | - |
|
||||
| height | 高度,默认单位为`px` | *number \| string* | - |
|
||||
| radius `v2.1.6` | 圆角大小,默认单位为`px` | *number \| string* | `0` |
|
||||
| round | 是否显示为圆形 | *boolean* | `false` |
|
||||
| lazy-load | 是否开启图片懒加载,须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | *boolean* | `false` |
|
||||
| show-error `v2.0.9` | 是否展示图片加载失败提示 | *boolean* | `true` |
|
||||
| show-loading `v2.0.9` | 是否展示图片加载中提示 | *boolean* | `true` |
|
||||
| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | *string* | `warning-o` |
|
||||
| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | *string* | `photo-o` |
|
||||
| --- | --- | --- | --- |
|
||||
| src | 图片链接 | _string_ | - |
|
||||
| fit | 图片填充模式 | _string_ | `fill` |
|
||||
| alt | 替代文本 | _string_ | - |
|
||||
| width | 宽度,默认单位为`px` | _number \| string_ | - |
|
||||
| height | 高度,默认单位为`px` | _number \| string_ | - |
|
||||
| radius `v2.1.6` | 圆角大小,默认单位为`px` | _number \| string_ | `0` |
|
||||
| round | 是否显示为圆形 | _boolean_ | `false` |
|
||||
| lazy-load | 是否开启图片懒加载,须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
|
||||
| show-error `v2.0.9` | 是否展示图片加载失败提示 | _boolean_ | `true` |
|
||||
| show-loading `v2.0.9` | 是否展示图片加载中提示 | _boolean_ | `true` |
|
||||
| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `warning-o` |
|
||||
| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-o` |
|
||||
|
||||
### 图片填充模式
|
||||
### 图片填充模式
|
||||
|
||||
| 名称 | 含义 |
|
||||
|------|------|
|
||||
| contain | 保持宽高缩放图片,使图片的长边能完全显示出来 |
|
||||
| cover | 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边 |
|
||||
| fill | 拉伸图片,使图片填满元素 |
|
||||
| none | 保持图片原有尺寸 |
|
||||
| scale-down | 取`none`或`contain`中较小的一个 |
|
||||
| 名称 | 含义 |
|
||||
| ---------- | ------------------------------------------------------ |
|
||||
| contain | 保持宽高缩放图片,使图片的长边能完全显示出来 |
|
||||
| cover | 保持宽高缩放图片,使图片的短边能完全显示出来,裁剪长边 |
|
||||
| fill | 拉伸图片,使图片填满元素 |
|
||||
| none | 保持图片原有尺寸 |
|
||||
| scale-down | 取`none`或`contain`中较小的一个 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击图片时触发 | *event: Event* |
|
||||
| load | 图片加载完毕时触发 | - |
|
||||
| error | 图片加载失败时触发 | - |
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ------------------ | -------------- |
|
||||
| click | 点击图片时触发 | _event: Event_ |
|
||||
| load | 图片加载完毕时触发 | - |
|
||||
| error | 图片加载失败时触发 | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| loading | 自定义加载中的提示内容 |
|
||||
| error | 自定义加载失败时的提示内容 |
|
||||
| 名称 | 说明 |
|
||||
| ------- | -------------------------- |
|
||||
| loading | 自定义加载中的提示内容 |
|
||||
| error | 自定义加载失败时的提示内容 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
Reference in New Issue
Block a user