mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
chore: merge src and src-next
This commit is contained in:
chenjiahan
parent
6672b34618
commit
0304fcb6fa
34
components.js
Normal file
34
components.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
// List of components that have been adapted to Vue 3.0
|
||||||
|
module.exports = [
|
||||||
|
'button',
|
||||||
|
'cell',
|
||||||
|
'icon',
|
||||||
|
'info',
|
||||||
|
'image',
|
||||||
|
'col',
|
||||||
|
'row',
|
||||||
|
'popup',
|
||||||
|
'rate',
|
||||||
|
'slider',
|
||||||
|
'slider-item',
|
||||||
|
'switch',
|
||||||
|
'action-sheet',
|
||||||
|
'loading',
|
||||||
|
'overlay',
|
||||||
|
'swipe-cell',
|
||||||
|
'circle',
|
||||||
|
'count-down',
|
||||||
|
'divider',
|
||||||
|
'empty',
|
||||||
|
'progress',
|
||||||
|
'skeleton',
|
||||||
|
'step',
|
||||||
|
'steps',
|
||||||
|
'tag',
|
||||||
|
'grid',
|
||||||
|
'grid-item',
|
||||||
|
'nav-bar',
|
||||||
|
'pagination',
|
||||||
|
'sidebar',
|
||||||
|
'tree-select',
|
||||||
|
];
|
||||||
@ -1,7 +1,7 @@
|
|||||||
import Locale from '../../src-next/locale';
|
import Locale from '../../src/locale';
|
||||||
import enUS from '../../src-next/locale/lang/en-US';
|
import enUS from '../../src/locale/lang/en-US';
|
||||||
import { get } from '../../src-next/utils';
|
import { get } from '../../src/utils';
|
||||||
import { camelize } from '../../src-next/utils/format/string';
|
import { camelize } from '../../src/utils/format/string';
|
||||||
// import Lazyload from '../../src/lazyload';
|
// import Lazyload from '../../src/lazyload';
|
||||||
|
|
||||||
const { app } = window;
|
const { app } = window;
|
||||||
|
|||||||
@ -7,6 +7,7 @@ import {
|
|||||||
outputFileSync,
|
outputFileSync,
|
||||||
} from 'fs-extra';
|
} from 'fs-extra';
|
||||||
import {
|
import {
|
||||||
|
ROOT,
|
||||||
SRC_DIR,
|
SRC_DIR,
|
||||||
getVantConfig,
|
getVantConfig,
|
||||||
ROOT_WEBPACK_CONFIG_FILE,
|
ROOT_WEBPACK_CONFIG_FILE,
|
||||||
@ -36,10 +37,15 @@ export function hasDefaultExport(code: string) {
|
|||||||
export function getComponents() {
|
export function getComponents() {
|
||||||
const EXCLUDES = ['.DS_Store'];
|
const EXCLUDES = ['.DS_Store'];
|
||||||
const dirs = readdirSync(SRC_DIR);
|
const dirs = readdirSync(SRC_DIR);
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
// whitelist for 3.0 development
|
||||||
|
const whiteList = require(join(ROOT, 'components.js'));
|
||||||
|
|
||||||
return dirs
|
return dirs
|
||||||
.filter(dir => !EXCLUDES.includes(dir))
|
.filter((dir) => !EXCLUDES.includes(dir))
|
||||||
.filter(dir =>
|
.filter((dir) =>
|
||||||
ENTRY_EXTS.some(ext => {
|
ENTRY_EXTS.some((ext) => {
|
||||||
const path = join(SRC_DIR, dir, `index.${ext}`);
|
const path = join(SRC_DIR, dir, `index.${ext}`);
|
||||||
if (existsSync(path)) {
|
if (existsSync(path)) {
|
||||||
return hasDefaultExport(readFileSync(path, 'utf-8'));
|
return hasDefaultExport(readFileSync(path, 'utf-8'));
|
||||||
@ -47,7 +53,8 @@ export function getComponents() {
|
|||||||
|
|
||||||
return false;
|
return false;
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
|
.filter((dir) => whiteList.includes(dir));
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isDir(dir: string) {
|
export function isDir(dir: string) {
|
||||||
|
|||||||
@ -1,191 +0,0 @@
|
|||||||
# ActionSheet
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { ActionSheet } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(ActionSheet);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
Use `actions` prop to set options of action-sheet.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell is-link title="Basic Usage" @click="show = true" />
|
|
||||||
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { Toast } from 'vant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [
|
|
||||||
{ name: 'Option 1' },
|
|
||||||
{ name: 'Option 2' },
|
|
||||||
{ name: 'Option 3' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onSelect(item) {
|
|
||||||
this.show = false;
|
|
||||||
Toast(item.name);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Show Cancel Button
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet
|
|
||||||
v-model="show"
|
|
||||||
:actions="actions"
|
|
||||||
cancel-text="Cancel"
|
|
||||||
close-on-click-action
|
|
||||||
@cancel="onCancel"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { Toast } from 'vant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [
|
|
||||||
{ name: 'Option 1' },
|
|
||||||
{ name: 'Option 2' },
|
|
||||||
{ name: 'Option 3' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onCancel() {
|
|
||||||
Toast('cancel');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Show Description
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet
|
|
||||||
v-model="show"
|
|
||||||
:actions="actions"
|
|
||||||
cancel-text="Cancel"
|
|
||||||
description="Description"
|
|
||||||
close-on-click-action
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [
|
|
||||||
{ name: 'Option 1' },
|
|
||||||
{ name: 'Option 2' },
|
|
||||||
{ name: 'Option 3', subname: 'Description' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Option Status
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet
|
|
||||||
v-model="show"
|
|
||||||
:actions="actions"
|
|
||||||
cancel-text="Cancel"
|
|
||||||
close-on-click-action
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [
|
|
||||||
{ name: 'Colored Option', color: '#07c160' },
|
|
||||||
{ name: 'Disabled Option', disabled: true },
|
|
||||||
{ name: 'Loading Option', loading: true },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Panel
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet v-model="show" title="Title">
|
|
||||||
<div class="content">Content</div>
|
|
||||||
</van-action-sheet>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.content {
|
|
||||||
padding: 16px 16px 160px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| v-model (value) | Whether to show ActionSheet | _boolean_ | `false` |
|
|
||||||
| actions | Options | _Action[]_ | `[]` |
|
|
||||||
| title | Title | _string_ | - |
|
|
||||||
| cancel-text | Text of cancel button | _string_ | - |
|
|
||||||
| description `v2.2.8` | Description above the options | _string_ | - |
|
|
||||||
| close-icon `v2.2.13` | Close icon name | _string_ | `cross` |
|
|
||||||
| duration `v2.0.3` | Transition duration, unit second | _number \| string_ | `0.3` |
|
|
||||||
| round `v2.0.9` | Whether to show round corner | _boolean_ | `true` |
|
|
||||||
| overlay | Whether to show overlay | _boolean_ | `true` |
|
|
||||||
| lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
|
|
||||||
| lazy-render | Whether to lazy render util appeared | _boolean_ | `true` |
|
|
||||||
| close-on-popstate `v2.5.3` | Whether to close when popstate | _boolean_ | `false` |
|
|
||||||
| close-on-click-action | Whether to close when click action | _boolean_ | `false` |
|
|
||||||
| close-on-click-overlay | Whether to close when click overlay | _boolean_ | `true` |
|
|
||||||
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
|
|
||||||
| get-container | Return the mount node for ActionSheet | _string \| () => Element_ | - |
|
|
||||||
|
|
||||||
### Data Structure of Action
|
|
||||||
|
|
||||||
| Key | Description | Type |
|
|
||||||
| --------- | ---------------------------- | --------- |
|
|
||||||
| name | Title | _string_ |
|
|
||||||
| subname | Subtitle | _string_ |
|
|
||||||
| color | Text color | _string_ |
|
|
||||||
| className | className for the option | _any_ |
|
|
||||||
| loading | Whether to be loading status | _boolean_ |
|
|
||||||
| disabled | Whether to be disabled | _boolean_ |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| select | Triggered when click option | _action: Action, index: number_ |
|
|
||||||
| cancel | Triggered when click cancel button | - |
|
|
||||||
| open | Triggered when open ActionSheet | - |
|
|
||||||
| close | Triggered when close ActionSheet | - |
|
|
||||||
| opened | Triggered when opened ActionSheet | - |
|
|
||||||
| closed | Triggered when closed ActionSheet | - |
|
|
||||||
| click-overlay | Triggered when click overlay | - |
|
|
||||||
@ -1,205 +0,0 @@
|
|||||||
# ActionSheet 动作面板
|
|
||||||
|
|
||||||
### 介绍
|
|
||||||
|
|
||||||
底部弹起的模态面板，包含与当前情境相关的多个选项。
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { ActionSheet } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(ActionSheet);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
动作面板通过 `actions` 属性来定义选项，`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档下方表格。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell is-link title="基础用法" @click="show = true" />
|
|
||||||
<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { Toast } from 'vant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onSelect(item) {
|
|
||||||
// 默认情况下点击选项时不会自动收起
|
|
||||||
// 可以通过 close-on-click-action 属性开启自动收起
|
|
||||||
this.show = false;
|
|
||||||
Toast(item.name);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 展示取消按钮
|
|
||||||
|
|
||||||
设置 `cancel-text` 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 `cancel` 事件。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet
|
|
||||||
v-model="show"
|
|
||||||
:actions="actions"
|
|
||||||
cancel-text="取消"
|
|
||||||
close-on-click-action
|
|
||||||
@cancel="onCancel"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { Toast } from 'vant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onCancel() {
|
|
||||||
Toast('取消');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 展示描述信息
|
|
||||||
|
|
||||||
通过 `description` 可以在菜单顶部显示描述信息，通过选项的 `subname` 属性可以在选项文字的右侧展示描述信息。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet
|
|
||||||
v-model="show"
|
|
||||||
:actions="actions"
|
|
||||||
cancel-text="取消"
|
|
||||||
description="这是一段描述信息"
|
|
||||||
close-on-click-action
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [
|
|
||||||
{ name: '选项一' },
|
|
||||||
{ name: '选项二' },
|
|
||||||
{ name: '选项三', subname: '描述信息' },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 选项状态
|
|
||||||
|
|
||||||
可以通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，或者通过`color`设置选项的颜色
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet
|
|
||||||
v-model="show"
|
|
||||||
:actions="actions"
|
|
||||||
cancel-text="取消"
|
|
||||||
close-on-click-action
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
actions: [
|
|
||||||
{ name: '着色选项', color: '#07c160' },
|
|
||||||
{ name: '禁用选项', disabled: true },
|
|
||||||
{ name: '加载选项', loading: true },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义面板
|
|
||||||
|
|
||||||
通过插槽可以自定义面板的展示内容，同时可以使用`title`属性展示标题栏
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-action-sheet v-model="show" title="标题">
|
|
||||||
<div class="content">内容</div>
|
|
||||||
</van-action-sheet>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.content {
|
|
||||||
padding: 16px 16px 160px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| v-model (value) | 是否显示动作面板 | _boolean_ | `false` |
|
|
||||||
| actions | 面板选项列表 | _Action[]_ | `[]` |
|
|
||||||
| title | 顶部标题 | _string_ | - |
|
|
||||||
| cancel-text | 取消按钮文字 | _string_ | - |
|
|
||||||
| description `v2.2.8` | 选项上方的描述信息 | _string_ | - |
|
|
||||||
| close-icon `v2.2.13` | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
|
|
||||||
| duration `v2.0.3` | 动画时长，单位秒 | _number \| string_ | `0.3` |
|
|
||||||
| round `v2.0.9` | 是否显示圆角 | _boolean_ | `true` |
|
|
||||||
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
|
|
||||||
| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
|
|
||||||
| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
|
|
||||||
| close-on-popstate `v2.5.3` | 是否在页面回退时自动关闭 | _boolean_ | `false` |
|
|
||||||
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `false` |
|
|
||||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
|
||||||
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
|
|
||||||
| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
|
|
||||||
|
|
||||||
### Action 数据结构
|
|
||||||
|
|
||||||
`actions` 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：
|
|
||||||
|
|
||||||
| 键名 | 说明 | 类型 |
|
|
||||||
| --------- | ------------------------ | --------- |
|
|
||||||
| name | 标题 | _string_ |
|
|
||||||
| subname | 二级标题 | _string_ |
|
|
||||||
| color | 选项文字颜色 | _string_ |
|
|
||||||
| className | 为对应列添加额外的 class | _any_ |
|
|
||||||
| loading | 是否为加载状态 | _boolean_ |
|
|
||||||
| disabled | 是否为禁用状态 | _boolean_ |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| select | 点击选项时触发，禁用或加载状态下不会触发 | _action: Action, index: number_ |
|
|
||||||
| cancel | 点击取消按钮时触发 | - |
|
|
||||||
| open | 打开面板时触发 | - |
|
|
||||||
| close | 关闭面板时触发 | - |
|
|
||||||
| opened | 打开面板且动画结束后触发 | - |
|
|
||||||
| closed | 关闭面板且动画结束后触发 | - |
|
|
||||||
| click-overlay | 点击遮罩层时触发 | - |
|
|
||||||
|
|
||||||
## 常见问题
|
|
||||||
|
|
||||||
### 引入时提示 dependencies not found？
|
|
||||||
|
|
||||||
在 1.x 版本中，动作面板的组件名为`Actionsheet`，从 2.0 版本开始更名为`ActionSheet`，请注意区分。
|
|
||||||
@ -1,154 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block card :title="t('basicUsage')">
|
|
||||||
<van-cell is-link :title="t('basicUsage')" @click="show.basic = true" />
|
|
||||||
<van-cell is-link :title="t('showCancel')" @click="show.cancel = true" />
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
:title="t('showDescription')"
|
|
||||||
@click="show.description = true"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block card :title="t('optionStatus')">
|
|
||||||
<van-cell
|
|
||||||
is-link
|
|
||||||
:title="t('optionStatus')"
|
|
||||||
@click="show.status = true"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block card :title="t('customPanel')">
|
|
||||||
<van-cell is-link :title="t('customPanel')" @click="show.title = true" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<van-action-sheet
|
|
||||||
v-model:show="show.basic"
|
|
||||||
:actions="simpleActions"
|
|
||||||
@select="onSelect"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-action-sheet
|
|
||||||
v-model:show="show.cancel"
|
|
||||||
:actions="simpleActions"
|
|
||||||
close-on-click-action
|
|
||||||
:cancel-text="t('cancel')"
|
|
||||||
@cancel="onCancel"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-action-sheet
|
|
||||||
v-model:show="show.description"
|
|
||||||
:actions="actionsWithDescription"
|
|
||||||
close-on-click-action
|
|
||||||
:cancel-text="t('cancel')"
|
|
||||||
:description="t('description')"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-action-sheet
|
|
||||||
v-model:show="show.status"
|
|
||||||
close-on-click-action
|
|
||||||
:actions="statusActions"
|
|
||||||
:cancel-text="t('cancel')"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-action-sheet v-model:show="show.title" :title="t('title')">
|
|
||||||
<div class="demo-action-sheet-content">{{ t('content') }}</div>
|
|
||||||
</van-action-sheet>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { GREEN } from '../../utils/constant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
option1: '选项一',
|
|
||||||
option2: '选项二',
|
|
||||||
option3: '选项三',
|
|
||||||
subname: '描述信息',
|
|
||||||
showCancel: '展示取消按钮',
|
|
||||||
buttonText: '弹出菜单',
|
|
||||||
customPanel: '自定义面板',
|
|
||||||
description: '这是一段描述信息',
|
|
||||||
optionStatus: '选项状态',
|
|
||||||
coloredOption: '着色选项',
|
|
||||||
disabledOption: '禁用选项',
|
|
||||||
showDescription: '展示描述信息',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
option1: 'Option 1',
|
|
||||||
option2: 'Option 2',
|
|
||||||
option3: 'Option 3',
|
|
||||||
subname: 'Description',
|
|
||||||
showCancel: 'Show Cancel Button',
|
|
||||||
buttonText: 'Show ActionSheet',
|
|
||||||
customPanel: 'Custom Panel',
|
|
||||||
description: 'Description',
|
|
||||||
optionStatus: 'Option Status',
|
|
||||||
coloredOption: 'Colored Option',
|
|
||||||
disabledOption: 'Disabled Option',
|
|
||||||
showDescription: 'Show Description',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: {
|
|
||||||
basic: false,
|
|
||||||
cancel: false,
|
|
||||||
title: false,
|
|
||||||
status: false,
|
|
||||||
description: false,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
simpleActions() {
|
|
||||||
return [
|
|
||||||
{ name: this.t('option1') },
|
|
||||||
{ name: this.t('option2') },
|
|
||||||
{ name: this.t('option3') },
|
|
||||||
];
|
|
||||||
},
|
|
||||||
|
|
||||||
actionsWithDescription() {
|
|
||||||
return [
|
|
||||||
{ name: this.t('option1') },
|
|
||||||
{ name: this.t('option2') },
|
|
||||||
{ name: this.t('option3'), subname: this.t('subname') },
|
|
||||||
];
|
|
||||||
},
|
|
||||||
|
|
||||||
statusActions() {
|
|
||||||
return [
|
|
||||||
{ name: this.t('coloredOption'), color: GREEN },
|
|
||||||
{ name: this.t('disabledOption'), disabled: true },
|
|
||||||
{ loading: true },
|
|
||||||
];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onSelect(item) {
|
|
||||||
this.show.basic = false;
|
|
||||||
this.$toast(item.name);
|
|
||||||
},
|
|
||||||
|
|
||||||
onCancel() {
|
|
||||||
this.$toast(this.t('cancel'));
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-action-sheet {
|
|
||||||
&-content {
|
|
||||||
padding: @padding-md @padding-md @padding-md * 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
@import '../style/mixins/hairline';
|
|
||||||
|
|
||||||
.van-action-sheet {
|
|
||||||
max-height: @action-sheet-max-height;
|
|
||||||
color: @action-sheet-item-text-color;
|
|
||||||
|
|
||||||
&__item,
|
|
||||||
&__cancel {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px @padding-md;
|
|
||||||
font-size: @action-sheet-item-font-size;
|
|
||||||
background-color: @action-sheet-item-background;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: @active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__item {
|
|
||||||
line-height: @action-sheet-item-line-height;
|
|
||||||
|
|
||||||
&--loading,
|
|
||||||
&--disabled {
|
|
||||||
color: @action-sheet-item-disabled-text-color;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: @action-sheet-item-background;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--loading {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__subname {
|
|
||||||
margin-top: @padding-xs;
|
|
||||||
color: @action-sheet-subname-color;
|
|
||||||
font-size: @action-sheet-subname-font-size;
|
|
||||||
line-height: @action-sheet-subname-line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__gap {
|
|
||||||
display: block;
|
|
||||||
height: @action-sheet-cancel-padding-top;
|
|
||||||
background-color: @action-sheet-cancel-padding-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
font-weight: @font-weight-bold;
|
|
||||||
font-size: @action-sheet-header-font-size;
|
|
||||||
line-height: @action-sheet-header-height;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__description {
|
|
||||||
position: relative;
|
|
||||||
padding: 20px @padding-md;
|
|
||||||
color: @action-sheet-description-color;
|
|
||||||
font-size: @action-sheet-description-font-size;
|
|
||||||
line-height: @action-sheet-description-line-height;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__close {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: @action-sheet-close-icon-padding;
|
|
||||||
color: @action-sheet-close-icon-color;
|
|
||||||
font-size: @action-sheet-close-icon-size;
|
|
||||||
line-height: inherit;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
color: @action-sheet-close-icon-active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>展示取消按钮</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>展示描述信息</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>选项状态</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>自定义面板</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`callback events 1`] = `
|
|
||||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
|
|
||||||
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
|
||||||
</button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button>
|
|
||||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`close-icon prop 1`] = `
|
|
||||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
|
||||||
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
|
|
||||||
|
|
||||||
exports[`description prop 1`] = `
|
|
||||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
|
||||||
<div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`disable lazy-render 1`] = `
|
|
||||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button>
|
|
||||||
<div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render title and default slot 1`] = `
|
|
||||||
<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
|
|
||||||
<div class="van-action-sheet__header">Title<i class="van-icon van-icon-cross van-action-sheet__close">
|
|
||||||
<!----></i></div>
|
|
||||||
<div class="van-action-sheet__content">Default</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button></div>`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,186 +0,0 @@
|
|||||||
import { mount, later } from '../../../test';
|
|
||||||
import ActionSheet from '..';
|
|
||||||
|
|
||||||
test('callback events', () => {
|
|
||||||
const callback = jest.fn();
|
|
||||||
const onInput = jest.fn();
|
|
||||||
const onCancel = jest.fn();
|
|
||||||
const onSelect = jest.fn();
|
|
||||||
|
|
||||||
const actions = [
|
|
||||||
{ name: 'Option', callback },
|
|
||||||
{ name: 'Option', disabled: true },
|
|
||||||
{ name: 'Option', loading: true },
|
|
||||||
{ name: 'Option', subname: 'Subname' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
actions,
|
|
||||||
cancelText: 'Cancel',
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
input: onInput,
|
|
||||||
cancel: onCancel,
|
|
||||||
select: onSelect,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const options = wrapper.findAll('.van-action-sheet__item');
|
|
||||||
options.at(0).trigger('click');
|
|
||||||
options.at(1).trigger('click');
|
|
||||||
wrapper.find('.van-action-sheet__cancel').trigger('click');
|
|
||||||
|
|
||||||
expect(callback).toHaveBeenCalled();
|
|
||||||
expect(onCancel).toHaveBeenCalled();
|
|
||||||
expect(onInput).toHaveBeenCalledWith(false);
|
|
||||||
expect(onSelect).toHaveBeenCalledWith(actions[0], 0);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click overlay and close', async () => {
|
|
||||||
const onInput = jest.fn();
|
|
||||||
const onClickOverlay = jest.fn();
|
|
||||||
const div = document.createElement('div');
|
|
||||||
|
|
||||||
mount({
|
|
||||||
template: `
|
|
||||||
<div>
|
|
||||||
<action-sheet
|
|
||||||
:value="true"
|
|
||||||
:get-container="getContainer"
|
|
||||||
@input="onInput"
|
|
||||||
@click-overlay="onClickOverlay"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
components: {
|
|
||||||
ActionSheet,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
getContainer: () => div,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onInput,
|
|
||||||
onClickOverlay,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
|
|
||||||
div.querySelector('.van-overlay').click();
|
|
||||||
expect(onInput).toHaveBeenCalledWith(false);
|
|
||||||
expect(onClickOverlay).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('disable lazy-render', () => {
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
lazyRender: false,
|
|
||||||
actions: [{ name: 'Option' }, { name: 'Option' }],
|
|
||||||
cancelText: 'Cancel',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render title and default slot', () => {
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
title: 'Title',
|
|
||||||
},
|
|
||||||
scopedSlots: {
|
|
||||||
default() {
|
|
||||||
return 'Default';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('get container', () => {
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
getContainer: 'body',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.vm.$el.parentNode).toEqual(document.body);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('close-on-click-action prop', () => {
|
|
||||||
const onInput = jest.fn();
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
actions: [{ name: 'Option' }],
|
|
||||||
closeOnClickAction: true,
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
input: onInput,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const option = wrapper.find('.van-action-sheet__item');
|
|
||||||
option.trigger('click');
|
|
||||||
|
|
||||||
expect(onInput).toHaveBeenCalledWith(false);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('round prop', () => {
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
round: true,
|
|
||||||
actions: [{ name: 'Option' }],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('color option', () => {
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
actions: [{ name: 'Option', color: 'red' }],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('description prop', () => {
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
description: 'This is a description',
|
|
||||||
actions: [{ name: 'Option' }],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('close-icon prop', () => {
|
|
||||||
const wrapper = mount(ActionSheet, {
|
|
||||||
propsData: {
|
|
||||||
value: true,
|
|
||||||
title: 'Title',
|
|
||||||
closeIcon: 'cross',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
# Button
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Button } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Button);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Type
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button type="default">Default</van-button>
|
|
||||||
<van-button type="primary">Primary</van-button>
|
|
||||||
<van-button type="info">Info</van-button>
|
|
||||||
<van-button type="danger">Danger</van-button>
|
|
||||||
<van-button type="warning">Warning</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Plain
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button plain type="primary">Primary</van-button>
|
|
||||||
<van-button plain type="info">Danger</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Hairline
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button plain hairline type="primary">Hairline</van-button>
|
|
||||||
<van-button plain hairline type="info">Hairline</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Disabled
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button disabled type="primary">Diabled</van-button>
|
|
||||||
<van-button disabled type="info">Diabled</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Loading
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button loading type="primary" />
|
|
||||||
<van-button loading type="primary" loading-type="spinner" />
|
|
||||||
<van-button loading type="info" loading-text="Loading..." />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Shape
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button square type="primary">Square</van-button>
|
|
||||||
<van-button round type="info">Round</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Icon
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button icon="star-o" type="primary" />
|
|
||||||
<van-button icon="star-o" type="primary">Button</van-button>
|
|
||||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
|
|
||||||
>Button</van-button
|
|
||||||
>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Size
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button type="primary" size="large">Large</van-button>
|
|
||||||
<van-button type="primary" size="normal">Normal</van-button>
|
|
||||||
<van-button type="primary" size="small">Small</van-button>
|
|
||||||
<van-button type="primary" size="mini">Mini</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Block Element
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button type="primary" block>Block Element</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Route
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button type="primary" url="/vant/mobile.html">URL</van-button>
|
|
||||||
<van-button type="primary" to="index">Vue Router</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Color
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button color="#7232dd">Pure</van-button>
|
|
||||||
<van-button color="#7232dd" plain>Pure</van-button>
|
|
||||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
|
|
||||||
>Gradient</van-button
|
|
||||||
>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| type | Can be set to `primary` `info` `warning` `danger` | _string_ | `default` |
|
|
||||||
| size | Can be set to `large` `small` `mini` | _string_ | `normal` |
|
|
||||||
| text | Text | _string_ | - |
|
|
||||||
| color `v2.1.8` | Color, support linear-gradient | _string_ | - |
|
|
||||||
| icon | Left Icon | _string_ | - |
|
|
||||||
| icon-prefix `v2.6.0` | Icon className prefix | _string_ | `van-icon` |
|
|
||||||
| tag | HTML Tag | _string_ | `button` |
|
|
||||||
| native-type | Native Type Attribute | _string_ | `''` |
|
|
||||||
| plain | Whether to be plain button | _boolean_ | `false` |
|
|
||||||
| block | Whether to set display block | _boolean_ | `false` |
|
|
||||||
| round | Whether to be round button | _boolean_ | `false` |
|
|
||||||
| square | Whether to be square button | _boolean_ | `false` |
|
|
||||||
| disabled | Whether to disable button | _boolean_ | `false` |
|
|
||||||
| loading | Whether show loading status | _boolean_ | `false` |
|
|
||||||
| loading-text | Loading text | _string_ | - |
|
|
||||||
| loading-type | Loading type, can be set to `spinner` | _string_ | `circular` |
|
|
||||||
| loading-size | Loading icon size | _string_ | `20px` |
|
|
||||||
| url | Link URL | _string_ | - |
|
|
||||||
| to | Target route of the link, same as to of vue-router | _string \| object_ | - |
|
|
||||||
| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| --- | --- | --- |
|
|
||||||
| click | Triggered when click button and not disabled or loading | _event: Event_ |
|
|
||||||
| touchstart | Triggered when touch start | _event: TouchEvent_ |
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
# Button 按钮
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Button } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Button);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 按钮类型
|
|
||||||
|
|
||||||
支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button type="default">默认按钮</van-button>
|
|
||||||
<van-button type="primary">主要按钮</van-button>
|
|
||||||
<van-button type="info">信息按钮</van-button>
|
|
||||||
<van-button type="warning">警告按钮</van-button>
|
|
||||||
<van-button type="danger">危险按钮</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 朴素按钮
|
|
||||||
|
|
||||||
通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button plain type="primary">朴素按钮</van-button>
|
|
||||||
<van-button plain type="info">朴素按钮</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 细边框
|
|
||||||
|
|
||||||
设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button plain hairline type="primary">细边框按钮</van-button>
|
|
||||||
<van-button plain hairline type="info">细边框按钮</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 禁用状态
|
|
||||||
|
|
||||||
通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button disabled type="primary">禁用状态</van-button>
|
|
||||||
<van-button disabled type="info">禁用状态</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 加载状态
|
|
||||||
|
|
||||||
通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button loading type="primary" />
|
|
||||||
<van-button loading type="primary" loading-type="spinner" />
|
|
||||||
<van-button loading type="info" loading-text="加载中..." />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 按钮形状
|
|
||||||
|
|
||||||
通过`square`设置方形按钮，通过`round`设置圆形按钮
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button square type="primary">方形按钮</van-button>
|
|
||||||
<van-button round type="info">圆形按钮</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 图标按钮
|
|
||||||
|
|
||||||
通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button icon="star-o" type="primary" />
|
|
||||||
<van-button icon="star-o" type="primary">按钮</van-button>
|
|
||||||
<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info"
|
|
||||||
>按钮</van-button
|
|
||||||
>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 按钮尺寸
|
|
||||||
|
|
||||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button type="primary" size="large">大号按钮</van-button>
|
|
||||||
<van-button type="primary" size="normal">普通按钮</van-button>
|
|
||||||
<van-button type="primary" size="small">小型按钮</van-button>
|
|
||||||
<van-button type="primary" size="mini">迷你按钮</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 块级元素
|
|
||||||
|
|
||||||
按钮在默认情况下为行内块级元素，通过`block`属性可以将按钮的元素类型设置为块级元素
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button type="primary" block>块级元素</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 页面导航
|
|
||||||
|
|
||||||
可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button type="primary" url="/vant/mobile.html">URL 跳转</van-button>
|
|
||||||
<van-button type="primary" to="index">路由跳转</van-button>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义颜色
|
|
||||||
|
|
||||||
通过`color`属性可以自定义按钮的颜色
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-button color="#7232dd">单色按钮</van-button>
|
|
||||||
<van-button color="#7232dd" plain>单色按钮</van-button>
|
|
||||||
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)"
|
|
||||||
>渐变色按钮</van-button
|
|
||||||
>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| type | 类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
|
|
||||||
| size | 尺寸，可选值为 `large` `small` `mini` | _string_ | `normal` |
|
|
||||||
| text | 按钮文字 | _string_ | - |
|
|
||||||
| color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
|
|
||||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
|
||||||
| icon-prefix `v2.6.0` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
|
||||||
| tag | 根节点的 HTML 标签 | _string_ | `button` |
|
|
||||||
| native-type | 原生 button 标签的 type 属性 | _string_ | - |
|
|
||||||
| block | 是否为块级元素 | _boolean_ | `false` |
|
|
||||||
| plain | 是否为朴素按钮 | _boolean_ | `false` |
|
|
||||||
| square | 是否为方形按钮 | _boolean_ | `false` |
|
|
||||||
| round | 是否为圆形按钮 | _boolean_ | `false` |
|
|
||||||
| disabled | 是否禁用按钮 | _boolean_ | `false` |
|
|
||||||
| hairline | 是否使用 0.5px 边框 | _boolean_ | `false` |
|
|
||||||
| loading | 是否显示为加载状态 | _boolean_ | `false` |
|
|
||||||
| loading-text | 加载状态提示文字 | _string_ | - |
|
|
||||||
| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | _string_ | `circular` |
|
|
||||||
| loading-size | 加载图标大小 | _string_ | `20px` |
|
|
||||||
| url | 点击后跳转的链接地址 | _string_ | - |
|
|
||||||
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
|
|
||||||
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| ---------- | ---------------------------------------- | ------------------- |
|
|
||||||
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | _event: Event_ |
|
|
||||||
| touchstart | 开始触摸按钮时触发 | _event: TouchEvent_ |
|
|
||||||
@ -1,173 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('type')">
|
|
||||||
<div class="demo-button-row">
|
|
||||||
<van-button type="default">{{ t('default') }}</van-button>
|
|
||||||
<van-button type="primary">{{ t('primary') }}</van-button>
|
|
||||||
<van-button type="info">{{ t('info') }}</van-button>
|
|
||||||
</div>
|
|
||||||
<van-button type="danger">{{ t('danger') }}</van-button>
|
|
||||||
<van-button type="warning">{{ t('warning') }}</van-button>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('plain')">
|
|
||||||
<van-button plain type="primary" :text="t('plain')" />
|
|
||||||
<van-button plain type="info" :text="t('plain')" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('hairline')">
|
|
||||||
<van-button plain hairline type="primary" :text="t('hairlineButton')" />
|
|
||||||
<van-button plain hairline type="info" :text="t('hairlineButton')" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('disabled')">
|
|
||||||
<van-button disabled type="primary" :text="t('disabled')" />
|
|
||||||
<van-button disabled type="info" :text="t('disabled')" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('loadingStatus')">
|
|
||||||
<van-button loading type="primary" />
|
|
||||||
<van-button loading type="primary" loading-type="spinner" />
|
|
||||||
<van-button loading :loading-text="t('loadingText')" type="info" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('shape')">
|
|
||||||
<van-button type="primary" square :text="t('square')" />
|
|
||||||
<van-button type="info" round :text="t('round')" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('icon')">
|
|
||||||
<van-button type="primary" icon="star-o" />
|
|
||||||
<van-button type="primary" icon="star-o" :text="t('button')" />
|
|
||||||
<van-button
|
|
||||||
plain
|
|
||||||
type="primary"
|
|
||||||
icon="https://img.yzcdn.cn/vant/logo.png"
|
|
||||||
:text="t('button')"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('size')">
|
|
||||||
<van-button type="primary" size="large">{{ t('large') }}</van-button>
|
|
||||||
<van-button type="primary" size="normal">{{ t('normal') }}</van-button>
|
|
||||||
<van-button type="primary" size="small">{{ t('small') }}</van-button>
|
|
||||||
<van-button type="primary" size="mini">{{ t('mini') }}</van-button>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('blockElement')">
|
|
||||||
<van-button type="primary" block>{{ t('blockElement') }}</van-button>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block v-if="!isWeapp" :title="t('router')">
|
|
||||||
<van-button
|
|
||||||
:text="t('urlRoute')"
|
|
||||||
type="primary"
|
|
||||||
url="/vant/mobile.html"
|
|
||||||
/>
|
|
||||||
<van-button :text="t('vueRoute')" type="primary" to="index" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customColor')">
|
|
||||||
<van-button color="#7232dd" :text="t('pure')" />
|
|
||||||
<van-button plain color="#7232dd" :text="t('pure')" />
|
|
||||||
<van-button
|
|
||||||
color="linear-gradient(to right, #4bb0ff, #6149f6)"
|
|
||||||
:text="t('gradient')"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
type: '按钮类型',
|
|
||||||
size: '按钮尺寸',
|
|
||||||
icon: '图标按钮',
|
|
||||||
loading: '加载状态',
|
|
||||||
shape: '按钮形状',
|
|
||||||
default: '默认按钮',
|
|
||||||
primary: '主要按钮',
|
|
||||||
info: '信息按钮',
|
|
||||||
danger: '危险按钮',
|
|
||||||
warning: '警告按钮',
|
|
||||||
large: '大号按钮',
|
|
||||||
normal: '普通按钮',
|
|
||||||
small: '小型按钮',
|
|
||||||
mini: '迷你按钮',
|
|
||||||
plain: '朴素按钮',
|
|
||||||
square: '方形按钮',
|
|
||||||
round: '圆形按钮',
|
|
||||||
hairline: '细边框',
|
|
||||||
hairlineButton: '细边框按钮',
|
|
||||||
loadingText: '加载中...',
|
|
||||||
router: '页面导航',
|
|
||||||
urlRoute: 'URL 跳转',
|
|
||||||
vueRoute: '路由跳转',
|
|
||||||
customColor: '自定义颜色',
|
|
||||||
pure: '单色按钮',
|
|
||||||
gradient: '渐变色按钮',
|
|
||||||
blockElement: '块级元素',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
type: 'Type',
|
|
||||||
size: 'Size',
|
|
||||||
icon: 'Icon',
|
|
||||||
loading: 'Loading',
|
|
||||||
shape: 'Shape',
|
|
||||||
default: 'Default',
|
|
||||||
primary: 'Primary',
|
|
||||||
info: 'Info',
|
|
||||||
danger: 'Danger',
|
|
||||||
warning: 'Warning',
|
|
||||||
large: 'Large',
|
|
||||||
normal: 'Normal',
|
|
||||||
small: 'Small',
|
|
||||||
mini: 'Mini',
|
|
||||||
plain: 'Plain',
|
|
||||||
square: 'Square',
|
|
||||||
round: 'Round',
|
|
||||||
hairline: 'Hairline',
|
|
||||||
hairlineButton: 'Hairline',
|
|
||||||
loadingText: 'Loading...',
|
|
||||||
router: 'Router',
|
|
||||||
urlRoute: 'URL',
|
|
||||||
vueRoute: 'Vue Router',
|
|
||||||
customColor: 'Custom Color',
|
|
||||||
pure: 'Pure',
|
|
||||||
gradient: 'Gradient',
|
|
||||||
blockElement: 'Block Element',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-button {
|
|
||||||
.van-button {
|
|
||||||
&--large {
|
|
||||||
margin-bottom: @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--small,
|
|
||||||
&--normal:not(:last-child) {
|
|
||||||
margin-right: @padding-md;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-doc-demo-block {
|
|
||||||
padding: 0 @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-doc-demo-block__title {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-row {
|
|
||||||
margin-bottom: @padding-sm;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,183 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-button {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: @button-default-height;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-size: @button-default-font-size;
|
|
||||||
line-height: @button-default-line-height;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: @button-border-radius;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity @animation-duration-fast;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: @black;
|
|
||||||
border: inherit;
|
|
||||||
border-color: @black;
|
|
||||||
border-radius: inherit; /* inherit parent's border radius */
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
opacity: 0;
|
|
||||||
content: ' ';
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active::before {
|
|
||||||
opacity: 0.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--loading,
|
|
||||||
&--disabled {
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--default {
|
|
||||||
color: @button-default-color;
|
|
||||||
background-color: @button-default-background-color;
|
|
||||||
border: @button-border-width solid @button-default-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--primary {
|
|
||||||
color: @button-primary-color;
|
|
||||||
background-color: @button-primary-background-color;
|
|
||||||
border: @button-border-width solid @button-primary-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--info {
|
|
||||||
color: @button-info-color;
|
|
||||||
background-color: @button-info-background-color;
|
|
||||||
border: @button-border-width solid @button-info-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--danger {
|
|
||||||
color: @button-danger-color;
|
|
||||||
background-color: @button-danger-background-color;
|
|
||||||
border: @button-border-width solid @button-danger-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--warning {
|
|
||||||
color: @button-warning-color;
|
|
||||||
background-color: @button-warning-background-color;
|
|
||||||
border: @button-border-width solid @button-warning-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--plain {
|
|
||||||
background-color: @button-plain-background-color;
|
|
||||||
|
|
||||||
&.van-button--primary {
|
|
||||||
color: @button-primary-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.van-button--info {
|
|
||||||
color: @button-info-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.van-button--danger {
|
|
||||||
color: @button-danger-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.van-button--warning {
|
|
||||||
color: @button-warning-background-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--large {
|
|
||||||
width: 100%;
|
|
||||||
height: @button-large-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--normal {
|
|
||||||
padding: 0 15px;
|
|
||||||
font-size: @button-normal-font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--small {
|
|
||||||
height: @button-small-height;
|
|
||||||
padding: 0 @padding-xs;
|
|
||||||
font-size: @button-small-font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__loading {
|
|
||||||
color: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--mini {
|
|
||||||
height: @button-mini-height;
|
|
||||||
padding: 0 @padding-base;
|
|
||||||
font-size: @button-mini-font-size;
|
|
||||||
|
|
||||||
& + .van-button--mini {
|
|
||||||
margin-left: @padding-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--block {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: @button-disabled-opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--loading {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--round {
|
|
||||||
border-radius: @button-round-border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--square {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// align-items are ignored when flex container is a button in legacy safari
|
|
||||||
// see: https://bugs.webkit.org/show_bug.cgi?id=169700
|
|
||||||
&__content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
min-width: 1em;
|
|
||||||
font-size: 1.2em;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon + &__text,
|
|
||||||
&__loading + &__text {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--hairline {
|
|
||||||
border-width: 0;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
border-color: inherit;
|
|
||||||
border-radius: @button-border-radius * 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.van-button--round::after {
|
|
||||||
border-radius: @button-round-border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.van-button--square::after {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--primary van-button--normal">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">主要按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--info van-button--normal">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">信息按钮</span></div>
|
|
||||||
</button></div> <button class="van-button van-button--danger van-button--normal">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">危险按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--warning van-button--normal">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">警告按钮</span></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--info van-button--normal van-button--plain">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
|
|
||||||
</button></div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
|
|
||||||
</button></div>
|
|
||||||
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
|
|
||||||
</button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
|
|
||||||
</button></div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--normal van-button--loading">
|
|
||||||
<div class="van-button__content">
|
|
||||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
|
||||||
</div>
|
|
||||||
</button> <button class="van-button van-button--primary van-button--normal van-button--loading">
|
|
||||||
<div class="van-button__content">
|
|
||||||
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
|
||||||
</div>
|
|
||||||
</button> <button class="van-button van-button--info van-button--normal van-button--loading">
|
|
||||||
<div class="van-button__content">
|
|
||||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
|
|
||||||
</div>
|
|
||||||
</button></div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--normal van-button--square">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">方形按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--info van-button--normal van-button--round">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">圆形按钮</span></div>
|
|
||||||
</button></div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--normal">
|
|
||||||
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</button> <button class="van-button van-button--primary van-button--normal">
|
|
||||||
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
|
|
||||||
<!----></i><span class="van-button__text">按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--primary van-button--normal van-button--plain">
|
|
||||||
<div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
|
|
||||||
<!----></i><span class="van-button__text">按钮</span></div>
|
|
||||||
</button></div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--large">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">大号按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--primary van-button--normal">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">普通按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--primary van-button--small">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">小型按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--primary van-button--mini">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">迷你按钮</span></div>
|
|
||||||
</button></div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--normal van-button--block">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">块级元素</span></div>
|
|
||||||
</button></div>
|
|
||||||
<div><button class="van-button van-button--primary van-button--normal">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">URL 跳转</span></div>
|
|
||||||
</button> <button class="van-button van-button--primary van-button--normal">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">路由跳转</span></div>
|
|
||||||
</button></div>
|
|
||||||
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
|
|
||||||
</button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">渐变色按钮</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`icon-prefix prop 1`] = `
|
|
||||||
<button class="van-button van-button--default van-button--normal">
|
|
||||||
<div class="van-button__content"><i class="my-icon my-icon-success van-button__icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`loading-size prop 1`] = `
|
|
||||||
<button class="van-button van-button--default van-button--normal van-button--loading">
|
|
||||||
<div class="van-button__content">
|
|
||||||
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
import { mount } from '../../../test';
|
|
||||||
import Button from '..';
|
|
||||||
|
|
||||||
test('loading-size prop', () => {
|
|
||||||
const wrapper = mount(Button, {
|
|
||||||
propsData: {
|
|
||||||
loading: true,
|
|
||||||
loadingSize: '10px',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click event', () => {
|
|
||||||
const onClick = jest.fn();
|
|
||||||
const wrapper = mount(Button, {
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
click: onClick,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.trigger('click');
|
|
||||||
expect(onClick).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('not trigger click event when disabled', () => {
|
|
||||||
const onClick = jest.fn();
|
|
||||||
const wrapper = mount(Button, {
|
|
||||||
propsData: {
|
|
||||||
disabled: true,
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
click: onClick,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.trigger('click');
|
|
||||||
expect(onClick).toHaveBeenCalledTimes(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('not trigger click event when loading', () => {
|
|
||||||
const onClick = jest.fn();
|
|
||||||
const wrapper = mount(Button, {
|
|
||||||
propsData: {
|
|
||||||
loading: true,
|
|
||||||
},
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
click: onClick,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.trigger('click');
|
|
||||||
expect(onClick).toHaveBeenCalledTimes(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('touchstart event', () => {
|
|
||||||
const onTouchstart = jest.fn();
|
|
||||||
const wrapper = mount(Button, {
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
touchstart: onTouchstart,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.trigger('touchstart');
|
|
||||||
expect(onTouchstart).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('hide border when color is gradient', () => {
|
|
||||||
const wrapper = mount(Button, {
|
|
||||||
propsData: {
|
|
||||||
color: 'linear-gradient(#000, #fff)',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.element.style.border).toEqual('0px');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('icon-prefix prop', () => {
|
|
||||||
const wrapper = mount(Button, {
|
|
||||||
propsData: {
|
|
||||||
icon: 'success',
|
|
||||||
iconPrefix: 'my-icon',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-cell-group {
|
|
||||||
background-color: @cell-group-background-color;
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
padding: @cell-group-title-padding;
|
|
||||||
color: @cell-group-title-color;
|
|
||||||
font-size: @cell-group-title-font-size;
|
|
||||||
line-height: @cell-group-title-line-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,164 +0,0 @@
|
|||||||
# Cell
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Cell, CellGroup } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Cell);
|
|
||||||
Vue.use(CellGroup);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell title="Cell title" value="Content" />
|
|
||||||
<van-cell title="Cell title" value="Content" label="Description" />
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Size
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell title="Cell title" value="Content" size="large" />
|
|
||||||
<van-cell
|
|
||||||
title="Cell title"
|
|
||||||
value="Content"
|
|
||||||
size="large"
|
|
||||||
label="Description"
|
|
||||||
/>
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Left Icon
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell title="Cell title" icon="location-o" />
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Value only
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell value="Content" />
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Link
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell title="Cell title" is-link />
|
|
||||||
<van-cell title="Cell title" is-link value="Content" />
|
|
||||||
<van-cell title="Cell title" is-link arrow-direction="down" value="Content" />
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Router
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell title="URL" is-link url="/vant/mobile.html" />
|
|
||||||
<van-cell title="Vue Router" is-link to="index" />
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Group Title
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group title="Group 1">
|
|
||||||
<van-cell title="Cell title" value="Content" />
|
|
||||||
</van-cell-group>
|
|
||||||
<van-cell-group title="Group 2">
|
|
||||||
<van-cell title="Cell title" value="Content" />
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Use Slots
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell value="内容" is-link>
|
|
||||||
<!-- Use the title slot to customize the title -->
|
|
||||||
<template #title>
|
|
||||||
<span class="custom-title">单元格</span>
|
|
||||||
<van-tag type="danger">标签</van-tag>
|
|
||||||
</template>
|
|
||||||
</van-cell>
|
|
||||||
|
|
||||||
<van-cell title="单元格" icon="shop-o">
|
|
||||||
<!-- Use the right-icon slot to customize the right icon -->
|
|
||||||
<template #right-icon>
|
|
||||||
<van-icon name="search" style="line-height: inherit;" />
|
|
||||||
</template>
|
|
||||||
</van-cell>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Vertical Center
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell center title="Cell title" value="Content" label="Description" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### CellGroup Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --------- | ---------------------------- | --------- | ------- |
|
|
||||||
| title | Group title | _string_ | - |
|
|
||||||
| border | Whether to show outer border | _boolean_ | `true` |
|
|
||||||
|
|
||||||
### Cell Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| title | Title | _number \| string_ | - |
|
|
||||||
| value | Right text | _number \| string_ | - |
|
|
||||||
| label | Description below the title | _string_ | - |
|
|
||||||
| size | Size，can be set to `large` | _string_ | - |
|
|
||||||
| icon | Left Icon | _string_ | - |
|
|
||||||
| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
|
|
||||||
| border | Whether to show inner border | _boolean_ | `true` |
|
|
||||||
| center | Whether to center content vertically | _boolean_ | `true` |
|
|
||||||
| url | Link URL | _string_ | - |
|
|
||||||
| to | Target route of the link, same as to of vue-router | _string \| object_ | - |
|
|
||||||
| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
|
|
||||||
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
|
|
||||||
| is-link | Whether to show link icon | _boolean_ | `false` |
|
|
||||||
| required | Whether to show required mark | _boolean_ | `false` |
|
|
||||||
| arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` |
|
|
||||||
| title-style | Title style | _any_ | - |
|
|
||||||
| title-class | Title className | _any_ | - |
|
|
||||||
| value-class | Value className | _any_ | - |
|
|
||||||
| label-class | Label className | _any_ | - |
|
|
||||||
|
|
||||||
### Cell Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| ----- | ------------------------- | -------------- |
|
|
||||||
| click | Triggered when click cell | _event: Event_ |
|
|
||||||
|
|
||||||
### CellGroup Slots
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ------- | ------------ |
|
|
||||||
| default | Default slot |
|
|
||||||
| title | Custom title |
|
|
||||||
|
|
||||||
### Cell Slots
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ---------- | --------------------------------- |
|
|
||||||
| default | Custom value |
|
|
||||||
| icon | Custom icon |
|
|
||||||
| title | Custom title |
|
|
||||||
| label | Custom label |
|
|
||||||
| right-icon | Custom right icon |
|
|
||||||
| extra | Custom extra content on the right |
|
|
||||||
@ -1,167 +0,0 @@
|
|||||||
# Cell 单元格
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Cell, CellGroup } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Cell);
|
|
||||||
Vue.use(CellGroup);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell title="单元格" value="内容" />
|
|
||||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 单元格大小
|
|
||||||
|
|
||||||
通过`size`属性可以控制单元格的大小
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell title="单元格" value="内容" size="large" />
|
|
||||||
<van-cell title="单元格" value="内容" size="large" label="描述信息" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 展示图标
|
|
||||||
|
|
||||||
通过`icon`属性在标题左侧展示图标
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell title="单元格" icon="location-o" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 只设置 value
|
|
||||||
|
|
||||||
只设置`value`时，内容会靠左对齐
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell value="内容" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 展示箭头
|
|
||||||
|
|
||||||
设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell title="单元格" is-link />
|
|
||||||
<van-cell title="单元格" is-link value="内容" />
|
|
||||||
<van-cell title="单元格" is-link arrow-direction="down" value="内容" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 页面导航
|
|
||||||
|
|
||||||
可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell title="URL 跳转" is-link url="/vant/mobile.html" />
|
|
||||||
<van-cell title="路由跳转" is-link to="index" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 分组标题
|
|
||||||
|
|
||||||
通过`CellGroup`的`title`属性可以指定分组标题
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell-group title="分组1">
|
|
||||||
<van-cell title="单元格" value="内容" />
|
|
||||||
</van-cell-group>
|
|
||||||
<van-cell-group title="分组2">
|
|
||||||
<van-cell title="单元格" value="内容" />
|
|
||||||
</van-cell-group>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 使用插槽
|
|
||||||
|
|
||||||
如以上用法不能满足你的需求，可以使用插槽来自定义内容
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell value="内容" is-link>
|
|
||||||
<!-- 使用 title 插槽来自定义标题 -->
|
|
||||||
<template #title>
|
|
||||||
<span class="custom-title">单元格</span>
|
|
||||||
<van-tag type="danger">标签</van-tag>
|
|
||||||
</template>
|
|
||||||
</van-cell>
|
|
||||||
|
|
||||||
<van-cell title="单元格" icon="shop-o">
|
|
||||||
<!-- 使用 right-icon 插槽来自定义右侧图标 -->
|
|
||||||
<template #right-icon>
|
|
||||||
<van-icon name="search" style="line-height: inherit;" />
|
|
||||||
</template>
|
|
||||||
</van-cell>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 垂直居中
|
|
||||||
|
|
||||||
通过`center`属性可以让`Cell`的左右内容都垂直居中
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-cell center title="单元格" value="内容" label="描述信息" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### CellGroup Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| ------ | -------------- | --------- | ------ |
|
|
||||||
| title | 分组标题 | _string_ | `-` |
|
|
||||||
| border | 是否显示外边框 | _boolean_ | `true` |
|
|
||||||
|
|
||||||
### Cell Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| title | 左侧标题 | _number \| string_ | - |
|
|
||||||
| value | 右侧内容 | _number \| string_ | - |
|
|
||||||
| label | 标题下方的描述信息 | _string_ | - |
|
|
||||||
| size | 单元格大小，可选值为 `large` | _string_ | - |
|
|
||||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
|
||||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
|
||||||
| url | 点击后跳转的链接地址 | _string_ | - |
|
|
||||||
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
|
|
||||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
|
||||||
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
|
|
||||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
|
||||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
|
||||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
|
||||||
| center | 是否使内容垂直居中 | _boolean_ | `false` |
|
|
||||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
|
|
||||||
| title-style | 左侧标题额外样式 | _any_ | - |
|
|
||||||
| title-class | 左侧标题额外类名 | _any_ | - |
|
|
||||||
| value-class | 右侧内容额外类名 | _any_ | - |
|
|
||||||
| label-class | 描述信息额外类名 | _any_ | - |
|
|
||||||
|
|
||||||
### Cell Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| ------ | ---------------- | -------------- |
|
|
||||||
| click | 点击单元格时触发 | _event: Event_ |
|
|
||||||
|
|
||||||
### CellGroup Slots
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
| ------- | -------------- |
|
|
||||||
| default | 默认插槽 |
|
|
||||||
| title | 自定义分组标题 |
|
|
||||||
|
|
||||||
### Cell Slots
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
| ---------- | ----------------------------- |
|
|
||||||
| default | 自定义右侧 value 的内容 |
|
|
||||||
| title | 自定义左侧 title 的内容 |
|
|
||||||
| label | 自定义标题下方 label 的内容 |
|
|
||||||
| icon | 自定义左侧图标 |
|
|
||||||
| right-icon | 自定义右侧按钮，默认为`arrow` |
|
|
||||||
| extra | 自定义单元格最右侧的额外内容 |
|
|
||||||
@ -1,121 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-cell-group>
|
|
||||||
<van-cell :title="t('cell')" :value="t('content')" />
|
|
||||||
<van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
|
|
||||||
</van-cell-group>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('largeSize')">
|
|
||||||
<van-cell :title="t('cell')" :value="t('content')" size="large" />
|
|
||||||
<van-cell
|
|
||||||
:title="t('cell')"
|
|
||||||
:value="t('content')"
|
|
||||||
size="large"
|
|
||||||
:label="t('desc')"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('showIcon')">
|
|
||||||
<van-cell :title="t('cell')" :value="t('content')" icon="location-o" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block v-if="!isWeapp" :title="t('valueOnly')">
|
|
||||||
<van-cell :value="t('content')" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('showArrow')">
|
|
||||||
<van-cell :title="t('cell')" is-link />
|
|
||||||
<van-cell :title="t('cell')" is-link :value="t('content')" />
|
|
||||||
<van-cell
|
|
||||||
:title="t('cell')"
|
|
||||||
is-link
|
|
||||||
arrow-direction="down"
|
|
||||||
:value="t('content')"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('router')">
|
|
||||||
<van-cell :title="t('urlRoute')" is-link url="/vant/mobile.html" />
|
|
||||||
<van-cell :title="t('vueRoute')" is-link to="index" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('groupTitle')">
|
|
||||||
<van-cell-group :title="`${t('group')} 1`">
|
|
||||||
<van-cell :title="t('cell')" :value="t('content')" />
|
|
||||||
</van-cell-group>
|
|
||||||
<van-cell-group :title="`${t('group')} 2`">
|
|
||||||
<van-cell :title="t('cell')" :value="t('content')" />
|
|
||||||
</van-cell-group>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('useSlots')">
|
|
||||||
<van-cell :value="t('content')" is-link>
|
|
||||||
<template #title>
|
|
||||||
<span class="custom-title">{{ t('cell') }}</span>
|
|
||||||
<van-tag type="danger">{{ t('tag') }}</van-tag>
|
|
||||||
</template>
|
|
||||||
</van-cell>
|
|
||||||
|
|
||||||
<van-cell icon="shop-o" :title="t('cell')">
|
|
||||||
<template #right-icon>
|
|
||||||
<van-icon name="search" style="line-height: inherit;" />
|
|
||||||
</template>
|
|
||||||
</van-cell>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('verticalCenter')">
|
|
||||||
<van-cell
|
|
||||||
center
|
|
||||||
:title="t('cell')"
|
|
||||||
:value="t('content')"
|
|
||||||
:label="t('desc')"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
cell: '单元格',
|
|
||||||
valueOnly: '只设置 value',
|
|
||||||
showIcon: '展示图标',
|
|
||||||
showArrow: '展示箭头',
|
|
||||||
largeSize: '单元格大小',
|
|
||||||
group: '分组',
|
|
||||||
groupTitle: '分组标题',
|
|
||||||
router: '页面导航',
|
|
||||||
urlRoute: 'URL 跳转',
|
|
||||||
vueRoute: '路由跳转',
|
|
||||||
useSlots: '使用插槽',
|
|
||||||
verticalCenter: '垂直居中',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
cell: 'Cell title',
|
|
||||||
valueOnly: 'Value only',
|
|
||||||
showIcon: 'Left Icon',
|
|
||||||
showArrow: 'Link',
|
|
||||||
largeSize: 'Size',
|
|
||||||
group: 'Group',
|
|
||||||
groupTitle: 'Group Title',
|
|
||||||
router: 'Router',
|
|
||||||
urlRoute: 'URL',
|
|
||||||
vueRoute: 'Vue Router',
|
|
||||||
useSlots: 'Use Slots',
|
|
||||||
verticalCenter: 'Vertical center',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.demo-cell {
|
|
||||||
.custom-title {
|
|
||||||
margin-right: 5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
@import '../style/mixins/hairline';
|
|
||||||
|
|
||||||
.van-cell {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
padding: @cell-vertical-padding @cell-horizontal-padding;
|
|
||||||
overflow: hidden;
|
|
||||||
color: @cell-text-color;
|
|
||||||
font-size: @cell-font-size;
|
|
||||||
line-height: @cell-line-height;
|
|
||||||
background-color: @cell-background-color;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
.hairline-bottom(@cell-border-color, @padding-md, @padding-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child::after,
|
|
||||||
&--borderless::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
margin-top: @cell-label-margin-top;
|
|
||||||
color: @cell-label-color;
|
|
||||||
font-size: @cell-label-font-size;
|
|
||||||
line-height: @cell-label-line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title,
|
|
||||||
&__value {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__value {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
color: @cell-value-color;
|
|
||||||
text-align: right;
|
|
||||||
vertical-align: middle;
|
|
||||||
word-wrap: break-word;
|
|
||||||
|
|
||||||
&--alone {
|
|
||||||
color: @text-color;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__left-icon,
|
|
||||||
&__right-icon {
|
|
||||||
min-width: 1em;
|
|
||||||
height: @cell-line-height;
|
|
||||||
font-size: @cell-icon-size;
|
|
||||||
line-height: @cell-line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__left-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__right-icon {
|
|
||||||
margin-left: 5px;
|
|
||||||
color: @cell-right-icon-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: @cell-active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--required {
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
left: @padding-xs;
|
|
||||||
color: @cell-required-color;
|
|
||||||
font-size: @cell-font-size;
|
|
||||||
content: '*';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--center {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--large {
|
|
||||||
padding-top: @cell-large-vertical-padding;
|
|
||||||
padding-bottom: @cell-large-vertical-padding;
|
|
||||||
|
|
||||||
.van-cell__title {
|
|
||||||
font-size: @cell-large-title-font-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-cell__label {
|
|
||||||
font-size: @cell-large-label-font-size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
export type SharedCellProps = {
|
|
||||||
icon?: string;
|
|
||||||
size?: string;
|
|
||||||
border: boolean;
|
|
||||||
center?: boolean;
|
|
||||||
isLink?: boolean;
|
|
||||||
required?: boolean;
|
|
||||||
clickable?: boolean;
|
|
||||||
iconPrefix?: string;
|
|
||||||
titleStyle?: any;
|
|
||||||
titleClass?: any;
|
|
||||||
valueClass?: any;
|
|
||||||
labelClass?: any;
|
|
||||||
title?: string | number;
|
|
||||||
value?: string | number;
|
|
||||||
label?: string | number;
|
|
||||||
arrowDirection?: 'up' | 'down' | 'left' | 'right';
|
|
||||||
};
|
|
||||||
|
|
||||||
export const cellProps = {
|
|
||||||
icon: String,
|
|
||||||
size: String,
|
|
||||||
center: Boolean,
|
|
||||||
isLink: Boolean,
|
|
||||||
required: Boolean,
|
|
||||||
clickable: Boolean,
|
|
||||||
iconPrefix: String,
|
|
||||||
titleStyle: null as any,
|
|
||||||
titleClass: null as any,
|
|
||||||
valueClass: null as any,
|
|
||||||
labelClass: null as any,
|
|
||||||
title: [Number, String],
|
|
||||||
value: [Number, String],
|
|
||||||
label: [Number, String],
|
|
||||||
arrowDirection: String,
|
|
||||||
border: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="van-cell-group van-hairline--top-bottom">
|
|
||||||
<div class="van-cell">
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-cell">
|
|
||||||
<div class="van-cell__title"><span>单元格</span>
|
|
||||||
<div class="van-cell__label">描述信息</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-cell van-cell--large">
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-cell van-cell--large">
|
|
||||||
<div class="van-cell__title"><span>单元格</span>
|
|
||||||
<div class="van-cell__label">描述信息</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-cell"><i class="van-icon van-icon-location-o van-cell__left-icon">
|
|
||||||
<!----></i>
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-cell">
|
|
||||||
<div class="van-cell__value van-cell__value--alone"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow-down van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>URL 跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span>路由跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="van-cell-group__title">分组 1</div>
|
|
||||||
<div class="van-cell-group van-hairline--top-bottom">
|
|
||||||
<div class="van-cell">
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-cell-group__title">分组 2</div>
|
|
||||||
<div class="van-cell-group van-hairline--top-bottom">
|
|
||||||
<div class="van-cell">
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
|
|
||||||
<div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag van-tag--danger">标签</span></div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
<div class="van-cell"><i class="van-icon van-icon-shop-o van-cell__left-icon">
|
|
||||||
<!----></i>
|
|
||||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-search" style="line-height: inherit;">
|
|
||||||
<!----></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-cell van-cell--center">
|
|
||||||
<div class="van-cell__title"><span>单元格</span>
|
|
||||||
<div class="van-cell__label">描述信息</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-cell__value"><span>内容</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`CellGroup title slot 1`] = `
|
|
||||||
<div>
|
|
||||||
<div class="van-cell-group__title">CustomTitle</div>
|
|
||||||
<div class="van-cell-group van-hairline--top-bottom"></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`arrow direction 1`] = `
|
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`icon-prefix prop 1`] = `
|
|
||||||
<div class="van-cell"><i class="my-icon my-icon-success van-cell__left-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render slot 1`] = `
|
|
||||||
<div class="van-cell">Custom Icon<div class="van-cell__title">Custom Title<div class="van-cell__label">Custom Label</div>
|
|
||||||
</div>Custom Extra</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`title-style prop 1`] = `
|
|
||||||
<div class="van-cell">
|
|
||||||
<div class="van-cell__title" style="color: red;"><span>title</span></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
import Cell from '..';
|
|
||||||
import CellGroup from '../../cell-group';
|
|
||||||
import { mount } from '../../../test';
|
|
||||||
|
|
||||||
test('click event', () => {
|
|
||||||
const click = jest.fn();
|
|
||||||
const wrapper = mount(Cell, {
|
|
||||||
context: {
|
|
||||||
on: {
|
|
||||||
click,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.trigger('click');
|
|
||||||
expect(click).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('arrow direction', () => {
|
|
||||||
const wrapper = mount(Cell, {
|
|
||||||
propsData: {
|
|
||||||
isLink: true,
|
|
||||||
arrowDirection: 'down',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render slot', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<cell>
|
|
||||||
<template v-slot:icon>Custom Icon</template>
|
|
||||||
<template v-slot:title>Custom Title</template>
|
|
||||||
<template v-slot:label>Custom Label</template>
|
|
||||||
<template v-slot:extra>Custom Extra</template>
|
|
||||||
</cell>
|
|
||||||
`,
|
|
||||||
components: {
|
|
||||||
Cell,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('title-style prop', () => {
|
|
||||||
const wrapper = mount(Cell, {
|
|
||||||
propsData: {
|
|
||||||
title: 'title',
|
|
||||||
titleStyle: {
|
|
||||||
color: 'red',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('CellGroup title slot', () => {
|
|
||||||
const wrapper = mount(CellGroup, {
|
|
||||||
scopedSlots: {
|
|
||||||
title: () => 'CustomTitle',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('icon-prefix prop', () => {
|
|
||||||
const wrapper = mount(Cell, {
|
|
||||||
propsData: {
|
|
||||||
iconPrefix: 'my-icon',
|
|
||||||
icon: 'success',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,126 +0,0 @@
|
|||||||
# Circle
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Circle } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Circle);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle v-model:currentRate="currentRate" :rate="30" :speed="100" :text="text" />
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
currentRate: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
text() {
|
|
||||||
return this.currentRate.toFixed(0) + '%';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Width
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
:stroke-width="60"
|
|
||||||
text="Custom Width"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Color
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
layer-color="#ebedf0"
|
|
||||||
text="Custom Color"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Gradient
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
:color="gradientColor"
|
|
||||||
text="Gradient"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
currentRate: 0,
|
|
||||||
gradientColor: {
|
|
||||||
'0%': '#3fecff',
|
|
||||||
'100%': '#6149f6',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Counter Clockwise
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
:clockwise="false"
|
|
||||||
text="Counter Clockwise"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Size
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
size="120px"
|
|
||||||
text="Custom Size"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| v-model:currentRate | Current rate | _number_ | - |
|
|
||||||
| rate | Target rate | _number \| string_ | `100` |
|
|
||||||
| size | Circle size | _number \| string_ | `100px` |
|
|
||||||
| color `v2.1.4` | Progress color, passing object to render gradient | _string \| object_ | `#1989fa` |
|
|
||||||
| layer-color | Layer color | _string_ | `white` |
|
|
||||||
| fill | Fill color | _string_ | `none` |
|
|
||||||
| speed | Animate speed（rate/s） | _number \| string_ | `0` |
|
|
||||||
| text | Text | _string_ | - |
|
|
||||||
| stroke-width | Stroke width | _number \| string_ | `40` |
|
|
||||||
| stroke-linecap `v2.2.15` | Stroke linecap，can be set to `sqaure` `butt` | _string_ | `round` |
|
|
||||||
| clockwise | Whether to be clockwise | _boolean_ | `true` |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ------- | ------------------- |
|
|
||||||
| default | custom text content |
|
|
||||||
@ -1,143 +0,0 @@
|
|||||||
# Circle 环形进度条
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Circle } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Circle);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
`rate`属性表示进度条的目标进度，`v-model:currentRate`表示动画过程中的实时进度。当`rate`发生变化时，`v-model:currentRate`会以`speed`的速度变化，直至达到`rate`设定的值。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="30"
|
|
||||||
:speed="100"
|
|
||||||
:text="text"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
currentRate: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
text() {
|
|
||||||
return this.currentRate.toFixed(0) + '%';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 宽度定制
|
|
||||||
|
|
||||||
通过`stroke-width`属性来控制进度条宽度
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
:stroke-width="60"
|
|
||||||
text="宽度定制"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 颜色定制
|
|
||||||
|
|
||||||
通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
layer-color="#ebedf0"
|
|
||||||
text="颜色定制"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 渐变色
|
|
||||||
|
|
||||||
`color`属性支持传入对象格式来定义渐变色
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
:color="gradientColor"
|
|
||||||
text="渐变色"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
currentRate: 0,
|
|
||||||
gradientColor: {
|
|
||||||
'0%': '#3fecff',
|
|
||||||
'100%': '#6149f6',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 逆时针方向
|
|
||||||
|
|
||||||
将`clockwise`设置为`false`，进度会从逆时针方向开始
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
:clockwise="false"
|
|
||||||
text="逆时针方向"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 大小定制
|
|
||||||
|
|
||||||
通过`size`属性设置圆环直径
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate"
|
|
||||||
:rate="rate"
|
|
||||||
size="120px"
|
|
||||||
text="大小定制"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| v-model:currentRate | 当前进度 | _number_ | - |
|
|
||||||
| rate | 目标进度 | _number \| string_ | `100` |
|
|
||||||
| size | 圆环直径，默认单位为 `px` | _number \| string_ | `100px` |
|
|
||||||
| color `v2.1.4` | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` |
|
|
||||||
| layer-color | 轨道颜色 | _string_ | `white` |
|
|
||||||
| fill | 填充颜色 | _string_ | `none` |
|
|
||||||
| speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` |
|
|
||||||
| text | 文字 | _string_ | - |
|
|
||||||
| stroke-width | 进度条宽度 | _number \| string_ | `40` |
|
|
||||||
| stroke-linecap `v2.2.15` | 进度条端点的形状，可选值为`sqaure` `butt` | _string_ | `round` |
|
|
||||||
| clockwise | 是否顺时针增加 | _boolean_ | `true` |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
| ------- | -------------- |
|
|
||||||
| default | 自定义文字内容 |
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate1"
|
|
||||||
:rate="rate"
|
|
||||||
:speed="100"
|
|
||||||
:text="currentRate1.toFixed(0) + '%'"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customStyle')">
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate3"
|
|
||||||
:rate="rate"
|
|
||||||
:speed="100"
|
|
||||||
:stroke-width="60"
|
|
||||||
:text="t('customWidth')"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate3"
|
|
||||||
color="#ee0a24"
|
|
||||||
:rate="rate"
|
|
||||||
layer-color="#ebedf0"
|
|
||||||
:speed="100"
|
|
||||||
:text="t('customColor')"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate2"
|
|
||||||
:rate="rate"
|
|
||||||
:speed="100"
|
|
||||||
:color="gradientColor"
|
|
||||||
:text="t('gradient')"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate4"
|
|
||||||
color="#07c160"
|
|
||||||
:rate="rate"
|
|
||||||
:speed="100"
|
|
||||||
:clockwise="false"
|
|
||||||
:text="t('counterClockwise')"
|
|
||||||
style="margin-top: 15px;"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-circle
|
|
||||||
v-model:currentRate="currentRate4"
|
|
||||||
color="#7232dd"
|
|
||||||
:rate="rate"
|
|
||||||
:speed="100"
|
|
||||||
size="120px"
|
|
||||||
:clockwise="false"
|
|
||||||
:text="t('customSize')"
|
|
||||||
style="margin-top: 15px;"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<div style="margin-top: 15px;">
|
|
||||||
<van-button :text="t('add')" type="primary" size="small" @click="add" />
|
|
||||||
<van-button
|
|
||||||
:text="t('decrease')"
|
|
||||||
type="danger"
|
|
||||||
size="small"
|
|
||||||
@click="reduce"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const format = (rate) => Math.min(Math.max(rate, 0), 100);
|
|
||||||
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
gradient: '渐变色',
|
|
||||||
customSize: '大小定制',
|
|
||||||
customStyle: '样式定制',
|
|
||||||
customColor: '颜色定制',
|
|
||||||
customWidth: '宽度定制',
|
|
||||||
counterClockwise: '逆时针',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
gradient: 'Gradient',
|
|
||||||
customSize: 'Custom Size',
|
|
||||||
customStyle: 'Custom Style',
|
|
||||||
customColor: 'Custom Color',
|
|
||||||
customWidth: 'Custom Width',
|
|
||||||
counterClockwise: 'Counter Clockwise',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
rate: 70,
|
|
||||||
currentRate1: 70,
|
|
||||||
currentRate2: 70,
|
|
||||||
currentRate3: 70,
|
|
||||||
currentRate4: 70,
|
|
||||||
gradientColor: {
|
|
||||||
'0%': '#3fecff',
|
|
||||||
'100%': '#6149f6',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
add() {
|
|
||||||
this.rate = format(this.rate + 20);
|
|
||||||
},
|
|
||||||
|
|
||||||
reduce() {
|
|
||||||
this.rate = format(this.rate - 20);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-circle {
|
|
||||||
.van-circle {
|
|
||||||
margin-left: @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-button {
|
|
||||||
margin: @padding-md 0 0 10px;
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
margin-left: @padding-md;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,186 +0,0 @@
|
|||||||
import { createNamespace, isObject, addUnit } from '../utils';
|
|
||||||
import { raf, cancelRaf } from '../utils/dom/raf';
|
|
||||||
import { BLUE, WHITE } from '../utils/constant';
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('circle');
|
|
||||||
|
|
||||||
const PERIMETER = 3140;
|
|
||||||
|
|
||||||
let uid = 0;
|
|
||||||
|
|
||||||
function format(rate) {
|
|
||||||
return Math.min(Math.max(rate, 0), 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getPath(clockwise, viewBoxSize) {
|
|
||||||
const sweepFlag = clockwise ? 1 : 0;
|
|
||||||
return `M ${viewBoxSize / 2} ${
|
|
||||||
viewBoxSize / 2
|
|
||||||
} m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
text: String,
|
|
||||||
strokeLinecap: String,
|
|
||||||
currentRate: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
speed: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 100,
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
type: String,
|
|
||||||
default: 'none',
|
|
||||||
},
|
|
||||||
rate: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 100,
|
|
||||||
},
|
|
||||||
layerColor: {
|
|
||||||
type: String,
|
|
||||||
default: WHITE,
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: [String, Object],
|
|
||||||
default: BLUE,
|
|
||||||
},
|
|
||||||
strokeWidth: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 40,
|
|
||||||
},
|
|
||||||
clockwise: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['update:currentRate'],
|
|
||||||
|
|
||||||
beforeCreate() {
|
|
||||||
this.uid = `van-circle-gradient-${uid++}`;
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
style() {
|
|
||||||
const size = addUnit(this.size);
|
|
||||||
return {
|
|
||||||
width: size,
|
|
||||||
height: size,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
path() {
|
|
||||||
return getPath(this.clockwise, this.viewBoxSize);
|
|
||||||
},
|
|
||||||
|
|
||||||
viewBoxSize() {
|
|
||||||
return +this.strokeWidth + 1000;
|
|
||||||
},
|
|
||||||
|
|
||||||
layerStyle() {
|
|
||||||
const offset = (PERIMETER * this.currentRate) / 100;
|
|
||||||
|
|
||||||
return {
|
|
||||||
stroke: `${this.color}`,
|
|
||||||
strokeWidth: `${+this.strokeWidth + 1}px`,
|
|
||||||
strokeLinecap: this.strokeLinecap,
|
|
||||||
strokeDasharray: `${offset}px ${PERIMETER}px`,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
hoverStyle() {
|
|
||||||
return {
|
|
||||||
fill: `${this.fill}`,
|
|
||||||
stroke: `${this.layerColor}`,
|
|
||||||
strokeWidth: `${this.strokeWidth}px`,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
gradient() {
|
|
||||||
return isObject(this.color);
|
|
||||||
},
|
|
||||||
|
|
||||||
LinearGradient() {
|
|
||||||
if (!this.gradient) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Stops = Object.keys(this.color)
|
|
||||||
.sort((a, b) => parseFloat(a) - parseFloat(b))
|
|
||||||
.map((key, index) => (
|
|
||||||
<stop key={index} offset={key} stop-color={this.color[key]} />
|
|
||||||
));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<defs>
|
|
||||||
<linearGradient id={this.uid} x1="100%" y1="0%" x2="0%" y2="0%">
|
|
||||||
{Stops}
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
rate: {
|
|
||||||
handler(rate) {
|
|
||||||
this.startTime = Date.now();
|
|
||||||
this.startRate = this.currentRate;
|
|
||||||
this.endRate = format(rate);
|
|
||||||
this.increase = this.endRate > this.startRate;
|
|
||||||
this.duration = Math.abs(
|
|
||||||
((this.startRate - this.endRate) * 1000) / this.speed
|
|
||||||
);
|
|
||||||
|
|
||||||
if (this.speed) {
|
|
||||||
cancelRaf(this.rafId);
|
|
||||||
this.rafId = raf(this.animate);
|
|
||||||
} else {
|
|
||||||
this.$emit('update:currentRate', this.endRate);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
animate() {
|
|
||||||
const now = Date.now();
|
|
||||||
const progress = Math.min((now - this.startTime) / this.duration, 1);
|
|
||||||
const rate = progress * (this.endRate - this.startRate) + this.startRate;
|
|
||||||
|
|
||||||
this.$emit('update:currentRate', format(parseFloat(rate.toFixed(1))));
|
|
||||||
|
|
||||||
if (this.increase ? rate < this.endRate : rate > this.endRate) {
|
|
||||||
this.rafId = raf(this.animate);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div class={bem()} style={this.style}>
|
|
||||||
<svg viewBox={`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}>
|
|
||||||
{this.LinearGradient}
|
|
||||||
<path class={bem('hover')} style={this.hoverStyle} d={this.path} />
|
|
||||||
<path
|
|
||||||
d={this.path}
|
|
||||||
class={bem('layer')}
|
|
||||||
style={this.layerStyle}
|
|
||||||
stroke={this.gradient ? `url(#${this.uid})` : this.color}
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
{this.$slots.default
|
|
||||||
? this.$slots.default()
|
|
||||||
: this.text && <div class={bem('text')}>{this.text}</div>}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-circle {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__layer {
|
|
||||||
fill: none;
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 @padding-base;
|
|
||||||
color: @circle-text-color;
|
|
||||||
font-weight: @circle-text-font-weight;
|
|
||||||
font-size: @circle-text-font-size;
|
|
||||||
line-height: @circle-text-line-height;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
|
||||||
</svg>
|
|
||||||
<div class="van-circle__text">70%</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
|
|
||||||
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 60px;"></path>
|
|
||||||
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
|
|
||||||
</svg>
|
|
||||||
<div class="van-circle__text">宽度定制</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__layer" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
|
||||||
</svg>
|
|
||||||
<div class="van-circle__text">颜色定制</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%">
|
|
||||||
<stop offset="0%" stop-color="#3fecff"></stop>
|
|
||||||
<stop offset="100%" stop-color="#6149f6"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__layer" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
|
||||||
</svg>
|
|
||||||
<div class="van-circle__text">渐变色</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__layer" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
|
||||||
</svg>
|
|
||||||
<div class="van-circle__text">逆时针</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__layer" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
|
|
||||||
</svg>
|
|
||||||
<div class="van-circle__text">大小定制</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">增加</span></div>
|
|
||||||
</button> <button class="van-button van-button--danger van-button--small">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">减少</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`size prop 1`] = `
|
|
||||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
|
|
||||||
</svg></div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`speed is 0 1`] = `
|
|
||||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
|
|
||||||
</svg></div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`stroke-linecap prop 1`] = `
|
|
||||||
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
|
|
||||||
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
|
|
||||||
</svg></div>
|
|
||||||
`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import Vue from 'vue';
|
|
||||||
import Circle from '..';
|
|
||||||
import { mount, later } from '../../../test';
|
|
||||||
|
|
||||||
test('speed is 0', async () => {
|
|
||||||
const wrapper = mount(Circle, {
|
|
||||||
propsData: {
|
|
||||||
rate: 50,
|
|
||||||
value: 0,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
input(value) {
|
|
||||||
Vue.nextTick(() => {
|
|
||||||
wrapper.setProps({ value });
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later();
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('animate', async () => {
|
|
||||||
const onInput = jest.fn();
|
|
||||||
mount(Circle, {
|
|
||||||
propsData: {
|
|
||||||
rate: 50,
|
|
||||||
speed: 100,
|
|
||||||
},
|
|
||||||
listeners: {
|
|
||||||
input: onInput,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later(50);
|
|
||||||
expect(onInput).toHaveBeenCalled();
|
|
||||||
expect(onInput.mock.calls[0][0]).not.toEqual(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('size prop', () => {
|
|
||||||
const wrapper = mount(Circle, {
|
|
||||||
propsData: {
|
|
||||||
size: 100,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('stroke-linecap prop', () => {
|
|
||||||
const wrapper = mount(Circle, {
|
|
||||||
propsData: {
|
|
||||||
strokeLinecap: 'square',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,119 +0,0 @@
|
|||||||
# Layout
|
|
||||||
|
|
||||||
### Intro
|
|
||||||
|
|
||||||
Quickly and easily create layouts with `van-row` and `van-col`
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Col, Row } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Col);
|
|
||||||
Vue.use(Row);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-row>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row>
|
|
||||||
<van-col span="4">span: 4</van-col>
|
|
||||||
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row>
|
|
||||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
|
||||||
</van-row>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Column Spacing
|
|
||||||
|
|
||||||
Set grid spacing using `gutter` attribute. The default value is 0
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
</van-row>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Flex Layout
|
|
||||||
|
|
||||||
Setting `type` to `flex` to enable flex layout
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-row type="flex">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row type="flex" justify="center">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row type="flex" justify="end">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row type="flex" justify="space-between">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row type="flex" justify="space-around">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Row Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| type | Layout type, can be set to `flex` | _string_ | - |
|
|
||||||
| gutter | Grid spacing（px） | _number \| string_ | - |
|
|
||||||
| tag | Custom element tag | _string_ | `div` |
|
|
||||||
| justify | Flex main axis，can be set to end/center/space-around/space-between | _string_ | `start` |
|
|
||||||
| align | Flex cross axis, be set to center/bottom | _string_ | `top` |
|
|
||||||
|
|
||||||
### Col Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| span | number of column the grid spans | _number \| string_ | - |
|
|
||||||
| offset | number of spacing on the left side of the grid | _number \| string_ | - |
|
|
||||||
| tag | Custom element tag | _string_ | `div` |
|
|
||||||
|
|
||||||
### Row Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| ----- | ------------------------ | -------------- |
|
|
||||||
| click | Triggered when click row | _event: Event_ |
|
|
||||||
|
|
||||||
### Col Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| ----- | ------------------------ | -------------- |
|
|
||||||
| click | Triggered when click col | _event: Event_ |
|
|
||||||
@ -1,124 +0,0 @@
|
|||||||
# Layout 布局
|
|
||||||
|
|
||||||
### 介绍
|
|
||||||
|
|
||||||
Layout 提供了`van-row`和`van-col`两个组件来进行行列布局
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Col, Row } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Col);
|
|
||||||
Vue.use(Row);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
|
|
||||||
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-row>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row>
|
|
||||||
<van-col span="4">span: 4</van-col>
|
|
||||||
<van-col span="10" offset="4">offset: 4, span: 10</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row>
|
|
||||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
|
||||||
</van-row>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 设置列元素间距
|
|
||||||
|
|
||||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
</van-row>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Flex 布局
|
|
||||||
|
|
||||||
将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- 左对齐 -->
|
|
||||||
<van-row type="flex">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<!-- 居中 -->
|
|
||||||
<van-row type="flex" justify="center">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<!-- 右对齐 -->
|
|
||||||
<van-row type="flex" justify="end">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<!-- 两端对齐 -->
|
|
||||||
<van-row type="flex" justify="space-between">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<!-- 每个元素的两侧间隔相等 -->
|
|
||||||
<van-row type="flex" justify="space-around">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Row Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| type | 布局方式，可选值为`flex` | _string_ | - |
|
|
||||||
| gutter | 列元素之间的间距（单位为 px） | _number \| string_ | - |
|
|
||||||
| tag | 自定义元素标签 | _string_ | `div` |
|
|
||||||
| justify | Flex 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
|
|
||||||
| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |
|
|
||||||
|
|
||||||
### Col Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| ------ | -------------- | ------------------ | ------ |
|
|
||||||
| span | 列元素宽度 | _number \| string_ | - |
|
|
||||||
| offset | 列元素偏移距离 | _number \| string_ | - |
|
|
||||||
| tag | 自定义元素标签 | _string_ | `div` |
|
|
||||||
|
|
||||||
### Row Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| ------ | ---------- | -------------- |
|
|
||||||
| click | 点击时触发 | _event: Event_ |
|
|
||||||
|
|
||||||
### Col Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| ------ | ---------- | -------------- |
|
|
||||||
| click | 点击时触发 | _event: Event_ |
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-row>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row>
|
|
||||||
<van-col span="4">span: 4</van-col>
|
|
||||||
<van-col span="10" offset="4">
|
|
||||||
offset: 4, span: 10
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row>
|
|
||||||
<van-col offset="12" span="12">
|
|
||||||
offset: 12, span: 12
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('title2')">
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
<van-col span="8">span: 8</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block v-if="!isWeapp" :title="t('title3')">
|
|
||||||
<van-row type="flex">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row type="flex" justify="center">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row type="flex" justify="end">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row type="flex" justify="space-between">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
|
|
||||||
<van-row type="flex" justify="space-around">
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
<van-col span="6">span: 6</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
title2: '在列元素之间增加间距',
|
|
||||||
title3: 'Flex 布局',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
title2: 'Column Spacing',
|
|
||||||
title3: 'Flex Layout',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-col {
|
|
||||||
background: @white;
|
|
||||||
|
|
||||||
.van-doc-demo-block {
|
|
||||||
padding: 0 @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-doc-demo-block__title {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-col {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: @white;
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 30px;
|
|
||||||
text-align: center;
|
|
||||||
background-clip: content-box;
|
|
||||||
|
|
||||||
&:nth-child(odd) {
|
|
||||||
background-color: #39a9ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(even) {
|
|
||||||
background-color: #66c6f2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
import { createNamespace } from '../utils';
|
|
||||||
import { ChildrenMixin } from '../mixins/relation';
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('col');
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
mixins: [ChildrenMixin('vanRow')],
|
|
||||||
|
|
||||||
props: {
|
|
||||||
span: [Number, String],
|
|
||||||
offset: [Number, String],
|
|
||||||
tag: {
|
|
||||||
type: String,
|
|
||||||
default: 'div',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['click'],
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
style() {
|
|
||||||
const { index } = this;
|
|
||||||
const { spaces } = this.parent || {};
|
|
||||||
|
|
||||||
if (spaces && spaces[index]) {
|
|
||||||
const { left, right } = spaces[index];
|
|
||||||
return {
|
|
||||||
paddingLeft: left ? `${left}px` : null,
|
|
||||||
paddingRight: right ? `${right}px` : null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onClick(event) {
|
|
||||||
this.$emit('click', event);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { span, offset } = this;
|
|
||||||
return (
|
|
||||||
<this.tag
|
|
||||||
style={this.style}
|
|
||||||
class={bem({ [span]: span, [`offset-${offset}`]: offset })}
|
|
||||||
onClick={this.onClick}
|
|
||||||
>
|
|
||||||
{this.$slots.default?.()}
|
|
||||||
</this.tag>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-col {
|
|
||||||
float: left;
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-height: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.generate-col(24);
|
|
||||||
.generate-col(@n, @i: 1) when (@i =< @n) {
|
|
||||||
.van-col--@{i} {
|
|
||||||
width: @i * 100% / 24;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-col--offset-@{i} {
|
|
||||||
margin-left: @i * 100% / 24;
|
|
||||||
}
|
|
||||||
|
|
||||||
.generate-col(@n, (@i + 1));
|
|
||||||
}
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--8">span: 8</div>
|
|
||||||
<div class="van-col van-col--8">span: 8</div>
|
|
||||||
<div class="van-col van-col--8">span: 8</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--4">span: 4</div>
|
|
||||||
<div class="van-col van-col--10 van-col--offset-4">
|
|
||||||
offset: 4, span: 10
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--12 van-col--offset-12">
|
|
||||||
offset: 12, span: 12
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-row van-row--flex">
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-row van-row--flex van-row--justify-center">
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-row van-row--flex van-row--justify-end">
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-row van-row--flex van-row--justify-space-between">
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-row van-row--flex van-row--justify-space-around">
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
<div class="van-col van-col--6">span: 6</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`gutter prop 1`] = `
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--24">24</div>
|
|
||||||
<div class="van-col van-col--12" style="padding-right: 12px;">12</div>
|
|
||||||
<div class="van-col van-col--12" style="padding-left: 12px;">12</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-right: 16px;">8</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 16px;">8</div>
|
|
||||||
<div class="van-col van-col--6" style="padding-right: 18px;">6</div>
|
|
||||||
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
|
||||||
<div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
|
|
||||||
<div class="van-col van-col--6" style="padding-left: 18px;">6</div>
|
|
||||||
<div class="van-col van-col--7" style="padding-right: 18px;">7</div>
|
|
||||||
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
|
||||||
<div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
|
|
||||||
<div class="van-col van-col--4" style="padding-left: 18px;">4</div>
|
|
||||||
<div class="van-col van-col--3" style="padding-right: 12px;">3</div>
|
|
||||||
<div class="van-col van-col--2" style="padding-left: 12px;">2</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import Col from '..';
|
|
||||||
import Row from '../../row';
|
|
||||||
import { mount } from '../../../test';
|
|
||||||
|
|
||||||
test('Col click event', () => {
|
|
||||||
const wrapper = mount(Col);
|
|
||||||
wrapper.trigger('click');
|
|
||||||
|
|
||||||
expect(wrapper.emitted('click')).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Row click event', () => {
|
|
||||||
const wrapper = mount(Row);
|
|
||||||
wrapper.trigger('click');
|
|
||||||
|
|
||||||
expect(wrapper.emitted('click')).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('gutter prop', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-row gutter="24">
|
|
||||||
<van-col span="24">24</van-col>
|
|
||||||
|
|
||||||
<van-col span="12">12</van-col>
|
|
||||||
<van-col span="12">12</van-col>
|
|
||||||
|
|
||||||
<van-col span="8">8</van-col>
|
|
||||||
<van-col span="8">8</van-col>
|
|
||||||
<van-col span="8">8</van-col>
|
|
||||||
|
|
||||||
<van-col span="6">6</van-col>
|
|
||||||
<van-col span="6">6</van-col>
|
|
||||||
<van-col span="6">6</van-col>
|
|
||||||
<van-col span="6">6</van-col>
|
|
||||||
|
|
||||||
<van-col span="7">7</van-col>
|
|
||||||
<van-col span="6">6</van-col>
|
|
||||||
<van-col span="5">5</van-col>
|
|
||||||
<van-col span="4">4</van-col>
|
|
||||||
<van-col span="3">3</van-col>
|
|
||||||
<van-col span="2">2</van-col>
|
|
||||||
</van-row>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,165 +0,0 @@
|
|||||||
# CountDown
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { CountDown } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(CountDown);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down :time="time" />
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
time: 30 * 60 * 60 * 1000,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Format
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down :time="time" format="DD Day, HH:mm:ss" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Millisecond
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Style
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down :time="time">
|
|
||||||
<template v-slot="timeData">
|
|
||||||
<span class="block">{{ timeData.hours }}</span>
|
|
||||||
<span class="colon">:</span>
|
|
||||||
<span class="block">{{ timeData.minutes }}</span>
|
|
||||||
<span class="colon">:</span>
|
|
||||||
<span class="block">{{ timeData.seconds }}</span>
|
|
||||||
</template>
|
|
||||||
</van-count-down>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.colon {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 4px;
|
|
||||||
color: #ee0a24;
|
|
||||||
}
|
|
||||||
.block {
|
|
||||||
display: inline-block;
|
|
||||||
width: 22px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #ee0a24;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Manual Control
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down
|
|
||||||
ref="countDown"
|
|
||||||
millisecond
|
|
||||||
:time="3000"
|
|
||||||
:auto-start="false"
|
|
||||||
format="ss:SSS"
|
|
||||||
@finish="finish"
|
|
||||||
/>
|
|
||||||
<van-grid clickable :column-num="3">
|
|
||||||
<van-grid-item text="Start" icon="play-circle-o" @click="start" />
|
|
||||||
<van-grid-item text="Pause" icon="pause-circle-o" @click="pause" />
|
|
||||||
<van-grid-item text="Reset" icon="replay" @click="reset" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { Toast } from 'vant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
start() {
|
|
||||||
this.$refs.countDown.start();
|
|
||||||
},
|
|
||||||
pause() {
|
|
||||||
this.$refs.countDown.pause();
|
|
||||||
},
|
|
||||||
reset() {
|
|
||||||
this.$refs.countDown.reset();
|
|
||||||
},
|
|
||||||
finish() {
|
|
||||||
Toast('Finished');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| time | Total time | _number \| string_ | `0` |
|
|
||||||
| format | Time format | _string_ | `HH:mm:ss` |
|
|
||||||
| auto-start | Whether to auto start count down | _boolean_ | `true` |
|
|
||||||
| millisecond | Whether to enable millisecond render | _boolean_ | `false` |
|
|
||||||
|
|
||||||
### Available formats
|
|
||||||
|
|
||||||
| Format | Description |
|
|
||||||
| ------ | --------------------- |
|
|
||||||
| DD | Day |
|
|
||||||
| HH | Hour |
|
|
||||||
| mm | Minute |
|
|
||||||
| ss | Second |
|
|
||||||
| S | Millisecond, 1-digit |
|
|
||||||
| SS | Millisecond, 2-digits |
|
|
||||||
| SSS | Millisecond, 3-digits |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| --------------- | ---------------------------------- | -------------------- |
|
|
||||||
| finish | Triggered when count down finished | - |
|
|
||||||
| change `v2.4.4` | Triggered when count down changed | _timeData: TimeData_ |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| Name | Description | SlotProps |
|
|
||||||
| ------- | -------------- | -------------------- |
|
|
||||||
| default | Custom Content | _timeData: TimeData_ |
|
|
||||||
|
|
||||||
### TimeData Structure
|
|
||||||
|
|
||||||
| Name | Description | Type |
|
|
||||||
| ------------ | ------------------- | -------- |
|
|
||||||
| days | Remain days | _number_ |
|
|
||||||
| hours | Remain hours | _number_ |
|
|
||||||
| minutes | Remain minutes | _number_ |
|
|
||||||
| seconds | Remain seconds | _number_ |
|
|
||||||
| milliseconds | Remain milliseconds | _number_ |
|
|
||||||
|
|
||||||
### Methods
|
|
||||||
|
|
||||||
Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods
|
|
||||||
|
|
||||||
| Name | Description | Attribute | Return value |
|
|
||||||
| ----- | ---------------- | --------- | ------------ |
|
|
||||||
| start | Start count down | - | - |
|
|
||||||
| pause | Pause count down | - | - |
|
|
||||||
| reset | Reset count down | - | - |
|
|
||||||
@ -1,183 +0,0 @@
|
|||||||
# CountDown 倒计时
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { CountDown } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(CountDown);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
`time`属性表示倒计时总时长，单位为毫秒
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down :time="time" />
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
time: 30 * 60 * 60 * 1000,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义格式
|
|
||||||
|
|
||||||
通过`format`属性设置倒计时文本的内容
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 毫秒级渲染
|
|
||||||
|
|
||||||
倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义样式
|
|
||||||
|
|
||||||
通过插槽自定义倒计时的样式，`timeData`对象格式见下方表格
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down :time="time">
|
|
||||||
<template v-slot="timeData">
|
|
||||||
<span class="block">{{ timeData.hours }}</span>
|
|
||||||
<span class="colon">:</span>
|
|
||||||
<span class="block">{{ timeData.minutes }}</span>
|
|
||||||
<span class="colon">:</span>
|
|
||||||
<span class="block">{{ timeData.seconds }}</span>
|
|
||||||
</template>
|
|
||||||
</van-count-down>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.colon {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 4px;
|
|
||||||
color: #ee0a24;
|
|
||||||
}
|
|
||||||
.block {
|
|
||||||
display: inline-block;
|
|
||||||
width: 22px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #ee0a24;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 手动控制
|
|
||||||
|
|
||||||
通过 ref 获取到组件实例后，可以调用`start`、`pause`、`reset`方法
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-count-down
|
|
||||||
ref="countDown"
|
|
||||||
millisecond
|
|
||||||
:time="3000"
|
|
||||||
:auto-start="false"
|
|
||||||
format="ss:SSS"
|
|
||||||
@finish="finish"
|
|
||||||
/>
|
|
||||||
<van-grid clickable>
|
|
||||||
<van-grid-item text="开始" icon="play-circle-o" @click="start" />
|
|
||||||
<van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
|
|
||||||
<van-grid-item text="重置" icon="replay" @click="reset" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { Toast } from 'vant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
start() {
|
|
||||||
this.$refs.countDown.start();
|
|
||||||
},
|
|
||||||
pause() {
|
|
||||||
this.$refs.countDown.pause();
|
|
||||||
},
|
|
||||||
reset() {
|
|
||||||
this.$refs.countDown.reset();
|
|
||||||
},
|
|
||||||
finish() {
|
|
||||||
Toast('倒计时结束');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| ----------- | -------------------- | ------------------ | ---------- |
|
|
||||||
| time | 倒计时时长，单位毫秒 | _number \| string_ | `0` |
|
|
||||||
| format | 时间格式 | _string_ | `HH:mm:ss` |
|
|
||||||
| auto-start | 是否自动开始倒计时 | _boolean_ | `true` |
|
|
||||||
| millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` |
|
|
||||||
|
|
||||||
### format 格式
|
|
||||||
|
|
||||||
| 格式 | 说明 |
|
|
||||||
| ---- | ------------ |
|
|
||||||
| DD | 天数 |
|
|
||||||
| HH | 小时 |
|
|
||||||
| mm | 分钟 |
|
|
||||||
| ss | 秒数 |
|
|
||||||
| S | 毫秒（1 位） |
|
|
||||||
| SS | 毫秒（2 位） |
|
|
||||||
| SSS | 毫秒（3 位） |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| --------------- | ---------------- | -------------------- |
|
|
||||||
| finish | 倒计时结束时触发 | - |
|
|
||||||
| change `v2.4.4` | 倒计时变化时触发 | _timeData: TimeData_ |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| 名称 | 说明 | SlotProps |
|
|
||||||
| ------- | ---------- | -------------------- |
|
|
||||||
| default | 自定义内容 | _timeData: TimeData_ |
|
|
||||||
|
|
||||||
### TimeData 格式
|
|
||||||
|
|
||||||
| 名称 | 说明 | 类型 |
|
|
||||||
| ------------ | -------- | -------- |
|
|
||||||
| days | 剩余天数 | _number_ |
|
|
||||||
| hours | 剩余小时 | _number_ |
|
|
||||||
| minutes | 剩余分钟 | _number_ |
|
|
||||||
| seconds | 剩余秒数 | _number_ |
|
|
||||||
| milliseconds | 剩余毫秒 | _number_ |
|
|
||||||
|
|
||||||
### 方法
|
|
||||||
|
|
||||||
通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
|
||||||
|
|
||||||
| 方法名 | 说明 | 参数 | 返回值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| start | 开始倒计时 | - | - |
|
|
||||||
| pause | 暂停倒计时 | - | - |
|
|
||||||
| reset | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | - | - |
|
|
||||||
|
|
||||||
## 常见问题
|
|
||||||
|
|
||||||
### 在 iOS 系统上倒计时不生效？
|
|
||||||
|
|
||||||
如果你遇到了在 iOS 上倒计时不生效的问题，请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是`new Date('2020/01/01')`。
|
|
||||||
|
|
||||||
对此问题的详细解释：[stackoverflow](https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios)。
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-count-down :time="time" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customFormat')">
|
|
||||||
<van-count-down :time="time" :format="t('formatWithDay')" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('millisecond')">
|
|
||||||
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customStyle')">
|
|
||||||
<van-count-down :time="time">
|
|
||||||
<template v-slot="currentTime">
|
|
||||||
<div>
|
|
||||||
<span class="block">{{ currentTime.hours }}</span>
|
|
||||||
<span class="colon">:</span>
|
|
||||||
<span class="block">{{ currentTime.minutes }}</span>
|
|
||||||
<span class="colon">:</span>
|
|
||||||
<span class="block">{{ currentTime.seconds }}</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</van-count-down>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('manualControl')">
|
|
||||||
<van-count-down
|
|
||||||
ref="countDown"
|
|
||||||
millisecond
|
|
||||||
:time="3000"
|
|
||||||
:auto-start="false"
|
|
||||||
format="ss:SSS"
|
|
||||||
@finish="$toast(t('finished'))"
|
|
||||||
/>
|
|
||||||
<van-grid clickable :column-num="3">
|
|
||||||
<van-grid-item icon="play-circle-o" :text="t('start')" @click="start" />
|
|
||||||
<van-grid-item
|
|
||||||
icon="pause-circle-o"
|
|
||||||
:text="t('pause')"
|
|
||||||
@click="pause"
|
|
||||||
/>
|
|
||||||
<van-grid-item icon="replay" :text="t('reset')" @click="reset" />
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
millisecond: '毫秒级渲染',
|
|
||||||
customStyle: '自定义样式',
|
|
||||||
customFormat: '自定义格式',
|
|
||||||
manualControl: '手动控制',
|
|
||||||
formatWithDay: 'DD 天 HH 时 mm 分 ss 秒',
|
|
||||||
reset: '重置',
|
|
||||||
pause: '暂停',
|
|
||||||
start: '开始',
|
|
||||||
finished: '倒计时结束',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
millisecond: 'Millisecond',
|
|
||||||
customStyle: 'Custom Style',
|
|
||||||
customFormat: 'Custom Format',
|
|
||||||
manualControl: 'Manual Control',
|
|
||||||
formatWithDay: 'DD Day, HH:mm:ss',
|
|
||||||
reset: 'Reset',
|
|
||||||
pause: 'Pause',
|
|
||||||
start: 'Start',
|
|
||||||
finished: 'Finished',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
time: 30 * 60 * 60 * 1000,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
start() {
|
|
||||||
this.$refs.countDown.start();
|
|
||||||
},
|
|
||||||
|
|
||||||
pause() {
|
|
||||||
this.$refs.countDown.pause();
|
|
||||||
},
|
|
||||||
|
|
||||||
reset() {
|
|
||||||
this.$refs.countDown.reset();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-count-down {
|
|
||||||
background-color: @white;
|
|
||||||
|
|
||||||
.van-count-down {
|
|
||||||
margin-left: @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.colon {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 4px;
|
|
||||||
color: @red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block {
|
|
||||||
display: inline-block;
|
|
||||||
width: 22px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
background-color: @red;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-grid {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
import { createNamespace } from '../utils';
|
|
||||||
import { raf, cancelRaf } from '../utils/dom/raf';
|
|
||||||
import { isSameSecond, parseTimeData, parseFormat } from './utils';
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('count-down');
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
millisecond: Boolean,
|
|
||||||
time: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
type: String,
|
|
||||||
default: 'HH:mm:ss',
|
|
||||||
},
|
|
||||||
autoStart: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['change', 'finish'],
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
remain: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
timeData() {
|
|
||||||
return parseTimeData(this.remain);
|
|
||||||
},
|
|
||||||
|
|
||||||
formattedTime() {
|
|
||||||
return parseFormat(this.format, this.timeData);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
time: {
|
|
||||||
immediate: true,
|
|
||||||
handler() {
|
|
||||||
this.reset();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
activated() {
|
|
||||||
if (this.keepAlivePaused) {
|
|
||||||
this.counting = true;
|
|
||||||
this.keepAlivePaused = false;
|
|
||||||
this.tick();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
deactivated() {
|
|
||||||
if (this.counting) {
|
|
||||||
this.pause();
|
|
||||||
this.keepAlivePaused = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeDestroy() {
|
|
||||||
this.pause();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
// @exposed-api
|
|
||||||
start() {
|
|
||||||
if (this.counting) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.counting = true;
|
|
||||||
this.endTime = Date.now() + this.remain;
|
|
||||||
this.tick();
|
|
||||||
},
|
|
||||||
|
|
||||||
// @exposed-api
|
|
||||||
pause() {
|
|
||||||
this.counting = false;
|
|
||||||
cancelRaf(this.rafId);
|
|
||||||
},
|
|
||||||
|
|
||||||
// @exposed-api
|
|
||||||
reset() {
|
|
||||||
this.pause();
|
|
||||||
this.remain = +this.time;
|
|
||||||
|
|
||||||
if (this.autoStart) {
|
|
||||||
this.start();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
tick() {
|
|
||||||
if (this.millisecond) {
|
|
||||||
this.microTick();
|
|
||||||
} else {
|
|
||||||
this.macroTick();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
microTick() {
|
|
||||||
this.rafId = raf(() => {
|
|
||||||
/* istanbul ignore if */
|
|
||||||
// in case of call reset immediately after finish
|
|
||||||
if (!this.counting) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setRemain(this.getRemain());
|
|
||||||
|
|
||||||
if (this.remain > 0) {
|
|
||||||
this.microTick();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
macroTick() {
|
|
||||||
this.rafId = raf(() => {
|
|
||||||
/* istanbul ignore if */
|
|
||||||
// in case of call reset immediately after finish
|
|
||||||
if (!this.counting) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const remain = this.getRemain();
|
|
||||||
|
|
||||||
if (!isSameSecond(remain, this.remain) || remain === 0) {
|
|
||||||
this.setRemain(remain);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.remain > 0) {
|
|
||||||
this.macroTick();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
getRemain() {
|
|
||||||
return Math.max(this.endTime - Date.now(), 0);
|
|
||||||
},
|
|
||||||
|
|
||||||
setRemain(remain) {
|
|
||||||
this.remain = remain;
|
|
||||||
this.$emit('change', this.timeData);
|
|
||||||
|
|
||||||
if (remain === 0) {
|
|
||||||
this.pause();
|
|
||||||
this.$emit('finish');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div class={bem()}>
|
|
||||||
{this.$slots.default
|
|
||||||
? this.$slots.default(this.timeData)
|
|
||||||
: this.formattedTime}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-count-down {
|
|
||||||
color: @count-down-text-color;
|
|
||||||
font-size: @count-down-font-size;
|
|
||||||
line-height: @count-down-line-height;
|
|
||||||
}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`complete format prop 1`] = `<div class="van-count-down">01-05-59-59-999</div>`;
|
|
||||||
|
|
||||||
exports[`disable auto-start prop 1`] = `<div class="van-count-down">100</div>`;
|
|
||||||
|
|
||||||
exports[`incomplate format prop 1`] = `<div class="van-count-down">29-59-59-999</div>`;
|
|
||||||
|
|
||||||
exports[`milliseconds format S 1`] = `<div class="van-count-down">01-5</div>`;
|
|
||||||
|
|
||||||
exports[`milliseconds format SS 1`] = `<div class="van-count-down">01-50</div>`;
|
|
||||||
@ -1,233 +0,0 @@
|
|||||||
import CountDown from '..';
|
|
||||||
import { mount, later } from '../../../test';
|
|
||||||
|
|
||||||
test('macro task finish event', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.emitted('finish')).toBeFalsy();
|
|
||||||
await later(50);
|
|
||||||
expect(wrapper.emitted('finish')).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('micro task finish event', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 1,
|
|
||||||
millisecond: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.emitted('finish')).toBeFalsy();
|
|
||||||
await later(50);
|
|
||||||
expect(wrapper.emitted('finish')).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('macro task re-render', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 1000,
|
|
||||||
format: 'SSS',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const prevSnapShot = wrapper.html();
|
|
||||||
await later(50);
|
|
||||||
const laterSnapShot = wrapper.html();
|
|
||||||
|
|
||||||
expect(prevSnapShot !== laterSnapShot).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('micro task re-render', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 100,
|
|
||||||
format: 'SSS',
|
|
||||||
millisecond: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const prevSnapShot = wrapper.html();
|
|
||||||
await later(50);
|
|
||||||
const laterSnapShot = wrapper.html();
|
|
||||||
|
|
||||||
expect(prevSnapShot !== laterSnapShot).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('disable auto-start prop', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 100,
|
|
||||||
format: 'SSS',
|
|
||||||
autoStart: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await later(50);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('start method', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 100,
|
|
||||||
format: 'SSS',
|
|
||||||
autoStart: false,
|
|
||||||
millisecond: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const prevSnapShot = wrapper.html();
|
|
||||||
|
|
||||||
wrapper.vm.start();
|
|
||||||
wrapper.vm.start();
|
|
||||||
|
|
||||||
await later(50);
|
|
||||||
|
|
||||||
const laterShapShot = wrapper.html();
|
|
||||||
|
|
||||||
expect(prevSnapShot !== laterShapShot).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('pause method', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 100,
|
|
||||||
format: 'SSS',
|
|
||||||
millisecond: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const prevSnapShot = wrapper.html();
|
|
||||||
wrapper.vm.pause();
|
|
||||||
await later(50);
|
|
||||||
const laterShapShot = wrapper.html();
|
|
||||||
|
|
||||||
expect(prevSnapShot === laterShapShot).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('reset method', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 100,
|
|
||||||
format: 'SSS',
|
|
||||||
millisecond: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const prevSnapShot = wrapper.html();
|
|
||||||
await later(50);
|
|
||||||
wrapper.vm.reset();
|
|
||||||
const laterShapShot = wrapper.html();
|
|
||||||
|
|
||||||
expect(prevSnapShot === laterShapShot).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('complete format prop', () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 30 * 60 * 60 * 1000 - 1,
|
|
||||||
autoStart: false,
|
|
||||||
format: 'DD-HH-mm-ss-SSS',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('milliseconds format SS', () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 1500,
|
|
||||||
autoStart: false,
|
|
||||||
format: 'ss-SS',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('milliseconds format S', () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 1500,
|
|
||||||
autoStart: false,
|
|
||||||
format: 'ss-S',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('incomplate format prop', () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 30 * 60 * 60 * 1000 - 1,
|
|
||||||
autoStart: false,
|
|
||||||
format: 'HH-mm-ss-SSS',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('pause when destroyed', () => {
|
|
||||||
const wrapper = mount(CountDown);
|
|
||||||
expect(wrapper.vm.counting).toBeTruthy();
|
|
||||||
wrapper.destroy();
|
|
||||||
expect(wrapper.vm.counting).toBeFalsy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('pause when deactivated', async () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<keep-alive>
|
|
||||||
<van-count-down v-if="render" ref="countDown" time="100" />
|
|
||||||
</keep-alive>
|
|
||||||
`,
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
render: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getCountDown() {
|
|
||||||
return this.$refs.countDown;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const countDown = wrapper.vm.getCountDown();
|
|
||||||
expect(countDown.counting).toBeTruthy();
|
|
||||||
|
|
||||||
wrapper.setData({ render: false });
|
|
||||||
expect(countDown.counting).toBeFalsy();
|
|
||||||
wrapper.setData({ render: true });
|
|
||||||
expect(countDown.counting).toBeTruthy();
|
|
||||||
|
|
||||||
countDown.pause();
|
|
||||||
wrapper.setData({ render: false });
|
|
||||||
wrapper.setData({ render: true });
|
|
||||||
expect(countDown.counting).toBeFalsy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('change event', async () => {
|
|
||||||
const wrapper = mount(CountDown, {
|
|
||||||
propsData: {
|
|
||||||
time: 1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper.emitted('change')).toBeFalsy();
|
|
||||||
await later(50);
|
|
||||||
expect(wrapper.emitted('change')[0][0]).toEqual({
|
|
||||||
days: 0,
|
|
||||||
hours: 0,
|
|
||||||
milliseconds: 0,
|
|
||||||
minutes: 0,
|
|
||||||
seconds: 0,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
import { padZero } from '../utils/format/string';
|
|
||||||
|
|
||||||
export type TimeData = {
|
|
||||||
days: number;
|
|
||||||
hours: number;
|
|
||||||
minutes: number;
|
|
||||||
seconds: number;
|
|
||||||
milliseconds: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
const SECOND = 1000;
|
|
||||||
const MINUTE = 60 * SECOND;
|
|
||||||
const HOUR = 60 * MINUTE;
|
|
||||||
const DAY = 24 * HOUR;
|
|
||||||
|
|
||||||
export function parseTimeData(time: number): TimeData {
|
|
||||||
const days = Math.floor(time / DAY);
|
|
||||||
const hours = Math.floor((time % DAY) / HOUR);
|
|
||||||
const minutes = Math.floor((time % HOUR) / MINUTE);
|
|
||||||
const seconds = Math.floor((time % MINUTE) / SECOND);
|
|
||||||
const milliseconds = Math.floor(time % SECOND);
|
|
||||||
|
|
||||||
return {
|
|
||||||
days,
|
|
||||||
hours,
|
|
||||||
minutes,
|
|
||||||
seconds,
|
|
||||||
milliseconds,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export function parseFormat(format: string, timeData: TimeData): string {
|
|
||||||
const { days } = timeData;
|
|
||||||
let { hours, minutes, seconds, milliseconds } = timeData;
|
|
||||||
|
|
||||||
if (format.indexOf('DD') === -1) {
|
|
||||||
hours += days * 24;
|
|
||||||
} else {
|
|
||||||
format = format.replace('DD', padZero(days));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (format.indexOf('HH') === -1) {
|
|
||||||
minutes += hours * 60;
|
|
||||||
} else {
|
|
||||||
format = format.replace('HH', padZero(hours));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (format.indexOf('mm') === -1) {
|
|
||||||
seconds += minutes * 60;
|
|
||||||
} else {
|
|
||||||
format = format.replace('mm', padZero(minutes));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (format.indexOf('ss') === -1) {
|
|
||||||
milliseconds += seconds * 1000;
|
|
||||||
} else {
|
|
||||||
format = format.replace('ss', padZero(seconds));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (format.indexOf('S') !== -1) {
|
|
||||||
const ms = padZero(milliseconds, 3);
|
|
||||||
|
|
||||||
if (format.indexOf('SSS') !== -1) {
|
|
||||||
format = format.replace('SSS', ms);
|
|
||||||
} else if (format.indexOf('SS') !== -1) {
|
|
||||||
format = format.replace('SS', ms.slice(0, 2));
|
|
||||||
} else {
|
|
||||||
format = format.replace('S', ms.charAt(0));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return format;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function isSameSecond(time1: number, time2: number): boolean {
|
|
||||||
return Math.floor(time1 / 1000) === Math.floor(time2 / 1000);
|
|
||||||
}
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
# Divider
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Divider } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Divider);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider />
|
|
||||||
```
|
|
||||||
|
|
||||||
### With Text
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider>Text</van-divider>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Content Position
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider content-position="left">Text</van-divider>
|
|
||||||
<van-divider content-position="right">Text</van-divider>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Dashed
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider dashed>Text</van-divider>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Style
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider
|
|
||||||
:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
|
|
||||||
>
|
|
||||||
Text
|
|
||||||
</van-divider>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| dashed | Whether to use dashed border | _boolean_ | `false` |
|
|
||||||
| hairline | Whether to use hairline | _boolean_ | `true` |
|
|
||||||
| content-position | Content position，can be set to `left` `right` | _string_ | `center` |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ------- | ----------- |
|
|
||||||
| default | content |
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
# Divider 分割线
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Divider } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Divider);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
默认渲染一条水平分割线
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 展示文字
|
|
||||||
|
|
||||||
通过插槽在可以分割线中间插入内容
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider>文字</van-divider>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 内容位置
|
|
||||||
|
|
||||||
通过`content-position`指定内容所在位置
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider content-position="left">文字</van-divider>
|
|
||||||
<van-divider content-position="right">文字</van-divider>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 虚线
|
|
||||||
|
|
||||||
添加`dashed`属性使分割线渲染为虚线
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider dashed>文字</van-divider>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义样式
|
|
||||||
|
|
||||||
可以直接通过`style`属性设置分割线的样式
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-divider
|
|
||||||
:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
|
|
||||||
>
|
|
||||||
文字
|
|
||||||
</van-divider>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| ---------------- | -------------------------------- | --------- | -------- |
|
|
||||||
| dashed | 是否使用虚线 | _boolean_ | `false` |
|
|
||||||
| hairline | 是否使用 0.5px 线 | _boolean_ | `true` |
|
|
||||||
| content-position | 内容位置，可选值为`left` `right` | _string_ | `center` |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
| ------- | ---- |
|
|
||||||
| default | 内容 |
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-divider />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('withText')">
|
|
||||||
<van-divider>
|
|
||||||
{{ t('text') }}
|
|
||||||
</van-divider>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('contentPosition')">
|
|
||||||
<van-divider content-position="left">
|
|
||||||
{{ t('text') }}
|
|
||||||
</van-divider>
|
|
||||||
|
|
||||||
<van-divider content-position="right">
|
|
||||||
{{ t('text') }}
|
|
||||||
</van-divider>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('dashed')">
|
|
||||||
<van-divider dashed :hairline="false">
|
|
||||||
{{ t('text') }}
|
|
||||||
</van-divider>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customStyle')">
|
|
||||||
<van-divider
|
|
||||||
:style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
|
|
||||||
>
|
|
||||||
{{ t('text') }}
|
|
||||||
</van-divider>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { BLUE } from '../../utils/constant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
text: '文本',
|
|
||||||
dashed: '虚线',
|
|
||||||
withText: '展示文本',
|
|
||||||
contentPosition: '内容位置',
|
|
||||||
customStyle: '自定义样式',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
text: 'Text',
|
|
||||||
dashed: 'Dashed',
|
|
||||||
withText: 'With Text',
|
|
||||||
contentPosition: 'Content Position',
|
|
||||||
customStyle: 'Custom Style',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
BLUE,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-divider {
|
|
||||||
background-color: @white;
|
|
||||||
|
|
||||||
.van-doc-demo-block__title {
|
|
||||||
padding-top: @padding-md;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-divider {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: @divider-margin;
|
|
||||||
color: @divider-text-color;
|
|
||||||
font-size: @divider-font-size;
|
|
||||||
line-height: @divider-line-height;
|
|
||||||
border-color: @divider-border-color;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
display: block;
|
|
||||||
flex: 1;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 1px;
|
|
||||||
border-color: inherit;
|
|
||||||
border-style: inherit;
|
|
||||||
border-width: @border-width-base 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
|
|
||||||
&--hairline {
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
transform: scaleY(0.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--dashed {
|
|
||||||
border-style: dashed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--content-center,
|
|
||||||
&--content-left,
|
|
||||||
&--content-right {
|
|
||||||
&::before {
|
|
||||||
margin-right: @divider-content-padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
margin-left: @divider-content-padding;
|
|
||||||
content: '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--content-left {
|
|
||||||
&::before {
|
|
||||||
max-width: @divider-content-left-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--content-right {
|
|
||||||
&::after {
|
|
||||||
max-width: @divider-content-right-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div role="separator" class="van-divider van-divider--hairline"></div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="separator" class="van-divider van-divider--hairline van-divider--content-center">
|
|
||||||
文本
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="separator" class="van-divider van-divider--hairline van-divider--content-left">
|
|
||||||
文本
|
|
||||||
</div>
|
|
||||||
<div role="separator" class="van-divider van-divider--hairline van-divider--content-right">
|
|
||||||
文本
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="separator" class="van-divider van-divider--dashed van-divider--content-center">
|
|
||||||
文本
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div role="separator" class="van-divider van-divider--hairline van-divider--content-center" style="border-color: #1989fa; color: rgb(25, 137, 250); padding: 0px 16px;">
|
|
||||||
文本
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
# Empty
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Empty } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Empty);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-empty description="Description" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Image Type
|
|
||||||
|
|
||||||
Use the image prop to display different placeholder images
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- Error -->
|
|
||||||
<van-empty image="error" description="Description" />
|
|
||||||
<!-- Network -->
|
|
||||||
<van-empty image="network" description="Description" />
|
|
||||||
<!-- Search -->
|
|
||||||
<van-empty image="search" description="Description" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Image
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-empty
|
|
||||||
class="custom-image"
|
|
||||||
image="https://img.yzcdn.cn/vant/leaf.jpg"
|
|
||||||
description="Description"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.custom-image img {
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Bottom Content
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-empty description="Description">
|
|
||||||
<van-button round type="danger" class="bottom-button">
|
|
||||||
Button
|
|
||||||
</van-button>
|
|
||||||
</van-empty>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bottom-button {
|
|
||||||
width: 160px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` |
|
|
||||||
| description | Desciption | _string_ | - |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ----------- | --------------------- |
|
|
||||||
| default | Custom bottom content |
|
|
||||||
| image | Custom image |
|
|
||||||
| description | Custom description |
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
# Empty 空状态
|
|
||||||
|
|
||||||
### 介绍
|
|
||||||
|
|
||||||
空状态时的占位提示，2.6 版本开始支持此组件
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Empty } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Empty);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-empty description="描述文字" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 图片类型
|
|
||||||
|
|
||||||
Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- 通用错误 -->
|
|
||||||
<van-empty image="error" description="描述文字" />
|
|
||||||
<!-- 网络错误 -->
|
|
||||||
<van-empty image="network" description="描述文字" />
|
|
||||||
<!-- 搜索提示 -->
|
|
||||||
<van-empty image="search" description="描述文字" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义图片
|
|
||||||
|
|
||||||
需要自定义图片时，可以在 image 属性中传入任意图片 URL
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-empty
|
|
||||||
class="custom-image"
|
|
||||||
image="https://img.yzcdn.cn/vant/custom-empty-image.png"
|
|
||||||
description="描述文字"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.custom-image .van-empty__image {
|
|
||||||
width: 90px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 底部内容
|
|
||||||
|
|
||||||
通过默认插槽可以在 Empty 组件的下方插入内容
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-empty description="描述文字">
|
|
||||||
<van-button round type="danger" class="bottom-button">
|
|
||||||
按钮
|
|
||||||
</van-button>
|
|
||||||
</van-empty>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.bottom-button {
|
|
||||||
width: 160px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
|
|
||||||
| description | 图片下方的描述文字 | _string_ | - |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
| ----------- | -------------- |
|
|
||||||
| default | 自定义底部内容 |
|
|
||||||
| image | 自定义图标 |
|
|
||||||
| description | 自定义描述文字 |
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-empty :description="t('description')" />
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('imageType')">
|
|
||||||
<van-tabs v-model="active">
|
|
||||||
<van-tab name="error" :title="t('error')">
|
|
||||||
<van-empty image="error" :description="t('description')" />
|
|
||||||
</van-tab>
|
|
||||||
<van-tab name="network" :title="t('network')">
|
|
||||||
<van-empty image="network" :description="t('description')" />
|
|
||||||
</van-tab>
|
|
||||||
<van-tab name="search" :title="t('search')">
|
|
||||||
<van-empty image="search" :description="t('description')" />
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customImage')">
|
|
||||||
<van-empty
|
|
||||||
class="custom-image"
|
|
||||||
image="https://img.yzcdn.cn/vant/custom-empty-image.png"
|
|
||||||
:description="t('description')"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('bottomContent')">
|
|
||||||
<van-empty :description="t('description')">
|
|
||||||
<van-button round type="danger" class="bottom-button">
|
|
||||||
{{ t('button') }}
|
|
||||||
</van-button>
|
|
||||||
</van-empty>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
error: '通用错误',
|
|
||||||
search: '搜索提示',
|
|
||||||
network: '网络错误',
|
|
||||||
imageType: '图片类型',
|
|
||||||
description: '描述文字',
|
|
||||||
customImage: '自定义图片',
|
|
||||||
bottomContent: '底部内容',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
error: 'Error',
|
|
||||||
search: 'Search',
|
|
||||||
network: 'Network',
|
|
||||||
imageType: 'Image Type',
|
|
||||||
description: 'Description',
|
|
||||||
customImage: 'Custom Image',
|
|
||||||
bottomContent: 'Bottom Content',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
active: 'error',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-empty {
|
|
||||||
background: @white;
|
|
||||||
|
|
||||||
.custom-image {
|
|
||||||
.van-empty__image {
|
|
||||||
width: 90px;
|
|
||||||
height: 90px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-button {
|
|
||||||
width: 160px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
import { createNamespace } from '../utils';
|
|
||||||
import Network from './Network';
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('empty');
|
|
||||||
|
|
||||||
const PRESETS = ['error', 'search', 'default'];
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
description: String,
|
|
||||||
image: {
|
|
||||||
type: String,
|
|
||||||
default: 'default',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
genImageContent() {
|
|
||||||
const slots = this.$slots.image?.();
|
|
||||||
|
|
||||||
if (slots) {
|
|
||||||
return slots;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.image === 'network') {
|
|
||||||
return <Network />;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { image } = this;
|
|
||||||
|
|
||||||
if (PRESETS.indexOf(image) !== -1) {
|
|
||||||
image = `https://img.yzcdn.cn/vant/empty-image-${image}.png`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return <img src={image} />;
|
|
||||||
},
|
|
||||||
|
|
||||||
genImage() {
|
|
||||||
return <div class={bem('image')}>{this.genImageContent()}</div>;
|
|
||||||
},
|
|
||||||
|
|
||||||
genDescription() {
|
|
||||||
const description = this.$slots.description
|
|
||||||
? this.slot.description()
|
|
||||||
: this.description;
|
|
||||||
|
|
||||||
if (description) {
|
|
||||||
return <p class={bem('description')}>{description}</p>;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
genBottom() {
|
|
||||||
const slot = this.$slots.default?.();
|
|
||||||
|
|
||||||
if (slot) {
|
|
||||||
return <div class={bem('bottom')}>{slot}</div>;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div class={bem()}>
|
|
||||||
{this.genImage()}
|
|
||||||
{this.genDescription()}
|
|
||||||
{this.genBottom()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-empty {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: @empty-padding;
|
|
||||||
|
|
||||||
&__image {
|
|
||||||
width: @empty-image-size;
|
|
||||||
height: @empty-image-size;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__description {
|
|
||||||
margin-top: @empty-description-margin-top;
|
|
||||||
padding: @empty-description-padding;
|
|
||||||
color: @empty-description-color;
|
|
||||||
font-size: @empty-description-font-size;
|
|
||||||
line-height: @empty-description-line-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bottom {
|
|
||||||
margin-top: @empty-bottom-margin-top;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="van-empty">
|
|
||||||
<div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
|
|
||||||
<p class="van-empty__description">描述文字</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-tabs van-tabs--line">
|
|
||||||
<div class="van-tabs__wrap van-hairline--top-bottom">
|
|
||||||
<div role="tablist" class="van-tabs__nav van-tabs__nav--line">
|
|
||||||
<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
|
|
||||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
|
|
||||||
<div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">搜索提示</span></div>
|
|
||||||
<div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-tabs__content">
|
|
||||||
<div role="tabpanel" class="van-tab__pane" style="">
|
|
||||||
<div class="van-empty">
|
|
||||||
<div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-error.png"></div>
|
|
||||||
<p class="van-empty__description">描述文字</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
<div role="tabpanel" class="van-tab__pane" style="display: none;">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="custom-image van-empty">
|
|
||||||
<div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/custom-empty-image.png"></div>
|
|
||||||
<p class="van-empty__description">描述文字</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-empty">
|
|
||||||
<div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
|
|
||||||
<p class="van-empty__description">描述文字</p>
|
|
||||||
<div class="van-empty__bottom"><button class="bottom-button van-button van-button--danger van-button--normal van-button--round">
|
|
||||||
<div class="van-button__content"><span class="van-button__text">
|
|
||||||
按钮
|
|
||||||
</span></div>
|
|
||||||
</button></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`bottom slot 1`] = `
|
|
||||||
<div class="van-empty">
|
|
||||||
<div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
|
|
||||||
<div class="van-empty__bottom">Custom bottom</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`description slot 1`] = `
|
|
||||||
<div class="van-empty">
|
|
||||||
<div class="van-empty__image"><img src="https://img.yzcdn.cn/vant/empty-image-default.png"></div>
|
|
||||||
<p class="van-empty__description">Custom description</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`image slot 1`] = `
|
|
||||||
<div class="van-empty">
|
|
||||||
<div class="van-empty__image">Custom Image</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render svg when image is network 1`] = `
|
|
||||||
<div class="van-empty">
|
|
||||||
<div class="van-empty__image"><svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="c" x1="64.022%" y1="100%" x2="64.022%" y2="0%">
|
|
||||||
<stop stop-color="#FFF" offset="0%" stop-opacity="0.5"></stop>
|
|
||||||
<stop stop-color="#F2F3F5" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="d" x1="64.022%" y1="96.956%" x2="64.022%" y2="0%">
|
|
||||||
<stop stop-color="#F2F3F5" offset="0%" stop-opacity="0.3"></stop>
|
|
||||||
<stop stop-color="#F2F3F5" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="h" x1="50%" y1="0%" x2="50%" y2="84.459%">
|
|
||||||
<stop stop-color="#EBEDF0" offset="0%"></stop>
|
|
||||||
<stop stop-color="#DCDEE0" offset="100%" stop-opacity="0"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="i" x1="100%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<stop stop-color="#EAEDF0" offset="0%"></stop>
|
|
||||||
<stop stop-color="#DCDEE0" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="k" x1="100%" y1="100%" x2="100%" y2="0%">
|
|
||||||
<stop stop-color="#EAEDF0" offset="0%"></stop>
|
|
||||||
<stop stop-color="#DCDEE0" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="m" x1="0%" y1="43.982%" x2="100%" y2="54.703%">
|
|
||||||
<stop stop-color="#EAEDF0" offset="0%"></stop>
|
|
||||||
<stop stop-color="#DCDEE0" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="n" x1="94.535%" y1="43.837%" x2="5.465%" y2="54.948%">
|
|
||||||
<stop stop-color="#EAEDF0" offset="0%"></stop>
|
|
||||||
<stop stop-color="#DCDEE0" offset="100%"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<radialGradient id="g" cx="50%" cy="0%" fx="50%" fy="0%" r="100%" gradientTransform="matrix(0 1 -.54835 0 .5 -.5)">
|
|
||||||
<stop stop-color="#EBEDF0" offset="0%"></stop>
|
|
||||||
<stop stop-color="#FFF" offset="100%" stop-opacity="0"></stop>
|
|
||||||
</radialGradient>
|
|
||||||
</defs>
|
|
||||||
<g fill="none" fill-rule="evenodd">
|
|
||||||
<g opacity=".8">
|
|
||||||
<path d="M0 124V46h20v20h14v58H0z" fill="url(#c)" transform="matrix(-1 0 0 1 36 7)"></path>
|
|
||||||
<path d="M40.5 5a8.504 8.504 0 018.13 6.009l.12-.005L49 11a8 8 0 11-1 15.938V27H34v-.174a6.5 6.5 0 11-1.985-12.808A8.5 8.5 0 0140.5 5z" fill="url(#d)" transform="translate(2 7)"></path>
|
|
||||||
<path d="M96.016 0a4.108 4.108 0 013.934 2.868l.179-.004c2.138 0 3.871 1.71 3.871 3.818 0 2.109-1.733 3.818-3.871 3.818-.164 0-.325-.01-.484-.03v.03h-6.774v-.083a3.196 3.196 0 01-.726.083C90.408 10.5 89 9.111 89 7.398c0-1.636 1.284-2.976 2.911-3.094a3.555 3.555 0 01-.008-.247c0-2.24 1.842-4.057 4.113-4.057z" fill="url(#d)" transform="translate(2 7)"></path>
|
|
||||||
<path d="M121 8h22.231v14H152v77.37h-31V8z" fill="url(#c)" transform="translate(2 7)"></path>
|
|
||||||
</g>
|
|
||||||
<path fill="url(#g)" d="M0 139h160v21H0z"></path>
|
|
||||||
<path d="M37 18a7 7 0 013 13.326v26.742c0 1.23-.997 2.227-2.227 2.227h-1.546A2.227 2.227 0 0134 58.068V31.326A7 7 0 0137 18z" fill="url(#h)" fill-rule="nonzero" transform="translate(43 36)"></path>
|
|
||||||
<g opacity=".6" stroke-linecap="round" stroke-width="7">
|
|
||||||
<path d="M20.875 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12" stroke="url(#i)" transform="translate(43 36)"></path>
|
|
||||||
<path d="M9.849 0C3.756 6.225 0 14.747 0 24.146c0 9.398 3.756 17.92 9.849 24.145" stroke="url(#i)" transform="translate(43 36)"></path>
|
|
||||||
<path d="M57.625 11.136a18.868 18.868 0 00-5.284 13.121c0 5.094 2.012 9.718 5.284 13.12" stroke="url(#k)" transform="rotate(-180 76.483 42.257)"></path>
|
|
||||||
<path d="M73.216 0c-6.093 6.225-9.849 14.747-9.849 24.146 0 9.398 3.756 17.92 9.849 24.145" stroke="url(#k)" transform="rotate(-180 89.791 42.146)"></path>
|
|
||||||
</g>
|
|
||||||
<g transform="translate(31 105)" fill-rule="nonzero">
|
|
||||||
<rect fill="url(#m)" width="98" height="34" rx="2"></rect>
|
|
||||||
<rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.114"></rect>
|
|
||||||
<rect fill="url(#n)" x="15" y="12" width="18" height="6" rx="1.114"></rect>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
import Empty from '..';
|
|
||||||
import { mount } from '../../../test';
|
|
||||||
|
|
||||||
test('image slot', () => {
|
|
||||||
const wrapper = mount(Empty, {
|
|
||||||
scopedSlots: {
|
|
||||||
image: () => 'Custom Image',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('description slot', () => {
|
|
||||||
const wrapper = mount(Empty, {
|
|
||||||
scopedSlots: {
|
|
||||||
description: () => 'Custom description',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('bottom slot', () => {
|
|
||||||
const wrapper = mount(Empty, {
|
|
||||||
scopedSlots: {
|
|
||||||
default: () => 'Custom bottom',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render svg when image is network', () => {
|
|
||||||
const wrapper = mount(Empty, {
|
|
||||||
propsData: {
|
|
||||||
image: 'network',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,151 +0,0 @@
|
|||||||
// Utils
|
|
||||||
import { createNamespace, addUnit } from '../utils';
|
|
||||||
import { BORDER } from '../utils/constant';
|
|
||||||
import { route, routeProps } from '../utils/router';
|
|
||||||
|
|
||||||
// Mixins
|
|
||||||
import { ChildrenMixin } from '../mixins/relation';
|
|
||||||
|
|
||||||
// Components
|
|
||||||
import Info from '../info';
|
|
||||||
import Icon from '../icon';
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('grid-item');
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
mixins: [ChildrenMixin('vanGrid')],
|
|
||||||
|
|
||||||
props: {
|
|
||||||
...routeProps,
|
|
||||||
dot: Boolean,
|
|
||||||
text: String,
|
|
||||||
icon: String,
|
|
||||||
iconPrefix: String,
|
|
||||||
badge: [Number, String],
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['click'],
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
style() {
|
|
||||||
const { square, gutter, columnNum } = this.parent;
|
|
||||||
const percent = `${100 / columnNum}%`;
|
|
||||||
|
|
||||||
const style = {
|
|
||||||
flexBasis: percent,
|
|
||||||
};
|
|
||||||
|
|
||||||
if (square) {
|
|
||||||
style.paddingTop = percent;
|
|
||||||
} else if (gutter) {
|
|
||||||
const gutterValue = addUnit(gutter);
|
|
||||||
style.paddingRight = gutterValue;
|
|
||||||
|
|
||||||
if (this.index >= columnNum) {
|
|
||||||
style.marginTop = gutterValue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return style;
|
|
||||||
},
|
|
||||||
|
|
||||||
contentStyle() {
|
|
||||||
const { square, gutter } = this.parent;
|
|
||||||
|
|
||||||
if (square && gutter) {
|
|
||||||
const gutterValue = addUnit(gutter);
|
|
||||||
|
|
||||||
return {
|
|
||||||
right: gutterValue,
|
|
||||||
bottom: gutterValue,
|
|
||||||
height: 'auto',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onClick(event) {
|
|
||||||
this.$emit('click', event);
|
|
||||||
route(this.$router, this);
|
|
||||||
},
|
|
||||||
|
|
||||||
genIcon() {
|
|
||||||
if (this.$slots.icon) {
|
|
||||||
return (
|
|
||||||
<div class={bem('icon-wrapper')}>
|
|
||||||
{this.$slots.icon()}
|
|
||||||
<Info dot={this.dot} info={this.badge} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.icon) {
|
|
||||||
return (
|
|
||||||
<Icon
|
|
||||||
name={this.icon}
|
|
||||||
dot={this.dot}
|
|
||||||
info={this.badge}
|
|
||||||
size={this.parent.iconSize}
|
|
||||||
class={bem('icon')}
|
|
||||||
classPrefix={this.iconPrefix}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getText() {
|
|
||||||
if (this.$slots.text) {
|
|
||||||
return this.$slots.text();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.text) {
|
|
||||||
return <span class={bem('text')}>{this.text}</span>;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
genContent() {
|
|
||||||
if (this.$slots.default) {
|
|
||||||
return this.$slots.default();
|
|
||||||
}
|
|
||||||
|
|
||||||
return [this.genIcon(), this.getText()];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
center,
|
|
||||||
border,
|
|
||||||
square,
|
|
||||||
gutter,
|
|
||||||
direction,
|
|
||||||
clickable,
|
|
||||||
} = this.parent;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={[bem({ square })]} style={this.style}>
|
|
||||||
<div
|
|
||||||
style={this.contentStyle}
|
|
||||||
role={clickable ? 'button' : null}
|
|
||||||
tabindex={clickable ? 0 : null}
|
|
||||||
class={[
|
|
||||||
bem('content', [
|
|
||||||
direction,
|
|
||||||
{
|
|
||||||
center,
|
|
||||||
square,
|
|
||||||
clickable,
|
|
||||||
surround: border && gutter,
|
|
||||||
},
|
|
||||||
]),
|
|
||||||
{ [BORDER]: border },
|
|
||||||
]}
|
|
||||||
onClick={this.onClick}
|
|
||||||
>
|
|
||||||
{this.genContent()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,78 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-grid-item {
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&--square {
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
font-size: @grid-item-icon-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
color: @grid-item-text-color;
|
|
||||||
font-size: @grid-item-text-font-size;
|
|
||||||
line-height: 1.5;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon + &__text {
|
|
||||||
margin-top: @padding-xs;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 100%;
|
|
||||||
padding: @grid-item-content-padding;
|
|
||||||
background-color: @grid-item-content-background-color;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
z-index: 1;
|
|
||||||
border-width: 0 @border-width-base @border-width-base 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--square {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--center {
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--horizontal {
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.van-grid-item__icon + .van-grid-item__text {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-left: @padding-xs;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--surround {
|
|
||||||
&::after {
|
|
||||||
border-width: @border-width-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: @grid-item-content-active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
# Grid
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Grid, GridItem } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Grid);
|
|
||||||
Vue.use(GridItem);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid>
|
|
||||||
<van-grid-item icon="photo-o" text="Text" />
|
|
||||||
<van-grid-item icon="photo-o" text="Text" />
|
|
||||||
<van-grid-item icon="photo-o" text="Text" />
|
|
||||||
<van-grid-item icon="photo-o" text="Text" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Column Num
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid :column-num="3">
|
|
||||||
<van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="Text" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Custom Content
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid :border="false" :column-num="3">
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
|
|
||||||
</van-grid-item>
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Square
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid square>
|
|
||||||
<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Gutter
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid :gutter="10">
|
|
||||||
<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Horizontal
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid direction="horizontal" :column-num="2">
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Route
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid clickable :column-num="2">
|
|
||||||
<van-grid-item icon="home-o" text="Vue Router" to="/" />
|
|
||||||
<van-grid-item icon="search" text="URL" url="/vant/mobile.html" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Show Badge
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid :column-num="2">
|
|
||||||
<van-grid-item icon="home-o" text="Text" dot />
|
|
||||||
<van-grid-item icon="search" text="Text" badge="99+" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Grid Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| column-num `v2.0.4` | Column Num | _number \| string_ | `4` |
|
|
||||||
| icon-size `v2.2.6` | Icon size | _number \| string_ | `28px` |
|
|
||||||
| gutter | Gutter | _number \| string_ | `0` |
|
|
||||||
| border | Whether to show border | _boolean_ | `true` |
|
|
||||||
| center | Whether to center content | _boolean_ | `true` |
|
|
||||||
| square | Whether to be square shape | _boolean_ | `false` |
|
|
||||||
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
|
|
||||||
| direction `v2.8.2` | Content arrangement direction, can be set to `horizontal` | _string_ | `vertical` |
|
|
||||||
|
|
||||||
### GridItem Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| text | Text | _string_ | - |
|
|
||||||
| icon | Icon name or URL | _string_ | - |
|
|
||||||
| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
|
|
||||||
| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` |
|
|
||||||
| badge `v2.5.6` | Content of the badge | _number \| string_ | - |
|
|
||||||
| url | Link URL | _string_ | - |
|
|
||||||
| to | Target route of the link, same as to of vue-router | _string \| object_ | - |
|
|
||||||
| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
|
|
||||||
|
|
||||||
### GridItem Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| ----- | ---------------------- | -------------- |
|
|
||||||
| click | Triggered when clicked | _event: Event_ |
|
|
||||||
|
|
||||||
### GridItem Slots
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ------- | -------------- |
|
|
||||||
| default | Custom content |
|
|
||||||
| icon | Custom icon |
|
|
||||||
| text | Custom text |
|
|
||||||
@ -1,155 +0,0 @@
|
|||||||
# Grid 宫格
|
|
||||||
|
|
||||||
### 介绍
|
|
||||||
|
|
||||||
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Grid, GridItem } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Grid);
|
|
||||||
Vue.use(GridItem);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
通过`icon`属性设置格子内的图标，`text`属性设置文字内容
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid>
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义列数
|
|
||||||
|
|
||||||
默认一行展示四个格子，可以通过`column-num`自定义列数
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid :column-num="3">
|
|
||||||
<van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义内容
|
|
||||||
|
|
||||||
通过插槽可以自定义格子展示的内容
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid :border="false" :column-num="3">
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
|
|
||||||
</van-grid-item>
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 正方形格子
|
|
||||||
|
|
||||||
设置`square`属性后，格子的高度会和宽度保持一致
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid square>
|
|
||||||
<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 格子间距
|
|
||||||
|
|
||||||
通过`gutter`属性设置格子之间的距离
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid :gutter="10">
|
|
||||||
<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 内容横排
|
|
||||||
|
|
||||||
将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid direction="horizontal" :column-num="2">
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
<van-grid-item icon="photo-o" text="文字" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 页面导航
|
|
||||||
|
|
||||||
通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 URL 跳转链接
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid clickable :column-num="2">
|
|
||||||
<van-grid-item icon="home-o" text="路由跳转" to="/" />
|
|
||||||
<van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 徽标提示
|
|
||||||
|
|
||||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-grid :column-num="2">
|
|
||||||
<van-grid-item icon="home-o" text="文字" dot />
|
|
||||||
<van-grid-item icon="search" text="文字" badge="99+" />
|
|
||||||
</van-grid>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Grid Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| column-num `v2.0.4` | 列数 | _number \| string_ | `4` |
|
|
||||||
| icon-size `v2.2.6` | 图标大小，默认单位为`px` | _number \| string_ | `28px` |
|
|
||||||
| gutter | 格子之间的间距，默认单位为`px` | _number \| string_ | `0` |
|
|
||||||
| border | 是否显示边框 | _boolean_ | `true` |
|
|
||||||
| center | 是否将格子内容居中显示 | _boolean_ | `true` |
|
|
||||||
| square | 是否将格子固定为正方形 | _boolean_ | `false` |
|
|
||||||
| clickable | 是否开启格子点击反馈 | _boolean_ | `false` |
|
|
||||||
| direction `v2.8.2` | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` |
|
|
||||||
|
|
||||||
### GridItem Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| text | 文字 | _string_ | - |
|
|
||||||
| icon | [图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
|
||||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
|
||||||
| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
|
|
||||||
| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
|
|
||||||
| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
|
|
||||||
| url | 点击后跳转的链接地址 | _string_ | - |
|
|
||||||
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
|
|
||||||
| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
|
|
||||||
|
|
||||||
### GridItem Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| ------ | -------------- | -------------- |
|
|
||||||
| click | 点击格子时触发 | _event: Event_ |
|
|
||||||
|
|
||||||
### GridItem Slots
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
| ------- | -------------------- |
|
|
||||||
| default | 自定义宫格的所有内容 |
|
|
||||||
| icon | 自定义图标 |
|
|
||||||
| text | 自定义文字 |
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-grid>
|
|
||||||
<van-grid-item
|
|
||||||
v-for="i in 4"
|
|
||||||
:key="i"
|
|
||||||
icon="photo-o"
|
|
||||||
:text="t('text')"
|
|
||||||
/>
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('columnNum')">
|
|
||||||
<van-grid :column-num="3">
|
|
||||||
<van-grid-item
|
|
||||||
v-for="i in 6"
|
|
||||||
:key="i"
|
|
||||||
icon="photo-o"
|
|
||||||
:text="t('text')"
|
|
||||||
/>
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('customContent')">
|
|
||||||
<van-grid :border="false" :column-num="3">
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image
|
|
||||||
fit="contain"
|
|
||||||
src="https://img.yzcdn.cn/vant/apple-1.jpg"
|
|
||||||
/>
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image
|
|
||||||
fit="contain"
|
|
||||||
src="https://img.yzcdn.cn/vant/apple-2.jpg"
|
|
||||||
/>
|
|
||||||
</van-grid-item>
|
|
||||||
<van-grid-item>
|
|
||||||
<van-image
|
|
||||||
fit="contain"
|
|
||||||
src="https://img.yzcdn.cn/vant/apple-3.jpg"
|
|
||||||
/>
|
|
||||||
</van-grid-item>
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('square')">
|
|
||||||
<van-grid square>
|
|
||||||
<van-grid-item
|
|
||||||
v-for="i in 8"
|
|
||||||
:key="i"
|
|
||||||
icon="photo-o"
|
|
||||||
:text="t('text')"
|
|
||||||
/>
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('gutter')">
|
|
||||||
<van-grid :gutter="10">
|
|
||||||
<van-grid-item
|
|
||||||
v-for="i in 8"
|
|
||||||
:key="i"
|
|
||||||
icon="photo-o"
|
|
||||||
:text="t('text')"
|
|
||||||
/>
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('horizontal')">
|
|
||||||
<van-grid direction="horizontal" :column-num="3">
|
|
||||||
<van-grid-item icon="photo-o" :text="t('text')" />
|
|
||||||
<van-grid-item icon="photo-o" :text="t('text')" />
|
|
||||||
<van-grid-item icon="photo-o" :text="t('text')" />
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('route')">
|
|
||||||
<van-grid clickable :column-num="2">
|
|
||||||
<van-grid-item icon="home-o" :text="t('vueRoute')" to="/" />
|
|
||||||
<van-grid-item
|
|
||||||
icon="search"
|
|
||||||
:text="t('urlRoute')"
|
|
||||||
url="/vant/mobile.html"
|
|
||||||
/>
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('showBadge')">
|
|
||||||
<van-grid :column-num="2">
|
|
||||||
<van-grid-item icon="home-o" :text="t('text')" dot />
|
|
||||||
<van-grid-item icon="search" :text="t('text')" badge="99+" />
|
|
||||||
</van-grid>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
text: '文字',
|
|
||||||
route: '页面导航',
|
|
||||||
gutter: '格子间距',
|
|
||||||
square: '正方形格子',
|
|
||||||
columnNum: '自定义列数',
|
|
||||||
customContent: '自定义内容',
|
|
||||||
urlRoute: 'URL 跳转',
|
|
||||||
vueRoute: '路由跳转',
|
|
||||||
showBadge: '徽标提示',
|
|
||||||
horizontal: '内容横排',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
text: 'Text',
|
|
||||||
route: 'Route',
|
|
||||||
gutter: 'Gutter',
|
|
||||||
square: 'Square',
|
|
||||||
columnNum: 'Column Num',
|
|
||||||
customContent: 'Custom Content',
|
|
||||||
urlRoute: 'URL',
|
|
||||||
vueRoute: 'Vue Router',
|
|
||||||
showBadge: 'Show Badge',
|
|
||||||
horizontal: 'Horizontal',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
</style>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
import { createNamespace, addUnit } from '../utils';
|
|
||||||
import { BORDER_TOP } from '../utils/constant';
|
|
||||||
import { ParentMixin } from '../mixins/relation';
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('grid');
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
mixins: [ParentMixin('vanGrid')],
|
|
||||||
|
|
||||||
props: {
|
|
||||||
square: Boolean,
|
|
||||||
gutter: [Number, String],
|
|
||||||
iconSize: [Number, String],
|
|
||||||
direction: String,
|
|
||||||
clickable: Boolean,
|
|
||||||
columnNum: {
|
|
||||||
type: [Number, String],
|
|
||||||
default: 4,
|
|
||||||
},
|
|
||||||
center: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
border: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
style() {
|
|
||||||
const { gutter } = this;
|
|
||||||
|
|
||||||
if (gutter) {
|
|
||||||
return {
|
|
||||||
paddingLeft: addUnit(gutter),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
style={this.style}
|
|
||||||
class={[bem(), { [BORDER_TOP]: this.border && !this.gutter }]}
|
|
||||||
>
|
|
||||||
{this.$slots.default?.()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
@ -1,196 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="van-grid van-hairline--top">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-grid van-hairline--top">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-grid">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center">
|
|
||||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center">
|
|
||||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center">
|
|
||||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-grid van-hairline--top">
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-grid" style="padding-left: 10px;">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-grid van-hairline--top">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-grid van-hairline--top">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
|
||||||
<div role="button" tabindex="0" class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">路由跳转</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
|
||||||
<div role="button" tabindex="0" class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
|
|
||||||
<!----></i><span class="van-grid-item__text">URL 跳转</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-grid van-hairline--top">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
|
|
||||||
<div class="van-info van-info--dot"></div>
|
|
||||||
</i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
|
|
||||||
<div class="van-info">99+</div>
|
|
||||||
</i><span class="van-grid-item__text">文字</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`icon-size prop 1`] = `
|
|
||||||
<div class="van-grid van-hairline--top">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-success van-grid-item__icon" style="font-size: 10px;">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render icon-slot 1`] = `
|
|
||||||
<div class="van-grid van-hairline--top">
|
|
||||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline">
|
|
||||||
<div class="van-grid-item__icon-wrapper">
|
|
||||||
<div></div>
|
|
||||||
<div class="van-info">1</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`sqaure and set gutter 1`] = `
|
|
||||||
<div class="van-grid" style="padding-left: 10rem;">
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
|
||||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
import { mount } from '../../../test';
|
|
||||||
|
|
||||||
test('click grid item', () => {
|
|
||||||
const onClick = jest.fn();
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-grid>
|
|
||||||
<van-grid-item @click="onClick" />
|
|
||||||
</van-grid>
|
|
||||||
`,
|
|
||||||
methods: {
|
|
||||||
onClick,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const Item = wrapper.find('.van-grid-item__content');
|
|
||||||
Item.trigger('click');
|
|
||||||
|
|
||||||
expect(onClick).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('sqaure and set gutter', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-grid square :column-num="2" gutter="10rem">
|
|
||||||
<van-grid-item />
|
|
||||||
<van-grid-item />
|
|
||||||
<van-grid-item />
|
|
||||||
</van-grid>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('icon-size prop', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-grid icon-size="10">
|
|
||||||
<van-grid-item icon="success" />
|
|
||||||
</van-grid>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render icon-slot', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-grid icon-size="10">
|
|
||||||
<van-grid-item info="1">
|
|
||||||
<div slot="icon" />
|
|
||||||
</van-grid-item>
|
|
||||||
</van-grid>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
# Icon
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Icon } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Icon);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
Use `name` prop to set icon name or icon URL
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon name="chat-o" />
|
|
||||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Show Badge
|
|
||||||
|
|
||||||
Use `dot` prop, a small red dot will be displayed in the upper right corner of the icon.
|
|
||||||
|
|
||||||
Use `badge` prop, the badge will be displayed in the upper right corner of the icon.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon name="chat-o" dot />
|
|
||||||
<van-icon name="chat-o" badge="9" />
|
|
||||||
<van-icon name="chat-o" badge="99+" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Icon Color
|
|
||||||
|
|
||||||
Use `color` prop to set icon color
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon name="chat-o" color="#1989fa" />
|
|
||||||
<van-icon name="chat-o" color="#07c160" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Icon Size
|
|
||||||
|
|
||||||
Use `size` prop to set icon size
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Use local font file
|
|
||||||
|
|
||||||
Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.
|
|
||||||
|
|
||||||
```js
|
|
||||||
import 'vant/lib/icon/local.css';
|
|
||||||
```
|
|
||||||
|
|
||||||
### Add custom iconfont
|
|
||||||
|
|
||||||
```css
|
|
||||||
@font-face {
|
|
||||||
font-family: 'my-icon';
|
|
||||||
src: url('./my-icon.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-icon {
|
|
||||||
font-family: 'my-icon';
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-icon-extra::before {
|
|
||||||
content: '\e626';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon class-prefix="my-icon" name="extra" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| Attribute | Description | Type | Default |
|
|
||||||
| -------------- | ----------------------- | ------------------ | ---------- |
|
|
||||||
| name | Icon name or URL | _string_ | `''` |
|
|
||||||
| dot `v2.2.1` | Whether to show red dot | _boolean_ | `false` |
|
|
||||||
| badge `v2.5.6` | Content of the badge | _number \| string_ | `''` |
|
|
||||||
| color | Icon color | _string_ | `inherit` |
|
|
||||||
| size | Icon size | _number \| string_ | `inherit` |
|
|
||||||
| class-prefix | ClassName prefix | _string_ | `van-icon` |
|
|
||||||
| tag | HTML Tag | _string_ | `i` |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| ----- | ------------------------- | -------------- |
|
|
||||||
| click | Triggered when click icon | _event: Event_ |
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
# Icon 图标
|
|
||||||
|
|
||||||
### 介绍
|
|
||||||
|
|
||||||
基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过`icon`属性引用
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Icon } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Icon);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
`Icon`的`name`属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon name="chat-o" />
|
|
||||||
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 徽标提示
|
|
||||||
|
|
||||||
设置`dot`属性后，会在图标右上角展示一个小红点。设置`badge`属性后，会在图标右上角展示相应的徽标
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon name="chat-o" dot />
|
|
||||||
<van-icon name="chat-o" badge="9" />
|
|
||||||
<van-icon name="chat-o" badge="99+" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 图标颜色
|
|
||||||
|
|
||||||
`Icon`的`color`属性用来设置图标的颜色
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon name="chat-o" color="#1989fa" />
|
|
||||||
<van-icon name="chat-o" color="#07c160" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 图标大小
|
|
||||||
|
|
||||||
`Icon`的`size`属性用来设置图标的尺寸大小，默认单位为`px`
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 使用本地字体文件
|
|
||||||
|
|
||||||
Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader`
|
|
||||||
|
|
||||||
```js
|
|
||||||
import 'vant/lib/icon/local.css';
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义图标
|
|
||||||
|
|
||||||
如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* 引入第三方或自定义的字体图标样式 */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'my-icon';
|
|
||||||
src: url('./my-icon.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-icon {
|
|
||||||
font-family: 'my-icon';
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-icon-extra::before {
|
|
||||||
content: '\e626';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- 通过 class-prefix 指定类名为 my-icon -->
|
|
||||||
<van-icon class-prefix="my-icon" name="extra" />
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
|
||||||
| --- | --- | --- | --- |
|
|
||||||
| name | 图标名称或图片链接 | _string_ | - |
|
|
||||||
| dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
|
|
||||||
| badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
|
|
||||||
| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
|
|
||||||
| color | 图标颜色 | _string_ | `inherit` |
|
|
||||||
| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` |
|
|
||||||
| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |
|
|
||||||
| tag | HTML 标签 | _string_ | `i` |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| ------ | -------------- | -------------- |
|
|
||||||
| click | 点击图标时触发 | _event: Event_ |
|
|
||||||
@ -1,229 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<van-tabs v-model="tab" sticky :color="BLUE">
|
|
||||||
<van-tab :title="t('demo')">
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-col span="6" @click="copy(demoIcon)">
|
|
||||||
<van-icon :name="demoIcon" />
|
|
||||||
</van-col>
|
|
||||||
<van-col span="6" @click="copy(demoImage)">
|
|
||||||
<van-icon :name="demoImage" />
|
|
||||||
</van-col>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('badge')">
|
|
||||||
<van-col span="6" @click="copy(demoIcon, { dot: true })">
|
|
||||||
<van-icon :name="demoIcon" dot />
|
|
||||||
</van-col>
|
|
||||||
<van-col span="6" @click="copy(demoIcon, { badge: '9' })">
|
|
||||||
<van-icon :name="demoIcon" badge="9" />
|
|
||||||
</van-col>
|
|
||||||
<van-col span="6" @click="copy(demoIcon, { badge: '99+' })">
|
|
||||||
<van-icon :name="demoIcon" badge="99+" />
|
|
||||||
</van-col>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('color')">
|
|
||||||
<van-col span="6" @click="copy(demoIcon, { color: BLUE })">
|
|
||||||
<van-icon :name="demoIcon" :color="BLUE" />
|
|
||||||
</van-col>
|
|
||||||
<van-col span="6" @click="copy(demoIcon, { color: GREEN })">
|
|
||||||
<van-icon :name="demoIcon" :color="GREEN" />
|
|
||||||
</van-col>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('size')">
|
|
||||||
<van-col span="6" @click="copy(demoIcon, { size: '40' })">
|
|
||||||
<van-icon :name="demoIcon" size="40" />
|
|
||||||
</van-col>
|
|
||||||
<van-col span="6" @click="copy(demoIcon, { size: '3rem' })">
|
|
||||||
<van-icon :name="demoIcon" size="3rem" />
|
|
||||||
</van-col>
|
|
||||||
</demo-block>
|
|
||||||
</van-tab>
|
|
||||||
|
|
||||||
<van-tab :title="t('basic')">
|
|
||||||
<van-col
|
|
||||||
v-for="icon in icons.basic"
|
|
||||||
:key="icon"
|
|
||||||
span="6"
|
|
||||||
@click="copy(icon)"
|
|
||||||
>
|
|
||||||
<van-icon :name="icon" />
|
|
||||||
<span>{{ icon }}</span>
|
|
||||||
</van-col>
|
|
||||||
</van-tab>
|
|
||||||
|
|
||||||
<van-tab :title="t('outline')">
|
|
||||||
<van-col
|
|
||||||
v-for="icon in icons.outline"
|
|
||||||
:key="icon"
|
|
||||||
span="6"
|
|
||||||
@click="copy(icon)"
|
|
||||||
>
|
|
||||||
<van-icon :name="icon" />
|
|
||||||
<span>{{ icon }}</span>
|
|
||||||
</van-col>
|
|
||||||
</van-tab>
|
|
||||||
|
|
||||||
<van-tab :title="t('filled')">
|
|
||||||
<van-col
|
|
||||||
v-for="icon in icons.filled"
|
|
||||||
:key="icon"
|
|
||||||
span="6"
|
|
||||||
@click="copy(icon)"
|
|
||||||
>
|
|
||||||
<van-icon :name="icon" />
|
|
||||||
<span>{{ icon }}</span>
|
|
||||||
</van-col>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import icons from '@vant/icons';
|
|
||||||
import { BLUE, GREEN } from '../../utils/constant';
|
|
||||||
|
|
||||||
// from https://30secondsofcode.org
|
|
||||||
function copyToClipboard(str) {
|
|
||||||
const el = document.createElement('textarea');
|
|
||||||
el.value = str;
|
|
||||||
el.setAttribute('readonly', '');
|
|
||||||
el.style.position = 'absolute';
|
|
||||||
el.style.left = '-9999px';
|
|
||||||
document.body.appendChild(el);
|
|
||||||
|
|
||||||
const selected =
|
|
||||||
document.getSelection().rangeCount > 0
|
|
||||||
? document.getSelection().getRangeAt(0)
|
|
||||||
: false;
|
|
||||||
|
|
||||||
el.select();
|
|
||||||
document.execCommand('copy');
|
|
||||||
document.body.removeChild(el);
|
|
||||||
|
|
||||||
if (selected) {
|
|
||||||
document.getSelection().removeAllRanges();
|
|
||||||
document.getSelection().addRange(selected);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
title: '图标列表',
|
|
||||||
badge: '徽标提示',
|
|
||||||
basic: '基础图标',
|
|
||||||
copied: '复制成功',
|
|
||||||
outline: '线框风格',
|
|
||||||
filled: '实底风格',
|
|
||||||
demo: '用法示例',
|
|
||||||
color: '图标颜色',
|
|
||||||
size: '图标大小',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
title: 'Icon List',
|
|
||||||
badge: 'Show Badge',
|
|
||||||
basic: 'Basic',
|
|
||||||
copied: 'Copied',
|
|
||||||
outline: 'Outline',
|
|
||||||
filled: 'Filled',
|
|
||||||
demo: 'Demo',
|
|
||||||
color: 'Icon Color',
|
|
||||||
size: 'Icon Size',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
this.BLUE = BLUE;
|
|
||||||
this.GREEN = GREEN;
|
|
||||||
this.icons = icons;
|
|
||||||
return {
|
|
||||||
tab: 0,
|
|
||||||
demoIcon: 'chat-o',
|
|
||||||
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
copy(icon, option = {}) {
|
|
||||||
let tag = `<van-icon name="${icon}"`;
|
|
||||||
if ('dot' in option) {
|
|
||||||
tag = `${tag} ${option.dot ? 'dot' : ''}`;
|
|
||||||
}
|
|
||||||
if ('badge' in option) {
|
|
||||||
tag = `${tag} badge="${option.badge}"`;
|
|
||||||
}
|
|
||||||
if ('color' in option) {
|
|
||||||
tag = `${tag} color="${option.color}"`;
|
|
||||||
}
|
|
||||||
if ('size' in option) {
|
|
||||||
tag = `${tag} size="${option.size}"`;
|
|
||||||
}
|
|
||||||
tag = `${tag} />`;
|
|
||||||
copyToClipboard(tag);
|
|
||||||
|
|
||||||
this.$notify({
|
|
||||||
type: 'success',
|
|
||||||
duration: 1500,
|
|
||||||
className: 'demo-icon-notify',
|
|
||||||
message: `${this.t('copied')}：${tag}`,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-icon {
|
|
||||||
font-size: 0;
|
|
||||||
|
|
||||||
&-list {
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-height: calc(100vh - 65px);
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-notify {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-col {
|
|
||||||
display: inline-block;
|
|
||||||
float: none;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block;
|
|
||||||
height: 36px;
|
|
||||||
margin: -4px 0 4px;
|
|
||||||
padding: 0 5px;
|
|
||||||
color: @gray-7;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: @active-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-icon {
|
|
||||||
margin: 16px 0 16px;
|
|
||||||
color: @text-color;
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-tab__pane {
|
|
||||||
width: auto;
|
|
||||||
margin: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
@import '~@vant/icons/src/index.less';
|
|
||||||
|
|
||||||
.van-icon {
|
|
||||||
&__image {
|
|
||||||
width: 1em;
|
|
||||||
height: 1em;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
@import '~@vant/icons/src/encode.less';
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`dot prop 1`] = `
|
|
||||||
<i class="van-icon van-icon-undefined">
|
|
||||||
<div class="van-info van-info--dot"></div>
|
|
||||||
</i>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render icon default slot 1`] = `
|
|
||||||
<i class="van-icon van-icon-success">Default slot
|
|
||||||
<!----></i>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render icon with builtin icon name 1`] = `
|
|
||||||
<i class="van-icon van-icon-success">
|
|
||||||
<!----></i>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render icon with local image 1`] = `
|
|
||||||
<i class="van-icon"><img src="/assets/icon.jpg" class="van-icon__image">
|
|
||||||
<!----></i>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render icon with url name 1`] = `
|
|
||||||
<i class="van-icon"><img src="https://img.yzcdn.com/icon.jpg" class="van-icon__image">
|
|
||||||
<!----></i>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`size without unit 1`] = `
|
|
||||||
<i class="van-icon van-icon-undefined" style="font-size: 20px;">
|
|
||||||
<!----></i>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`tag prop 1`] = `
|
|
||||||
<div class="van-icon van-icon-undefined">
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import Icon from '..';
|
|
||||||
import { mount } from '../../../test';
|
|
||||||
|
|
||||||
test('render icon with builtin icon name', () => {
|
|
||||||
const wrapper = mount(Icon, {
|
|
||||||
propsData: {
|
|
||||||
name: 'success',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render icon with url name', () => {
|
|
||||||
const wrapper = mount(Icon, {
|
|
||||||
propsData: {
|
|
||||||
name: 'https://img.yzcdn.com/icon.jpg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render icon with local image', () => {
|
|
||||||
const wrapper = mount(Icon, {
|
|
||||||
propsData: {
|
|
||||||
name: '/assets/icon.jpg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('render icon default slot', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
render(h) {
|
|
||||||
return h(Icon, { props: { name: 'success' } }, ['Default slot']);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('tag prop', () => {
|
|
||||||
const wrapper = mount(Icon, {
|
|
||||||
propsData: {
|
|
||||||
tag: 'div',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('dot prop', () => {
|
|
||||||
const wrapper = mount(Icon, {
|
|
||||||
propsData: {
|
|
||||||
dot: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('size without unit', () => {
|
|
||||||
const wrapper = mount(Icon, {
|
|
||||||
propsData: {
|
|
||||||
size: 20,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
# Image
|
|
||||||
|
|
||||||
### Install
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Image as VanImage } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(VanImage);
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Basic Usage
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### Fit Mode
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image
|
|
||||||
width="10rem"
|
|
||||||
height="10rem"
|
|
||||||
fit="contain"
|
|
||||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Round
|
|
||||||
|
|
||||||
Show round image, it may not works at `fit=contain` and `fit=scale-down`
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image
|
|
||||||
round
|
|
||||||
width="10rem"
|
|
||||||
height="10rem"
|
|
||||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Lazy Load
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image
|
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
lazy-load
|
|
||||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Lazyload } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Lazyload);
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### 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` |
|
|
||||||
|
|
||||||
### 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 |
|
|
||||||
| none | Not resize image |
|
|
||||||
| scale-down | Take the smaller of `none` or `contain` |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| Event | Description | Arguments |
|
|
||||||
| ----- | -------------------------------- | -------------- |
|
|
||||||
| click | Triggered when click image | _event: Event_ |
|
|
||||||
| load | Triggered when image loaded | - |
|
|
||||||
| error | Triggered when image load failed | - |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| Name | Description |
|
|
||||||
| ---------------- | ---------------------------------- |
|
|
||||||
| default `v2.9.0` | Custom the content below the image |
|
|
||||||
| loading | Custom loading placeholder |
|
|
||||||
| error | Custom error placeholder |
|
|
||||||
@ -1,175 +0,0 @@
|
|||||||
# Image 图片
|
|
||||||
|
|
||||||
### 介绍
|
|
||||||
|
|
||||||
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
|
|
||||||
|
|
||||||
### 引入
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Image as VanImage } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(VanImage);
|
|
||||||
```
|
|
||||||
|
|
||||||
## 代码演示
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
|
|
||||||
基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 填充模式
|
|
||||||
|
|
||||||
通过`fit`属性可以设置图片填充模式，可选值见下方表格
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image
|
|
||||||
width="10rem"
|
|
||||||
height="10rem"
|
|
||||||
fit="contain"
|
|
||||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 圆形图片
|
|
||||||
|
|
||||||
通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image
|
|
||||||
round
|
|
||||||
width="10rem"
|
|
||||||
height="10rem"
|
|
||||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 图片懒加载
|
|
||||||
|
|
||||||
设置`lazy-load`属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image
|
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
lazy-load
|
|
||||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue';
|
|
||||||
import { Lazyload } from 'vant';
|
|
||||||
|
|
||||||
Vue.use(Lazyload);
|
|
||||||
```
|
|
||||||
|
|
||||||
### 加载中提示
|
|
||||||
|
|
||||||
`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
|
|
||||||
<template v-slot:loading>
|
|
||||||
<van-loading type="spinner" size="20" />
|
|
||||||
</template>
|
|
||||||
</van-image>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 加载失败提示
|
|
||||||
|
|
||||||
`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
|
|
||||||
<template v-slot:error>加载失败</template>
|
|
||||||
</van-image>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### 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` |
|
|
||||||
|
|
||||||
### 图片填充模式
|
|
||||||
|
|
||||||
| 名称 | 含义 |
|
|
||||||
| ---------- | ------------------------------------------------------ |
|
|
||||||
| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
|
|
||||||
| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
|
|
||||||
| fill | 拉伸图片，使图片填满元素 |
|
|
||||||
| none | 保持图片原有尺寸 |
|
|
||||||
| scale-down | 取`none`或`contain`中较小的一个 |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 回调参数 |
|
|
||||||
| ------ | ------------------ | -------------- |
|
|
||||||
| click | 点击图片时触发 | _event: Event_ |
|
|
||||||
| load | 图片加载完毕时触发 | - |
|
|
||||||
| error | 图片加载失败时触发 | - |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| 名称 | 说明 |
|
|
||||||
| ---------------- | -------------------------- |
|
|
||||||
| default `v2.9.0` | 自定义图片下方的内容 |
|
|
||||||
| loading | 自定义加载中的提示内容 |
|
|
||||||
| error | 自定义加载失败时的提示内容 |
|
|
||||||
|
|
||||||
## 常见问题
|
|
||||||
|
|
||||||
### 如何引用本地图片？
|
|
||||||
|
|
||||||
在 .vue 文件中通过相对路径引用本地图片时，需要在图片的链接外包上一层 `require()`，将图片 URL 转换为 webpack 模块请求，并结合 [file-loader](https://github.com/webpack-contrib/file-loader) 或者 [url-loader](https://github.com/webpack-contrib/url-loader) 进行处理。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- 错误写法 -->
|
|
||||||
<van-image src="./image.png" />
|
|
||||||
|
|
||||||
<!-- 正确写法 -->
|
|
||||||
<van-image :src="require('./image.png')" />
|
|
||||||
```
|
|
||||||
|
|
||||||
> 对此更详细的解释可以参考 vue-loader 的[处理资源路径](https://vue-loader.vuejs.org/zh/guide/asset-url.html)章节。
|
|
||||||
|
|
||||||
### 使用 image 标签无法渲染？
|
|
||||||
|
|
||||||
使用 Image 组件时，可能会遇到将 \<image> 作为标签名时无法渲染的问题，比如下面的写法：
|
|
||||||
|
|
||||||
```html
|
|
||||||
<template>
|
|
||||||
<image src="xxx" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Image } from 'vant';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Image,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
<script>
|
|
||||||
```
|
|
||||||
|
|
||||||
这是因为 \<image> 标签是原生的 SVG 标签，Vue 不允许将原生标签名注册为组件名，使用 \<van-image> 即可规避这个问题。
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
<template>
|
|
||||||
<demo-section>
|
|
||||||
<demo-block :title="t('basicUsage')">
|
|
||||||
<van-row>
|
|
||||||
<van-image width="100" height="100" :src="image" />
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('fitMode')">
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col v-for="fit in fits" span="8" :key="fit">
|
|
||||||
<van-image :fit="fit" width="100%" height="27vw" :src="image" />
|
|
||||||
<div class="text">{{ fit }}</div>
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('round')">
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col v-for="fit in fits" span="8" :key="fit">
|
|
||||||
<van-image round :fit="fit" width="100%" height="27vw" :src="image" />
|
|
||||||
<div class="text">{{ fit }}</div>
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('loading')">
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col span="8">
|
|
||||||
<van-image width="100%" height="27vw" />
|
|
||||||
<div class="text">{{ t('defaultTip') }}</div>
|
|
||||||
</van-col>
|
|
||||||
|
|
||||||
<van-col span="8">
|
|
||||||
<van-image width="100%" height="27vw">
|
|
||||||
<template #loading>
|
|
||||||
<van-loading type="spinner" size="20" />
|
|
||||||
</template>
|
|
||||||
</van-image>
|
|
||||||
<div class="text">{{ t('customTip') }}</div>
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block :title="t('error')">
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col span="8">
|
|
||||||
<van-image width="100%" height="27vw" src="x" />
|
|
||||||
<div class="text">{{ t('defaultTip') }}</div>
|
|
||||||
</van-col>
|
|
||||||
|
|
||||||
<van-col span="8">
|
|
||||||
<van-image width="100%" height="27vw" src="x">
|
|
||||||
<template #error>{{ t('loadFail') }}</template>
|
|
||||||
</van-image>
|
|
||||||
<div class="text">{{ t('customTip') }}</div>
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
</demo-section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
i18n: {
|
|
||||||
'zh-CN': {
|
|
||||||
fitMode: '填充模式',
|
|
||||||
round: '圆形图片',
|
|
||||||
loading: '加载中提示',
|
|
||||||
error: '加载失败提示',
|
|
||||||
defaultTip: '默认提示',
|
|
||||||
customTip: '自定义提示',
|
|
||||||
loadFail: '加载失败',
|
|
||||||
},
|
|
||||||
'en-US': {
|
|
||||||
fitMode: 'Fit Mode',
|
|
||||||
round: 'Round',
|
|
||||||
loading: 'Loading',
|
|
||||||
error: 'Error',
|
|
||||||
defaultTip: 'Default Tip',
|
|
||||||
customTip: 'Custom Tip',
|
|
||||||
loadFail: 'Load failed',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
image: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
fits: ['contain', 'cover', 'fill', 'none', 'scale-down'],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '../../style/var';
|
|
||||||
|
|
||||||
.demo-image {
|
|
||||||
overflow-x: hidden;
|
|
||||||
background-color: @white;
|
|
||||||
|
|
||||||
.van-row {
|
|
||||||
padding: 0 @padding-md;
|
|
||||||
}
|
|
||||||
|
|
||||||
.van-col {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
margin-top: 5px;
|
|
||||||
color: @gray-7;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,188 +0,0 @@
|
|||||||
import { createNamespace, isDef, addUnit, inBrowser } from '../utils';
|
|
||||||
import Icon from '../icon';
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('image');
|
|
||||||
|
|
||||||
export default createComponent({
|
|
||||||
props: {
|
|
||||||
src: String,
|
|
||||||
fit: String,
|
|
||||||
alt: String,
|
|
||||||
round: Boolean,
|
|
||||||
width: [Number, String],
|
|
||||||
height: [Number, String],
|
|
||||||
radius: [Number, String],
|
|
||||||
lazyLoad: Boolean,
|
|
||||||
showError: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
showLoading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
errorIcon: {
|
|
||||||
type: String,
|
|
||||||
default: 'warning-o',
|
|
||||||
},
|
|
||||||
loadingIcon: {
|
|
||||||
type: String,
|
|
||||||
default: 'photo-o',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ['load', 'error', 'click'],
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
loading: true,
|
|
||||||
error: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
src() {
|
|
||||||
this.loading = true;
|
|
||||||
this.error = false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
style() {
|
|
||||||
const style = {};
|
|
||||||
|
|
||||||
if (isDef(this.width)) {
|
|
||||||
style.width = addUnit(this.width);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isDef(this.height)) {
|
|
||||||
style.height = addUnit(this.height);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isDef(this.radius)) {
|
|
||||||
style.overflow = 'hidden';
|
|
||||||
style.borderRadius = addUnit(this.radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
return style;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
const { $Lazyload } = this;
|
|
||||||
|
|
||||||
if ($Lazyload && inBrowser) {
|
|
||||||
$Lazyload.$on('loaded', this.onLazyLoaded);
|
|
||||||
$Lazyload.$on('error', this.onLazyLoadError);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeDestroy() {
|
|
||||||
const { $Lazyload } = this;
|
|
||||||
|
|
||||||
if ($Lazyload) {
|
|
||||||
$Lazyload.$off('loaded', this.onLazyLoaded);
|
|
||||||
$Lazyload.$off('error', this.onLazyLoadError);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
onLoad(event) {
|
|
||||||
this.loading = false;
|
|
||||||
this.$emit('load', event);
|
|
||||||
},
|
|
||||||
|
|
||||||
onLazyLoaded({ el }) {
|
|
||||||
if (el === this.$refs.image && this.loading) {
|
|
||||||
this.onLoad();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onLazyLoadError({ el }) {
|
|
||||||
if (el === this.$refs.image && !this.error) {
|
|
||||||
this.onError();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onError(event) {
|
|
||||||
this.error = true;
|
|
||||||
this.loading = false;
|
|
||||||
this.$emit('error', event);
|
|
||||||
},
|
|
||||||
|
|
||||||
onClick(event) {
|
|
||||||
this.$emit('click', event);
|
|
||||||
},
|
|
||||||
|
|
||||||
genPlaceholder() {
|
|
||||||
if (this.loading && this.showLoading) {
|
|
||||||
return (
|
|
||||||
<div class={bem('loading')}>
|
|
||||||
{this.$slots.loading ? (
|
|
||||||
this.$slots.loading()
|
|
||||||
) : (
|
|
||||||
<Icon name={this.loadingIcon} class={bem('loading-icon')} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.error && this.showError) {
|
|
||||||
return (
|
|
||||||
<div class={bem('error')}>
|
|
||||||
{this.$slots.error ? (
|
|
||||||
this.$slots.error()
|
|
||||||
) : (
|
|
||||||
<Icon name={this.errorIcon} class={bem('error-icon')} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
genImage() {
|
|
||||||
const imgData = {
|
|
||||||
class: bem('img'),
|
|
||||||
attrs: {
|
|
||||||
alt: this.alt,
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
objectFit: this.fit,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (this.error) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.lazyLoad) {
|
|
||||||
return <img ref="image" vLazy={this.src} {...imgData} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.src) {
|
|
||||||
return (
|
|
||||||
<img
|
|
||||||
src={this.src}
|
|
||||||
onLoad={this.onLoad}
|
|
||||||
onError={this.onError}
|
|
||||||
{...imgData}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
class={bem({ round: this.round })}
|
|
||||||
style={this.style}
|
|
||||||
onClick={this.onClick}
|
|
||||||
>
|
|
||||||
{this.genImage()}
|
|
||||||
{this.genPlaceholder()}
|
|
||||||
{this.$slots.default?.()}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-image {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&--round {
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__img,
|
|
||||||
&__error,
|
|
||||||
&__loading {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__error,
|
|
||||||
&__loading {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: @image-placeholder-text-color;
|
|
||||||
font-size: @image-placeholder-font-size;
|
|
||||||
background-color: @image-placeholder-background-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__loading-icon {
|
|
||||||
font-size: @image-loading-icon-size;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__error-icon {
|
|
||||||
font-size: @image-error-icon-size;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,129 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders demo correctly 1`] = `
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">contain</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">cover</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">fill</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-right: 10px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">none</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 10px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">scale-down</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
|
|
||||||
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">contain</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
|
|
||||||
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">cover</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
|
|
||||||
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">fill</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-right: 10px;">
|
|
||||||
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">none</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 10px;">
|
|
||||||
<div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">scale-down</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--8" style="padding-right: 10px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">默认提示</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 10px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
|
|
||||||
<div class="van-image__loading">
|
|
||||||
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text">自定义提示</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="van-row">
|
|
||||||
<div class="van-col van-col--8" style="padding-right: 10px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">默认提示</div>
|
|
||||||
</div>
|
|
||||||
<div class="van-col van-col--8" style="padding-left: 10px;">
|
|
||||||
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
<div class="text">自定义提示</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`default slot 1`] = `
|
|
||||||
<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>Custom Default
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`error-icon prop 1`] = `
|
|
||||||
<div class="van-image">
|
|
||||||
<div class="van-image__error"><i class="van-icon van-icon-error van-image__error-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`lazy load 1`] = `
|
|
||||||
<div class="van-image"><img class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`lazy-load error event 1`] = `
|
|
||||||
<div class="van-image">
|
|
||||||
<div class="van-image__error"><i class="van-icon van-icon-warning-o van-image__error-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`lazy-load load event 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
|
|
||||||
|
|
||||||
exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"></div>`;
|
|
||||||
|
|
||||||
exports[`load event 2`] = `
|
|
||||||
<div class="van-image"><img src="" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`loading-icon prop 1`] = `
|
|
||||||
<div class="van-image"><img class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-success van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`radius prop 1`] = `
|
|
||||||
<div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
|
|
||||||
<div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`show-error prop 1`] = `<div class="van-image"></div>`;
|
|
||||||
|
|
||||||
exports[`show-loading prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import Demo from '../demo';
|
|
||||||
import { snapshotDemo } from '../../../test/demo';
|
|
||||||
|
|
||||||
snapshotDemo(Demo);
|
|
||||||
@ -1,172 +0,0 @@
|
|||||||
import { mount } from '../../../test';
|
|
||||||
import VanImage from '..';
|
|
||||||
|
|
||||||
test('click event', () => {
|
|
||||||
const wrapper = mount(VanImage);
|
|
||||||
|
|
||||||
wrapper.trigger('click');
|
|
||||||
expect(wrapper.emitted('click')[0][0]).toBeTruthy();
|
|
||||||
wrapper.destroy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('load event', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('load');
|
|
||||||
|
|
||||||
expect(wrapper.emitted('load')[0][0]).toBeTruthy();
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
|
|
||||||
wrapper.setProps({ src: '' });
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('error event', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('error');
|
|
||||||
|
|
||||||
expect(wrapper.emitted('error')[0][0]).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('lazy load', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
lazyLoad: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('lazy-load load event', (done) => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
lazyLoad: true,
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
mocks: {
|
|
||||||
$Lazyload: {
|
|
||||||
$on(eventName, hanlder) {
|
|
||||||
if (eventName === 'loaded') {
|
|
||||||
setTimeout(() => {
|
|
||||||
hanlder({ el: null });
|
|
||||||
hanlder({ el: wrapper.find('img').element });
|
|
||||||
expect(wrapper.emitted('load').length).toEqual(1);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
wrapper.destroy();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$off() {
|
|
||||||
done();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('lazy-load error event', (done) => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
lazyLoad: true,
|
|
||||||
},
|
|
||||||
mocks: {
|
|
||||||
$Lazyload: {
|
|
||||||
$on(eventName, hanlder) {
|
|
||||||
if (eventName === 'error') {
|
|
||||||
setTimeout(() => {
|
|
||||||
hanlder({ el: null });
|
|
||||||
hanlder({ el: wrapper.find('img').element });
|
|
||||||
expect(wrapper.emitted('error').length).toEqual(1);
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
wrapper.destroy();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
$off() {
|
|
||||||
done();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
test('show-loading prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
showLoading: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('show-error prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
showError: false,
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('error');
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('error-icon prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
errorIcon: 'error',
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('img').trigger('error');
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('loading-icon prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
loadingIcon: 'success',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('radius prop', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
radius: 3,
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('default slot', () => {
|
|
||||||
const wrapper = mount(VanImage, {
|
|
||||||
propsData: {
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
||||||
},
|
|
||||||
scopedSlots: {
|
|
||||||
default: () => 'Custom Default',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
@import '../style/var';
|
|
||||||
|
|
||||||
.van-info {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-width: @info-size;
|
|
||||||
padding: @info-padding;
|
|
||||||
color: @info-color;
|
|
||||||
font-weight: @info-font-weight;
|
|
||||||
font-size: @info-font-size;
|
|
||||||
font-family: @info-font-family;
|
|
||||||
line-height: @info-size - @info-border-width * 2;
|
|
||||||
text-align: center;
|
|
||||||
background-color: @info-background-color;
|
|
||||||
border: @info-border-width solid @white;
|
|
||||||
border-radius: @info-size;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
transform-origin: 100%;
|
|
||||||
|
|
||||||
&--dot {
|
|
||||||
width: @info-dot-size;
|
|
||||||
min-width: 0;
|
|
||||||
height: @info-dot-size;
|
|
||||||
background-color: @info-dot-color;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`should not render when info is empty string 1`] = ``;
|
|
||||||
|
|
||||||
exports[`should not render when info is empty undefined 1`] = ``;
|
|
||||||
|
|
||||||
exports[`should render when info is zero 1`] = `<div class="van-info">0</div>`;
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import Info from '..';
|
|
||||||
import { mount } from '../../../test';
|
|
||||||
|
|
||||||
test('should not render when info is empty string', () => {
|
|
||||||
const wrapper = mount(Info, {
|
|
||||||
propsData: {
|
|
||||||
info: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should not render when info is empty undefined', () => {
|
|
||||||
const wrapper = mount(Info, {
|
|
||||||
propsData: {
|
|
||||||
info: undefined,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should render when info is zero', () => {
|
|
||||||
const wrapper = mount(Info, {
|
|
||||||
propsData: {
|
|
||||||
info: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user