mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 05:42:44 +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 enUS from '../../src-next/locale/lang/en-US';
|
||||
import { get } from '../../src-next/utils';
|
||||
import { camelize } from '../../src-next/utils/format/string';
|
||||
import Locale from '../../src/locale';
|
||||
import enUS from '../../src/locale/lang/en-US';
|
||||
import { get } from '../../src/utils';
|
||||
import { camelize } from '../../src/utils/format/string';
|
||||
// import Lazyload from '../../src/lazyload';
|
||||
|
||||
const { app } = window;
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
outputFileSync,
|
||||
} from 'fs-extra';
|
||||
import {
|
||||
ROOT,
|
||||
SRC_DIR,
|
||||
getVantConfig,
|
||||
ROOT_WEBPACK_CONFIG_FILE,
|
||||
@ -36,10 +37,15 @@ export function hasDefaultExport(code: string) {
|
||||
export function getComponents() {
|
||||
const EXCLUDES = ['.DS_Store'];
|
||||
const dirs = readdirSync(SRC_DIR);
|
||||
|
||||
// TODO
|
||||
// whitelist for 3.0 development
|
||||
const whiteList = require(join(ROOT, 'components.js'));
|
||||
|
||||
return dirs
|
||||
.filter(dir => !EXCLUDES.includes(dir))
|
||||
.filter(dir =>
|
||||
ENTRY_EXTS.some(ext => {
|
||||
.filter((dir) => !EXCLUDES.includes(dir))
|
||||
.filter((dir) =>
|
||||
ENTRY_EXTS.some((ext) => {
|
||||
const path = join(SRC_DIR, dir, `index.${ext}`);
|
||||
if (existsSync(path)) {
|
||||
return hasDefaultExport(readFileSync(path, 'utf-8'));
|
||||
@ -47,7 +53,8 @@ export function getComponents() {
|
||||
|
||||
return false;
|
||||
})
|
||||
);
|
||||
)
|
||||
.filter((dir) => whiteList.includes(dir));
|
||||
}
|
||||
|
||||
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