mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[new feature] add i18n support (#310)
* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [new feature] add i18n support * feat: Extract demos from markdown * feat: Base components demos * [new feature] complete demo extract & translate * [fix] text cases * fix: add deepAssign test cases * fix: changelog detail * [new feature] AddressEdit support i18n
This commit is contained in:
neverland
GitHub
parent
05abf0d509
commit
d8b6ad7d54
8
.github/CONTRIBUTING.zh-CN.md
vendored
8
.github/CONTRIBUTING.zh-CN.md
vendored
@ -30,7 +30,7 @@ npm run dev
|
||||
|
||||
- 仓库的组件代码都位于 `packages` 下，每个组件一个文件夹
|
||||
- 所有的组件样式代码都位于 `packages/vant-css/src` 下，`vant-css` 也会在发布时单独发包
|
||||
- `docs/examples-docs` 目录下是文档网站的代码，根据语言划分为 zh-CN 和 en-US，本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。
|
||||
- `docs/markdown` 目录下是文档网站的代码，根据语言划分为 zh-CN 和 en-US，本地开发时可以在根目录下运行 `npm run dev` 开启文档网站。
|
||||
|
||||
项目目录大致如下：
|
||||
|
||||
@ -58,7 +58,7 @@ vant
|
||||
|
||||
- 添加文档
|
||||
|
||||
新组件的文档编写，需要在 `docs/examples-docs` 下各个语言中新建对应同名文档 `button.md`，并在 `docs/src/doc.config.js` 中进行文档路径配置
|
||||
新组件的文档编写，需要在 `docs/markdown` 下各个语言中新建对应同名文档 `button.md`，在 `docs/demos` 下创建组件示例，并在 `docs/src/doc.config.js` 中进行配置组件名称
|
||||
|
||||
- 添加测试代码
|
||||
|
||||
@ -67,7 +67,7 @@ vant
|
||||
|
||||
## 组件文档如何编写
|
||||
|
||||
`docs/examples-docs` 下根据语言划分了组件文档，每个组件需要在各语言中编辑对应的文档。组件文档采用 markdown 格式，内容包括使用示例以及 `API` 等。具体书写规范请参考 [组件文档书写规范](./MARKDOWN.md)。
|
||||
`docs/markdown` 下根据语言划分了组件文档，每个组件需要在各语言中编辑对应的文档。组件文档采用 markdown 格式，内容包括使用示例以及 `API` 等。具体书写规范请参考 [组件文档书写规范](./MARKDOWN.md)。
|
||||
|
||||
#### API 说明
|
||||
|
||||
@ -106,5 +106,5 @@ vant
|
||||
`z-index` 优先级（从高到低）：
|
||||
|
||||
* 特殊组件：Toast 永远在最上面，[3000, +∞)
|
||||
* ‘用完就关’ 的组件：Dialog, Pop, Actionsheet, image-preview 等 [2000, 3000)
|
||||
* ‘用完就关’ 的组件：Dialog, Pop, Actionsheet, ImagePreview 等 [2000, 3000)
|
||||
* 其他：组件内部用来控制层次的 z-index 的区间 [-10, 10]，尽可能写小，一般1，2，3这种就够了。
|
||||
|
||||
36
.github/MARKDOWN.md
vendored
36
.github/MARKDOWN.md
vendored
@ -18,28 +18,24 @@
|
||||
|
||||
#### 代码演示
|
||||
|
||||
另起一个二级标题，正文可以是 markdown 和示例的混合。示例的结构如下:
|
||||
另起一个二级标题，示例的结构如下:
|
||||
|
||||
// 在 demo 端之外放置的 script 会直接运行
|
||||
// 在 script 中声明的 vue 变量，在 demo 中都可以直接使用
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
size: 'large'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
size: 'large'
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```html
|
||||
<van-button :size="size">
|
||||
Large
|
||||
</van-button>
|
||||
```
|
||||
|
||||
:::demo 基础用法（必须以:::demo开头，后面的描述可选，如果有的话控制在一两句话，不要过长）
|
||||
```html // :::demo后面必须接代码段，否则不会识别为示例
|
||||
<van-button :size="size"> // 在内容区直接写 vue 中 template 段代码即可
|
||||
Large
|
||||
</van-button>
|
||||
```
|
||||
::: // 示例结束的标记，必须接在代码段之后，否则不会识别为示例
|
||||
|
||||
代码演示的几个书写原则：
|
||||
|
||||
- 从简单用法开始介绍，不要上来就同时使用一大堆 API，会让人觉得难以上手
|
||||
|
||||
@ -1,28 +1,37 @@
|
||||
var Components = require('./get-components')();
|
||||
var fs = require('fs');
|
||||
var render = require('json-templater/string');
|
||||
var uppercamelcase = require('uppercamelcase');
|
||||
var path = require('path');
|
||||
const Components = require('./get-components')();
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const uppercamelize = require('uppercamelcase');
|
||||
const version = process.env.VERSION || require('../../package.json').version;
|
||||
const tips = '// This file is auto gererated by build/bin/build-entry.js';
|
||||
|
||||
var OUTPUT_PATH = path.join(__dirname, '../../packages/index.js');
|
||||
var IMPORT_TEMPLATE = 'import {{name}} from \'./{{package}}\';';
|
||||
var ISNTALL_COMPONENT_TEMPLATE = ' {{name}}';
|
||||
var MAIN_TEMPLATE = `{{include}}
|
||||
function buildVantEntry() {
|
||||
const uninstallComponents = [
|
||||
'Lazyload',
|
||||
'Waterfall',
|
||||
'Dialog',
|
||||
'Toast',
|
||||
'ImagePreview',
|
||||
'Locale'
|
||||
];
|
||||
|
||||
const version = '{{version}}';
|
||||
const importList = Components.map(name => `import ${uppercamelize(name)} from './${name}';`);
|
||||
const exportList = Components.map(name => `${uppercamelize(name)}`);
|
||||
const intallList = exportList.filter(name => !~uninstallComponents.indexOf(uppercamelize(name)));
|
||||
const content = `${tips}
|
||||
${importList.join('\n')}
|
||||
|
||||
const version = '${version}';
|
||||
const components = [
|
||||
{{components}}
|
||||
${intallList.join(',\n ')}
|
||||
];
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
|
||||
const install = Vue => {
|
||||
components.forEach(component => {
|
||||
Vue.component(component.name, component);
|
||||
});
|
||||
};
|
||||
|
||||
/* istanbul ignore if */
|
||||
if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue);
|
||||
}
|
||||
@ -30,54 +39,72 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||
export {
|
||||
install,
|
||||
version,
|
||||
{{list}}
|
||||
${exportList.join(',\n ')}
|
||||
};
|
||||
|
||||
export default {
|
||||
install,
|
||||
version
|
||||
};
|
||||
`;
|
||||
|
||||
delete Components.font;
|
||||
fs.writeFileSync(path.join(__dirname, '../../packages/index.js'), content);
|
||||
}
|
||||
|
||||
var includeComponentTemplate = [];
|
||||
var installTemplate = [];
|
||||
var listTemplate = [];
|
||||
function buildDemoEntry() {
|
||||
const dir = path.join(__dirname, '../../docs/demos/views');
|
||||
const demos = fs.readdirSync(dir)
|
||||
.filter(name => ~name.indexOf('.vue'))
|
||||
.map(name => name.replace('.vue', ''))
|
||||
.map(name => `'${name}': r => require.ensure([], () => r(wrapper(require('./views/${name}'), '${name}')), '${name}')`);
|
||||
|
||||
Components.forEach(name => {
|
||||
var componentName = uppercamelcase(name);
|
||||
const content = `${tips}
|
||||
import './common';
|
||||
|
||||
includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
|
||||
name: componentName,
|
||||
package: name
|
||||
}));
|
||||
function wrapper(component, name) {
|
||||
component = component.default;
|
||||
component.name = 'demo-' + name;
|
||||
return component;
|
||||
}
|
||||
|
||||
if ([
|
||||
// directives
|
||||
'Lazyload',
|
||||
'Waterfall',
|
||||
export default {
|
||||
${demos.join(',\n ')}
|
||||
};
|
||||
`;
|
||||
fs.writeFileSync(path.join(dir, '../index.js'), content);
|
||||
}
|
||||
|
||||
// services
|
||||
'Dialog',
|
||||
'Toast',
|
||||
'ImagePreview'
|
||||
].indexOf(componentName) === -1) {
|
||||
installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
|
||||
name: componentName,
|
||||
component: name
|
||||
}));
|
||||
}
|
||||
function buildDocsEntry() {
|
||||
const dir = path.join(__dirname, '../../docs/markdown');
|
||||
const cnDocs = fs.readdirSync(path.join(dir, 'zh-CN')).map(name => 'zh-CN/' + name);
|
||||
const enDocs = fs.readdirSync(path.join(dir, 'en-US')).map(name => 'en-US/' + name);
|
||||
const docs = [...cnDocs, ...enDocs]
|
||||
.filter(name => name.indexOf('.md') !== -1)
|
||||
.map(name => name.replace('.md', ''))
|
||||
.map(name => `'${name}': wrapper(r => require.ensure([], () => r(require('./${name}.md')), '${name}'))`);
|
||||
|
||||
listTemplate.push(` ${componentName}`);
|
||||
});
|
||||
const content = `${tips}
|
||||
import progress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
var template = render(MAIN_TEMPLATE, {
|
||||
include: includeComponentTemplate.join('\n'),
|
||||
list: listTemplate.join(',\n'),
|
||||
components: installTemplate.join(',\n') || ' ',
|
||||
version: process.env.VERSION || require('../../package.json').version
|
||||
});
|
||||
function wrapper(component) {
|
||||
return function(r) {
|
||||
progress.start();
|
||||
component(r).then(() => {
|
||||
progress.done();
|
||||
}).catch(() => {
|
||||
progress.done();
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
fs.writeFileSync(OUTPUT_PATH, template);
|
||||
console.log('[build entry] DONE:' + OUTPUT_PATH);
|
||||
export default {
|
||||
${docs.join(',\n ')}
|
||||
};
|
||||
`;
|
||||
fs.writeFileSync(path.join(dir, './index.js'), content);
|
||||
}
|
||||
|
||||
buildVantEntry();
|
||||
buildDemoEntry();
|
||||
buildDocsEntry();
|
||||
|
||||
@ -6,20 +6,11 @@ const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
const docConfig = require('../docs/src/doc.config');
|
||||
const { extractExample } = require('zan-doc/src/helper');
|
||||
const styleLoaders = [
|
||||
{ loader: 'css-loader' },
|
||||
{ loader: 'postcss-loader', options: { sourceMap: true } }
|
||||
];
|
||||
|
||||
// extract [components].vue from [components].md
|
||||
extractExample({
|
||||
src: path.resolve(__dirname, '../docs/examples-docs'),
|
||||
dist: path.resolve(__dirname, '../docs/examples-dist'),
|
||||
nav: docConfig,
|
||||
watch: !isProduction
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
vendor: ['packages'],
|
||||
@ -89,15 +80,7 @@ module.exports = {
|
||||
test: /\.md/,
|
||||
loader: 'vue-markdown-loader',
|
||||
options: {
|
||||
preventExtract: true,
|
||||
use: [[require('markdown-it-container'), 'demo']],
|
||||
preprocess(MarkdownIt, source) {
|
||||
const styleRegexp = /<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/i;
|
||||
const scriptRegexp = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/i;
|
||||
MarkdownIt.renderer.rules.table_open = () =>
|
||||
'<table class="zan-doc-table">';
|
||||
return source.replace(styleRegexp, '').replace(scriptRegexp, '');
|
||||
}
|
||||
preventExtract: true
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
72
docs/demos/common.js
Normal file
72
docs/demos/common.js
Normal file
@ -0,0 +1,72 @@
|
||||
/**
|
||||
* Demo Common Mixin && i18n
|
||||
*/
|
||||
|
||||
import Vue from 'vue';
|
||||
import { Locale, Toast, Dialog } from 'packages';
|
||||
import { DemoBlock, DemoSection } from 'vant-doc';
|
||||
import camelize from 'packages/utils/camelize';
|
||||
|
||||
const demoBaseMixin = {
|
||||
beforeCreate() {
|
||||
const { name, i18n } = this.$options;
|
||||
if (name && i18n) {
|
||||
const formattedI18n = {};
|
||||
const camelizedName = camelize(name);
|
||||
Object.keys(i18n).forEach(key => {
|
||||
formattedI18n[key] = { [camelizedName]: i18n[key] };
|
||||
});
|
||||
Locale.add(formattedI18n);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.Toast = Toast;
|
||||
window.Dialog = Dialog;
|
||||
Vue.mixin(Locale.i18n);
|
||||
Vue.mixin(demoBaseMixin);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('demo-section', DemoSection);
|
||||
|
||||
Locale.add({
|
||||
'zh-CN': {
|
||||
red: '红色',
|
||||
orange: '橙色',
|
||||
yellow: '黄色',
|
||||
tab: '标签',
|
||||
tag: '标签',
|
||||
desc: '描述信息',
|
||||
back: '返回',
|
||||
title: '标题',
|
||||
status: '状态',
|
||||
button: '按钮',
|
||||
option: '选项',
|
||||
search: '搜索',
|
||||
content: '内容',
|
||||
custom: '自定义',
|
||||
loading: '加载状态',
|
||||
disabled: '禁用状态',
|
||||
basicUsage: '基础用法',
|
||||
advancedUsage: '高级用法'
|
||||
},
|
||||
'en-US': {
|
||||
red: 'Red',
|
||||
orange: 'Orange',
|
||||
yellow: 'Yellow',
|
||||
tab: 'Tab',
|
||||
tag: 'Tag',
|
||||
desc: 'Description',
|
||||
back: 'Back',
|
||||
title: 'Title',
|
||||
status: 'Status',
|
||||
button: 'Button',
|
||||
option: 'Option',
|
||||
search: 'Search',
|
||||
content: 'Content',
|
||||
custom: 'Custom',
|
||||
loading: 'Loading',
|
||||
disabled: 'Disabled',
|
||||
basicUsage: 'Basic Usage',
|
||||
advancedUsage: 'Advanced Usage'
|
||||
}
|
||||
});
|
||||
57
docs/demos/index.js
Normal file
57
docs/demos/index.js
Normal file
@ -0,0 +1,57 @@
|
||||
// This file is auto gererated by build/bin/build-entry.js
|
||||
import './common';
|
||||
|
||||
function wrapper(component, name) {
|
||||
component = component.default;
|
||||
component.name = 'demo-' + name;
|
||||
return component;
|
||||
}
|
||||
|
||||
export default {
|
||||
'actionsheet': r => require.ensure([], () => r(wrapper(require('./views/actionsheet'), 'actionsheet')), 'actionsheet'),
|
||||
'address-edit': r => require.ensure([], () => r(wrapper(require('./views/address-edit'), 'address-edit')), 'address-edit'),
|
||||
'address-list': r => require.ensure([], () => r(wrapper(require('./views/address-list'), 'address-list')), 'address-list'),
|
||||
'area': r => require.ensure([], () => r(wrapper(require('./views/area'), 'area')), 'area'),
|
||||
'badge': r => require.ensure([], () => r(wrapper(require('./views/badge'), 'badge')), 'badge'),
|
||||
'button': r => require.ensure([], () => r(wrapper(require('./views/button'), 'button')), 'button'),
|
||||
'card': r => require.ensure([], () => r(wrapper(require('./views/card'), 'card')), 'card'),
|
||||
'cell-swipe': r => require.ensure([], () => r(wrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe'),
|
||||
'cell': r => require.ensure([], () => r(wrapper(require('./views/cell'), 'cell')), 'cell'),
|
||||
'checkbox': r => require.ensure([], () => r(wrapper(require('./views/checkbox'), 'checkbox')), 'checkbox'),
|
||||
'contact': r => require.ensure([], () => r(wrapper(require('./views/contact'), 'contact')), 'contact'),
|
||||
'coupon': r => require.ensure([], () => r(wrapper(require('./views/coupon'), 'coupon')), 'coupon'),
|
||||
'datetime-picker': r => require.ensure([], () => r(wrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker'),
|
||||
'dialog': r => require.ensure([], () => r(wrapper(require('./views/dialog'), 'dialog')), 'dialog'),
|
||||
'field': r => require.ensure([], () => r(wrapper(require('./views/field'), 'field')), 'field'),
|
||||
'goods-action': r => require.ensure([], () => r(wrapper(require('./views/goods-action'), 'goods-action')), 'goods-action'),
|
||||
'icon': r => require.ensure([], () => r(wrapper(require('./views/icon'), 'icon')), 'icon'),
|
||||
'image-preview': r => require.ensure([], () => r(wrapper(require('./views/image-preview'), 'image-preview')), 'image-preview'),
|
||||
'layout': r => require.ensure([], () => r(wrapper(require('./views/layout'), 'layout')), 'layout'),
|
||||
'lazyload': r => require.ensure([], () => r(wrapper(require('./views/lazyload'), 'lazyload')), 'lazyload'),
|
||||
'loading': r => require.ensure([], () => r(wrapper(require('./views/loading'), 'loading')), 'loading'),
|
||||
'nav-bar': r => require.ensure([], () => r(wrapper(require('./views/nav-bar'), 'nav-bar')), 'nav-bar'),
|
||||
'notice-bar': r => require.ensure([], () => r(wrapper(require('./views/notice-bar'), 'notice-bar')), 'notice-bar'),
|
||||
'number-keyboard': r => require.ensure([], () => r(wrapper(require('./views/number-keyboard'), 'number-keyboard')), 'number-keyboard'),
|
||||
'panel': r => require.ensure([], () => r(wrapper(require('./views/panel'), 'panel')), 'panel'),
|
||||
'password-input': r => require.ensure([], () => r(wrapper(require('./views/password-input'), 'password-input')), 'password-input'),
|
||||
'picker': r => require.ensure([], () => r(wrapper(require('./views/picker'), 'picker')), 'picker'),
|
||||
'popup': r => require.ensure([], () => r(wrapper(require('./views/popup'), 'popup')), 'popup'),
|
||||
'progress': r => require.ensure([], () => r(wrapper(require('./views/progress'), 'progress')), 'progress'),
|
||||
'pull-refresh': r => require.ensure([], () => r(wrapper(require('./views/pull-refresh'), 'pull-refresh')), 'pull-refresh'),
|
||||
'radio': r => require.ensure([], () => r(wrapper(require('./views/radio'), 'radio')), 'radio'),
|
||||
'search': r => require.ensure([], () => r(wrapper(require('./views/search'), 'search')), 'search'),
|
||||
'sku': r => require.ensure([], () => r(wrapper(require('./views/sku'), 'sku')), 'sku'),
|
||||
'stepper': r => require.ensure([], () => r(wrapper(require('./views/stepper'), 'stepper')), 'stepper'),
|
||||
'steps': r => require.ensure([], () => r(wrapper(require('./views/steps'), 'steps')), 'steps'),
|
||||
'submit-bar': r => require.ensure([], () => r(wrapper(require('./views/submit-bar'), 'submit-bar')), 'submit-bar'),
|
||||
'swipe': r => require.ensure([], () => r(wrapper(require('./views/swipe'), 'swipe')), 'swipe'),
|
||||
'switch-cell': r => require.ensure([], () => r(wrapper(require('./views/switch-cell'), 'switch-cell')), 'switch-cell'),
|
||||
'switch': r => require.ensure([], () => r(wrapper(require('./views/switch'), 'switch')), 'switch'),
|
||||
'tab': r => require.ensure([], () => r(wrapper(require('./views/tab'), 'tab')), 'tab'),
|
||||
'tabbar': r => require.ensure([], () => r(wrapper(require('./views/tabbar'), 'tabbar')), 'tabbar'),
|
||||
'tag': r => require.ensure([], () => r(wrapper(require('./views/tag'), 'tag')), 'tag'),
|
||||
'toast': r => require.ensure([], () => r(wrapper(require('./views/toast'), 'toast')), 'toast'),
|
||||
'tree-select': r => require.ensure([], () => r(wrapper(require('./views/tree-select'), 'tree-select')), 'tree-select'),
|
||||
'uploader': r => require.ensure([], () => r(wrapper(require('./views/uploader'), 'uploader')), 'uploader'),
|
||||
'waterfall': r => require.ensure([], () => r(wrapper(require('./views/waterfall'), 'waterfall')), 'waterfall')
|
||||
};
|
||||
81
docs/demos/views/actionsheet.vue
Normal file
81
docs/demos/views/actionsheet.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @click="show1 = true">{{ $t('button1') }}</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button @click="show2 = true">{{ $t('button2') }}</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions" :cancelText="$t('cancel')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button @click="show3 = true">{{ $t('button3') }}</van-button>
|
||||
<van-actionsheet v-model="show3" :title="$t('title')">
|
||||
<p>{{ $t('content') }}</p>
|
||||
</van-actionsheet>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '弹出 Actionsheet',
|
||||
button2: '弹出带取消按钮的 Actionsheet',
|
||||
button3: '弹出带标题的 Actionsheet',
|
||||
title2: '带取消按钮的 Actionsheet',
|
||||
title3: '带标题的 Actionsheet'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Show Actionsheet',
|
||||
button2: 'Show Actionsheet with cancel button',
|
||||
button3: 'Show Actionsheet with title',
|
||||
title2: 'Actionsheet with cancel button',
|
||||
title3: 'Actionsheet with title'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
actions() {
|
||||
return [
|
||||
{ name: this.$t('option'), callback: this.onClick },
|
||||
{ name: this.$t('option') },
|
||||
{ name: this.$t('option'), loading: true }
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(item) {
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
docs/demos/views/address-edit.vue
Normal file
69
docs/demos/views/address-edit.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-address-edit
|
||||
:areaList="areaList"
|
||||
:showPostal="true"
|
||||
:showSetDefault="true"
|
||||
:showSearchResult="true"
|
||||
:searchResult="searchResult"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
@change-detail="onChangeDetail"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import areaList from '../mock/area.json';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: []
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
Toast('save');
|
||||
},
|
||||
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
},
|
||||
|
||||
onChangeDetail(val) {
|
||||
if (val) {
|
||||
this.searchResult = [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}, {
|
||||
name: '黄龙万科中心H座'
|
||||
}, {
|
||||
name: '黄龙万科中心H座',
|
||||
address: '杭州市西湖区'
|
||||
}];
|
||||
} else {
|
||||
this.searchResult = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
</style>
|
||||
60
docs/demos/views/address-list.vue
Normal file
60
docs/demos/views/address-list.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
38
docs/demos/views/area.vue
Normal file
38
docs/demos/views/area.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-area :areaList="areaList" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-area :areaList="areaList" value="110101" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-area :areaList="areaList" :columnsNum="2" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AreaList from '../mock/area.json';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '选中省市县',
|
||||
title3: '配置显示列'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Initial Value',
|
||||
title3: 'Columns Number'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
areaList: AreaList
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
54
docs/demos/views/badge.vue
Normal file
54
docs/demos/views/badge.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-badge-group :activeKey="activeKey">
|
||||
<van-badge :title="$t('title')" @click="onClick"></van-badge>
|
||||
<van-badge :title="$t('title')" @click="onClick" info="8"></van-badge>
|
||||
<van-badge :title="$t('title')" @click="onClick" info="99"></van-badge>
|
||||
<van-badge :title="$t('title')" @click="onClick" info="199"></van-badge>
|
||||
</van-badge-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '标签名称'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-badge {
|
||||
.van-badge-group {
|
||||
width: auto;
|
||||
margin: 0 15px;
|
||||
padding: 20px 0;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.van-badge {
|
||||
width: 85px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
92
docs/demos/views/button.vue
Normal file
92
docs/demos/views/button.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="danger">Danger</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button size="large">Large</van-button>
|
||||
<van-button size="normal">Normal</van-button>
|
||||
<van-button size="small">Small</van-button>
|
||||
<van-button size="mini">Mini</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-button disabled>Diabled</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button loading></van-button>
|
||||
<van-button loading type="primary"></van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
{{ $t('button') }}
|
||||
</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-button type="primary" bottomAction>{{ $t('button') }}</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottomAction>{{ $t('button') }}</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottomAction>{{ $t('button') }}</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '按钮类型',
|
||||
title2: '按钮尺寸',
|
||||
title3: '加载状态',
|
||||
title4: '自定义按钮标签',
|
||||
title5: '页面底部操作按钮'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Type',
|
||||
title2: 'Size',
|
||||
title3: 'Loading',
|
||||
title4: 'Custom Tag',
|
||||
title5: 'Action Button'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-button {
|
||||
.van-button {
|
||||
user-select: none;
|
||||
|
||||
&--large,
|
||||
&--bottom-action {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&--small,
|
||||
&--normal {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
38
docs/demos/views/card.vue
Normal file
38
docs/demos/views/card.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<demo-section background="#fff">
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-card
|
||||
:title="$t('title')"
|
||||
:desc="$t('desc')"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-card
|
||||
:title="$t('title')"
|
||||
:desc="$t('desc')"
|
||||
num="2"
|
||||
price="2.00"
|
||||
:thumb="imageURL"
|
||||
>
|
||||
<div slot="footer">
|
||||
<van-button size="mini">{{ $t('button') }}</van-button>
|
||||
<van-button size="mini">{{ $t('button') }}</van-button>
|
||||
</div>
|
||||
</van-card>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
51
docs/demos/views/cell-swipe.vue
Normal file
51
docs/demos/views/cell-swipe.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<span slot="left">{{ $t('button1') }}</span>
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('title')" :value="$t('content')"></van-cell>
|
||||
</van-cell-group>
|
||||
<span slot="right">{{ $t('button2') }}</span>
|
||||
</van-cell-swipe>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '选择',
|
||||
button2: '删除',
|
||||
title: '单元格'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Select',
|
||||
button2: 'Delete',
|
||||
title: 'Cell'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-cell-swipe {
|
||||
.van-cell-swipe__left,
|
||||
.van-cell-swipe__right {
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
width: 65px;
|
||||
height: 44px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
.van-cell-swipe__left {
|
||||
background-color: #FF4444;
|
||||
}
|
||||
.van-cell-swipe__right {
|
||||
background-color: #84c483;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
86
docs/demos/views/cell.vue
Normal file
86
docs/demos/views/cell.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<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('title2')">
|
||||
<van-cell-group>
|
||||
<van-cell :value="$t('content')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('cell')" icon="location" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-cell-group>
|
||||
<van-cell :title="$t('cell')" is-link />
|
||||
<van-cell :title="$t('cell')" is-link :value="$t('content')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-cell-group>
|
||||
<van-cell :value="$t('content')" icon="shop" is-link>
|
||||
<template slot="title">
|
||||
<span class="van-cell-text">{{ $t('cell') }}</span>
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell :title="$t('cell')" icon="location" is-link />
|
||||
<van-cell :title="$t('cell')">
|
||||
<template slot="right-icon">
|
||||
<van-icon name="search" class="van-cell__right-icon"></van-icon>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
cell: '单元格',
|
||||
title2: '只设置 value',
|
||||
title3: '展示图标',
|
||||
title4: '展示箭头'
|
||||
},
|
||||
'en-US': {
|
||||
cell: 'Cell title',
|
||||
title2: 'Value only',
|
||||
title3: 'Left Icon',
|
||||
title4: 'Link'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-cell {
|
||||
.van-cell-text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.van-cell__right-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
.van-cell-text,
|
||||
.van-tag--danger {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
docs/demos/views/checkbox.vue
Normal file
77
docs/demos/views/checkbox.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-checkbox v-model="checkbox2" disabled>{{ $t('checkbox') }} 2</van-checkbox>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:name="item"
|
||||
>
|
||||
{{ $t('checkbox') }} {{ item }}
|
||||
</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
checkbox: '复选框',
|
||||
title3: 'Checkbox 组',
|
||||
title4: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
checkbox: 'Checkbox',
|
||||
title3: 'Checkbox Group',
|
||||
title4: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-checkbox {
|
||||
.van-checkbox {
|
||||
margin: 10px 0 0 20px;
|
||||
}
|
||||
|
||||
.van-cell {
|
||||
.van-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
docs/demos/views/contact.vue
Normal file
116
docs/demos/views/contact.vue
Normal file
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-contact-card
|
||||
:type="cardType"
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-contact-list
|
||||
v-model="chosenContactId"
|
||||
:list="list"
|
||||
@add="onAdd"
|
||||
@edit="onEdit"
|
||||
@select="onSelect"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<van-popup v-model="showEdit" position="bottom">
|
||||
<van-contact-edit
|
||||
:contactInfo="editingContact"
|
||||
:isEdit="isEdit"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [{
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
cardType() {
|
||||
return this.chosenContactId !== null ? 'edit' : 'add';
|
||||
},
|
||||
|
||||
currentContact() {
|
||||
const id = this.chosenContactId;
|
||||
return id !== null ? this.list.filter(item => item.id === id)[0] : {};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
this.editingContact = { id: this.list.length };
|
||||
this.isEdit = false;
|
||||
this.showEdit = true;
|
||||
},
|
||||
|
||||
onEdit(item) {
|
||||
this.isEdit = true;
|
||||
this.showEdit = true;
|
||||
this.editingContact = item;
|
||||
},
|
||||
|
||||
onSelect() {
|
||||
this.showList = false;
|
||||
},
|
||||
|
||||
onSave(info) {
|
||||
this.showEdit = false;
|
||||
this.showList = false;
|
||||
|
||||
if (this.isEdit) {
|
||||
this.list = this.list.map(item => item.id === info.id ? info : item);
|
||||
} else {
|
||||
this.list.push(info);
|
||||
}
|
||||
this.chosenContactId = info.id;
|
||||
},
|
||||
|
||||
onDelete(info) {
|
||||
this.showEdit = false;
|
||||
this.list = this.list.filter(item => item.id !== info.id);
|
||||
if (this.chosenContactId === info.id) {
|
||||
this.chosenContactId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-contact {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
96
docs/demos/views/coupon.vue
Normal file
96
docs/demos/views/coupon.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-coupon-cell
|
||||
:coupons="coupons"
|
||||
:chosenCoupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
/>
|
||||
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosenCoupon="chosenCoupon"
|
||||
:disabledCoupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
/>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
...coupon,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
origin_condition: 50,
|
||||
value: 12,
|
||||
condition: '下单即享 8.8 折'
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
Toast('兑换成功');
|
||||
this.coupons.push(coupon);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-coupon {
|
||||
.van-popup {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
docs/demos/views/datetime-picker.vue
Normal file
61
docs/demos/views/datetime-picker.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate1"
|
||||
type="datetime"
|
||||
:minHour="minHour"
|
||||
:maxHour="maxHour"
|
||||
:minDate="minDate"
|
||||
:maxDate="maxDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
type="date"
|
||||
:minHour="minHour"
|
||||
:maxHour="maxHour"
|
||||
:minDate="minDate"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
type="time"
|
||||
:minHour="minHour"
|
||||
:maxHour="maxHour"
|
||||
:minDate="minDate"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '选择日期',
|
||||
title3: '选择时间'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Date Picker',
|
||||
title3: 'Time Picker'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate1: new Date(2018, 0, 1),
|
||||
currentDate2: null,
|
||||
currentDate3: null
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
60
docs/demos/views/dialog.vue
Normal file
60
docs/demos/views/dialog.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button @click="onClickAlert">Alert</van-button>
|
||||
<van-button @click="onClickAlert2">{{ $t('alert2') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button @click="onClickConfirm">Confirm</van-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '消息提示',
|
||||
title2: '消息确认',
|
||||
alert2: '无标题 Alert'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Alert dialog',
|
||||
title2: 'Confirm dialog',
|
||||
alert2: 'Alert without title'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
title: this.$t('title'),
|
||||
message: this.$t('content')
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message: this.$t('content')
|
||||
});
|
||||
},
|
||||
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: this.$t('title'),
|
||||
message: this.$t('content')
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-dialog {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
docs/demos/views/field.vue
Normal file
105
docs/demos/views/field.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" :placeholder="$t('usernamePlaceholder')"></van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="username"
|
||||
:label="$t('username')"
|
||||
icon="clear"
|
||||
:placeholder="$t('usernamePlaceholder')"
|
||||
required
|
||||
@clickIcon="username = ''"
|
||||
>
|
||||
</van-field>
|
||||
|
||||
<van-field
|
||||
v-model="password"
|
||||
type="password"
|
||||
:label="$t('password')"
|
||||
:placeholder="$t('passwordPlaceholder')"
|
||||
required>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-cell-group>
|
||||
<van-field :value="$t('inputDisabled')" :label="$t('username')" disabled></van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-cell-group>
|
||||
<van-field :label="$t('username')" :placeholder="$t('usernamePlaceholder')" error></van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
:label="$t('message')"
|
||||
type="textarea"
|
||||
:placeholder="$t('messagePlaceholder')"
|
||||
rows="1"
|
||||
autosize
|
||||
>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '自定义类型',
|
||||
title3: '禁用输入框',
|
||||
title4: '错误提示',
|
||||
title5: '高度自适应',
|
||||
username: '用户名',
|
||||
password: '密码',
|
||||
message: '留言',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
passwordPlaceholder: '请输入密码',
|
||||
messagePlaceholder: '请输入留言',
|
||||
inputDisabled: '输入框已禁用'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom type',
|
||||
title3: 'Disabled',
|
||||
title4: 'Error info',
|
||||
title5: 'Auto resize',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
message: 'Message',
|
||||
usernamePlaceholder: 'Username',
|
||||
passwordPlaceholder: 'Password',
|
||||
messagePlaceholder: 'Message',
|
||||
inputDisabled: 'Disabled'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
password: '',
|
||||
username: '',
|
||||
message: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-field {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
52
docs/demos/views/goods-action.vue
Normal file
52
docs/demos/views/goods-action.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
|
||||
客服
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
|
||||
购物车
|
||||
</van-goods-action-mini-btn>
|
||||
<van-goods-action-big-btn @click="onClickBigBtn">
|
||||
加入购物车
|
||||
</van-goods-action-big-btn>
|
||||
<van-goods-action-big-btn @click="onClickBigBtn" primary>
|
||||
立即购买
|
||||
</van-goods-action-big-btn>
|
||||
</van-goods-action>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickMiniBtn() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
|
||||
onClickBigBtn() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-goods-action {
|
||||
.van-goods-action {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,15 @@
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title')">
|
||||
<van-col span="8" v-for="icon in icons" :key="icon">
|
||||
<van-icon :name="icon"></van-icon>
|
||||
<span>{{ icon }}</span>
|
||||
</van-col>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const icons = [
|
||||
'close',
|
||||
'location',
|
||||
@ -86,56 +95,43 @@ const icons = [
|
||||
'phone'
|
||||
];
|
||||
|
||||
const IconListConstructor = Vue.extend({
|
||||
render(h) {
|
||||
return (
|
||||
<div>
|
||||
{icons.map(icon => (
|
||||
<van-col span="8">
|
||||
<van-icon name={icon}></van-icon>
|
||||
<span>{icon}</span>
|
||||
</van-col>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
const IconList = new IconListConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
const block = document.querySelector('.zan-doc-demo-block');
|
||||
if (block) {
|
||||
block.appendChild(IconList.$el);
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '图标列表'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Icon List'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
this.icons = icons;
|
||||
return {};
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
## Icon
|
||||
<style lang="postcss">
|
||||
.demo-icon {
|
||||
font-size: 0;
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Icon } from 'vant';
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
.van-icon {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
margin: 15px 0;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
}
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
View all usable icons on the right.
|
||||
|
||||
:::demo Icon List
|
||||
```html
|
||||
<van-icon name="success" />
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | Icon name | `String` | `''` | - |
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
docs/demos/views/image-preview.vue
Normal file
51
docs/demos/views/image-preview.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @click="showImagePreview">{{ $t('button1') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('button2')">
|
||||
<van-button @click="showImagePreview(1)">{{ $t('button2') }}</van-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'packages';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '预览图片',
|
||||
button2: '指定初始位置'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Show Images',
|
||||
button2: 'Custom Start Position'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showImagePreview(position) {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
], typeof position === 'number' ? position : 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.van-image-preview {
|
||||
img {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
docs/demos/views/layout.vue
Normal file
65
docs/demos/views/layout.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<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-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '在列元素之间增加间距'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Column Spacing'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-layout {
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.van-col {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
background-clip: content-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
docs/demos/views/lazyload.vue
Normal file
82
docs/demos/views/lazyload.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<img v-for="img in imageList" v-lazy="img" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<lazy-component>
|
||||
<img v-for="img in componentImageList" v-lazy="img" />
|
||||
</lazy-component>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '背景图懒加载',
|
||||
title3: '懒加载模块'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Lazyload Background Image',
|
||||
title3: 'Lazyload Component'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
|
||||
],
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
|
||||
],
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleComponentShow() {
|
||||
console.log('component show');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-lazyload {
|
||||
padding: 0 15px;
|
||||
|
||||
img,
|
||||
div[lazy] {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin: 10px 0 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
background-size: 315px 250px;
|
||||
background-position: 15px;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.van-doc-demo-block__title,
|
||||
.van-doc-demo-section__title {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
docs/demos/views/loading.vue
Normal file
44
docs/demos/views/loading.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-loading type="circle" color="black" />
|
||||
<van-loading type="circle" color="white" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-loading type="gradient-circle" color="black" />
|
||||
<van-loading type="gradient-circle" color="white" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-loading type="spinner" color="black" />
|
||||
<van-loading type="spinner" color="white" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '单色圆环',
|
||||
title2: '渐变色圆环',
|
||||
title3: 'Spinner'
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Solid Circle',
|
||||
title2: 'Gradient Circle',
|
||||
title3: 'Spinner'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
18
docs/demos/views/nav-bar.vue
Normal file
18
docs/demos/views/nav-bar.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-nav-bar
|
||||
:title="$t('title')"
|
||||
:leftText="$t('back')"
|
||||
:rightText="$t('button')"
|
||||
leftArrow
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-nav-bar :title="$t('title')" :leftText="$t('back')" leftArrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
</van-nav-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
44
docs/demos/views/notice-bar.vue
Normal file
44
docs/demos/views/notice-bar.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-notice-bar
|
||||
:text="$t('text')"
|
||||
leftIcon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-notice-bar :scrollable="false" :text="$t('text')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-notice-bar mode="closeable" :text="$t('text')" />
|
||||
<van-notice-bar mode="link" :text="$t('text')" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '禁用滚动',
|
||||
title3: '通告栏模式',
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Disable scroll',
|
||||
title3: 'Mode',
|
||||
text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-notice-bar {
|
||||
.van-notice-bar:not(:first-of-type) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
docs/demos/views/number-keyboard.vue
Normal file
59
docs/demos/views/number-keyboard.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @touchstart.native.stop="showKeyboard = true">
|
||||
{{ $t('button1') }}
|
||||
</van-button>
|
||||
|
||||
<van-button @touchstart.native.stop="showKeyboard = false">
|
||||
{{ $t('button2') }}
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@blur="showKeyboard = false"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
button1: '弹出键盘',
|
||||
button2: '收起键盘'
|
||||
},
|
||||
'en-US': {
|
||||
button1: 'Show Keyboard',
|
||||
button2: 'Hide Keyboard'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showKeyboard: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast('Input: ' + value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('Delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-number-keyboard {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
35
docs/demos/views/panel.vue
Normal file
35
docs/demos/views/panel.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
|
||||
<div>{{ $t('content') }}</div>
|
||||
</van-panel>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
|
||||
<div>{{ $t('content') }}</div>
|
||||
<div slot="footer">
|
||||
<van-button size="small">{{ $t('button') }}</van-button>
|
||||
<van-button size="small" type="danger">{{ $t('button') }}</van-button>
|
||||
</div>
|
||||
</van-panel>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-panel {
|
||||
.van-panel__footer {
|
||||
text-align: right;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-panel__content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
docs/demos/views/password-input.vue
Normal file
47
docs/demos/views/password-input.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-password-input
|
||||
:value="value"
|
||||
:info="$t('info')"
|
||||
@focus="showKeyboard = true"
|
||||
/>
|
||||
|
||||
<van-number-keyboard
|
||||
:show="showKeyboard"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
info: '密码为 6 位数字'
|
||||
},
|
||||
'en-US': {
|
||||
info: 'Some tips'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
showKeyboard: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(key) {
|
||||
this.value = (this.value + key).slice(0, 6);
|
||||
},
|
||||
onDelete() {
|
||||
this.value = this.value.slice(0, this.value.length - 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
74
docs/demos/views/picker.vue
Normal file
74
docs/demos/views/picker.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-picker
|
||||
showToolbar
|
||||
:title="$t('area')"
|
||||
:columns="columns"
|
||||
@change="onChange"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
area: '地区选择',
|
||||
title2: '带 toolbar 的 Picker',
|
||||
column: {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
|
||||
}
|
||||
},
|
||||
'en-US': {
|
||||
area: 'Title',
|
||||
title2: 'Picker with toolbar',
|
||||
column: {
|
||||
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
columns() {
|
||||
const column = this.$t('column');
|
||||
return [
|
||||
{
|
||||
values: Object.keys(column),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: column[Object.keys(column)[0]],
|
||||
className: 'column2'
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, this.$t('column')[values[0]]);
|
||||
},
|
||||
onCancel() {
|
||||
Toast('picker cancel');
|
||||
},
|
||||
onConfirm() {
|
||||
Toast('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
</style>
|
||||
112
docs/demos/views/popup.vue
Normal file
112
docs/demos/views/popup.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-button @click="show1 = true">{{ $t('button1') }}</van-button>
|
||||
<van-popup v-model="show1">{{ $t('content') }}</van-popup>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('position')">
|
||||
<van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
|
||||
<van-popup v-model="show2" position="bottom">
|
||||
<van-button @click="showDialog">{{ $t('button3') }}</van-button>
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="show3 = true">{{ $t('button4') }}</van-button>
|
||||
<van-popup v-model="show3" position="top" :overlay="false">
|
||||
{{ $t('content') }}
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="show4 = true">{{ $t('button5') }}</van-button>
|
||||
<van-popup v-model="show4" position="right" :overlay="false">
|
||||
<van-button @click="show4 = false">{{ $t('button6') }}</van-button>
|
||||
</van-popup>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
position: '弹出位置',
|
||||
button1: '弹出 Popup',
|
||||
button2: '底部弹出',
|
||||
button3: '弹出 Dialog',
|
||||
button4: '顶部弹出',
|
||||
button5: '右侧弹出',
|
||||
button6: '关闭弹层'
|
||||
},
|
||||
'en-US': {
|
||||
position: 'Position',
|
||||
button1: 'Show Popup',
|
||||
button2: 'From Bottom',
|
||||
button3: 'Show Dialog',
|
||||
button4: 'From Top',
|
||||
button5: 'From Right',
|
||||
button6: 'Close Popup'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.show3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showDialog() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-popup {
|
||||
.van-button {
|
||||
margin: 10px 0 10px 15px;
|
||||
}
|
||||
|
||||
.van-popup {
|
||||
width: 60%;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--bottom {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&--top {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
line-height: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&--left,
|
||||
&--right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
docs/demos/views/progress.vue
Normal file
48
docs/demos/views/progress.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-progress :percentage="0" />
|
||||
<van-progress :percentage="46" />
|
||||
<van-progress :percentage="100" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-progress inactive :percentage="0" />
|
||||
<van-progress inactive :percentage="46" />
|
||||
<van-progress inactive :percentage="100" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-progress :pivotText="$t('red')" color="#ed5050" :percentage="26" />
|
||||
<van-progress :pivotText="$t('orange')" color="#f60" :percentage="46" />
|
||||
<van-progress :pivotText="$t('yellow')" color="#f09000" :percentage="66" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '进度条置灰',
|
||||
title3: '样式定制'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Inactive',
|
||||
title3: 'Custom Style'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-progress {
|
||||
.van-progress {
|
||||
margin: 20px 10px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
docs/demos/views/pull-refresh.vue
Normal file
49
docs/demos/views/pull-refresh.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<van-pull-refresh v-model="isLoading">
|
||||
<demo-section name="pull-refresh" background="#fff">
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<p>{{ $t('text') }}: {{ count }}</p>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</van-pull-refresh>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '刷新次数'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Refresh Count'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
isLoading() {
|
||||
if (this.isLoading) {
|
||||
setTimeout(() => {
|
||||
Toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-pull-refresh {
|
||||
p {
|
||||
margin: 10px 0 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
docs/demos/views/radio.vue
Normal file
77
docs/demos/views/radio.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">{{ $t('radio') }} 2</van-radio>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio2" disabled>{{ $t('text1') }}</van-radio>
|
||||
<van-radio name="2" v-model="radio2" disabled>{{ $t('text2') }}</van-radio>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<div class="van-radios">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio name="1">{{ $t('radio') }} 1</van-radio>
|
||||
<van-radio name="2">{{ $t('radio') }} 2</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-radio-group v-model="radio4">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
radio: '单选框',
|
||||
text1: '未选中禁用',
|
||||
text2: '选中且禁用',
|
||||
title3: 'Radio 组',
|
||||
title4: '与 Cell 组件一起使用'
|
||||
},
|
||||
'en-US': {
|
||||
radio: 'Radio',
|
||||
text1: 'Disabled',
|
||||
text2: 'Disabled and checked',
|
||||
title3: 'Radio Group',
|
||||
title4: 'Inside a Cell'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-radio {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
68
docs/demos/views/search.vue
Normal file
68
docs/demos/views/search.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-search :placeholder="$t('placeholder')" v-model="value" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<form action="/">
|
||||
<van-search
|
||||
v-model="value"
|
||||
:placeholder="$t('placeholder')"
|
||||
:showAction="true"
|
||||
@search="onSearch"
|
||||
@cancel="onCancel">
|
||||
</van-search>
|
||||
</form>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-search
|
||||
v-model="value"
|
||||
:showAction="true"
|
||||
@search="onSearch">
|
||||
<div slot="action" @click="onSearch">{{ $t('search') }}</div>
|
||||
</van-search>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '监听对应事件',
|
||||
title3: '自定义行动按钮',
|
||||
placeholder: '请输入商品名称'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Listen to Events',
|
||||
title3: 'Custom Button',
|
||||
placeholder: 'Placeholder'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSearch() {
|
||||
Toast(this.value);
|
||||
},
|
||||
onCancel() {
|
||||
Toast(this.$t('cancel'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-search {
|
||||
.van-search__action div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
docs/demos/views/sku.vue
Normal file
115
docs/demos/views/sku.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showBase"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goodsId="goodsId"
|
||||
:hideStock="sku.hide_stock"
|
||||
:quota="quota"
|
||||
:quotaUsed="quotaUsed"
|
||||
:resetStepperOnHide="resetStepperOnHide"
|
||||
:disableStepperInput="disableStepperInput"
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showBase = true" block>基础用法</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<div class="sku-container">
|
||||
<van-sku
|
||||
v-model="showCustomAction"
|
||||
stepperTitle="我要买"
|
||||
:sku="sku"
|
||||
:goods="goods"
|
||||
:goodsId="goodsId"
|
||||
:hideStock="sku.hide_stock"
|
||||
:showAddCartBtn="true"
|
||||
:quota="quota"
|
||||
:quotaUsed="quotaUsed"
|
||||
:resetStepperOnHide="true"
|
||||
:initialSku="initialSku"
|
||||
@buy-clicked="handleBuyClicked"
|
||||
@add-cart="handleAddCartClicked"
|
||||
>
|
||||
<!-- 隐藏sku messages -->
|
||||
<template slot="sku-messages"></template>
|
||||
<!-- 自定义sku actions -->
|
||||
<template slot="sku-actions" slot-scope="props">
|
||||
<div class="van-sku-actions">
|
||||
<button class="van-sku__add-cart-btn" @click="handlePointClicked">
|
||||
积分兑换
|
||||
</button>
|
||||
<!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
|
||||
<button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
|
||||
买买买
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</van-sku>
|
||||
<van-button type="primary" @click="showCustomAction = true" block>自定义sku actions</van-button>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import data from '../mock/sku';
|
||||
|
||||
const goods = data.goods_info;
|
||||
goods.picture = goods.picture[0];
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showBase: false,
|
||||
showCustomAction: false,
|
||||
sku: data.sku,
|
||||
goods: goods,
|
||||
goodsId: data.goods_id,
|
||||
quota: data.quota,
|
||||
quotaUsed: data.quota_used,
|
||||
disableStepperInput: true,
|
||||
resetStepperOnHide: true,
|
||||
initialSku: {
|
||||
s1: '30349',
|
||||
s2: '1193'
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleBuyClicked(data) {
|
||||
Toast(JSON.stringify(data));
|
||||
},
|
||||
handleAddCartClicked(data) {
|
||||
Toast(JSON.stringify(data));
|
||||
},
|
||||
handlePointClicked() {
|
||||
Toast('积分兑换');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-sku {
|
||||
.sku-container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
docs/demos/views/stepper.vue
Normal file
34
docs/demos/views/stepper.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-stepper v-model="stepper1" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-stepper v-model="stepper1" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-stepper v-model="stepper2" min="5" max="40" step="2" defaultValue="9" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
stepper1: 1,
|
||||
stepper2: null,
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-stepper {
|
||||
.van-stepper {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
docs/demos/views/steps.vue
Normal file
113
docs/demos/views/steps.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-steps :active="active">
|
||||
<van-step>{{ $t('step1') }}</van-step>
|
||||
<van-step>{{ $t('step2') }}</van-step>
|
||||
<van-step>{{ $t('step3') }}</van-step>
|
||||
<van-step>{{ $t('step4') }}</van-step>
|
||||
</van-steps>
|
||||
|
||||
<van-button @click="nextStep">{{ $t('nextStep') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-steps
|
||||
:active="active"
|
||||
icon="logistics"
|
||||
icon-class="steps-success"
|
||||
:title="$t('title')"
|
||||
:description="$t('desc')"
|
||||
>
|
||||
<van-step>{{ $t('step1') }}</van-step>
|
||||
<van-step>{{ $t('step2') }}</van-step>
|
||||
<van-step>{{ $t('step3') }}</van-step>
|
||||
<van-step>{{ $t('step4') }}</van-step>
|
||||
</van-steps>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-steps direction="vertical" :active="0" active-color="#f60">
|
||||
<van-step>
|
||||
<h3>{{ $t('status1') }}</h3>
|
||||
<p>2016-07-12 12:40</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>{{ $t('status2') }}</h3>
|
||||
<p>2016-07-11 10:00</p>
|
||||
</van-step>
|
||||
<van-step>
|
||||
<h3>{{ $t('status3') }}</h3>
|
||||
<p>2016-07-10 09:30</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
nextStep: '下一步',
|
||||
step1: '买家下单',
|
||||
step2: '商家接单',
|
||||
step3: '买家提货',
|
||||
step4: '交易完成',
|
||||
title2: '物流描述',
|
||||
title3: '竖向步骤条',
|
||||
status1: '【城市】物流状态1',
|
||||
status2: '【城市】物流状态',
|
||||
status3: '快件已发货'
|
||||
},
|
||||
'en-US': {
|
||||
nextStep: 'Next Step',
|
||||
step1: 'Step1',
|
||||
step2: 'Step2',
|
||||
step3: 'Step3',
|
||||
step4: 'Step4',
|
||||
title2: 'Description',
|
||||
title3: 'Vertical Steps',
|
||||
status1: '【City】Status1',
|
||||
status2: '【City】Status2',
|
||||
status3: '【City】Status3'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
this.active = ++this.active % 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-steps {
|
||||
.steps-success,
|
||||
.van-icon-location {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
|
||||
.van-steps__message + p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p,
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
docs/demos/views/submit-bar.vue
Normal file
76
docs/demos/views/submit-bar.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
buttonText="提交订单"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-submit-bar
|
||||
disabled
|
||||
:price="3050"
|
||||
buttonText="提交订单"
|
||||
tip="您的收货地址不支持同城送, 我们已为您推荐快递"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loading')">
|
||||
<van-submit-bar
|
||||
loading
|
||||
:price="3050"
|
||||
buttonText="提交订单"
|
||||
@submit="onClickButton"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-submit-bar
|
||||
:price="3050"
|
||||
buttonText="提交订单"
|
||||
@submit="onClickButton"
|
||||
>
|
||||
<span slot="tip">
|
||||
您的收货地址不支持同城送, <span class="van-edit-address" @click="onClickEditAddress">修改地址 ></span>
|
||||
</span>
|
||||
</van-submit-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickButton() {
|
||||
Toast('点击按钮');
|
||||
},
|
||||
|
||||
onClickEditAddress() {
|
||||
Toast('修改地址');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-submit-bar {
|
||||
.van-submit-bar {
|
||||
position: relative;
|
||||
}
|
||||
.van-edit-address {
|
||||
color: #38F;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
docs/demos/views/swipe.vue
Normal file
80
docs/demos/views/swipe.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-swipe :autoplay="3000">
|
||||
<van-swipe-item>1</van-swipe-item>
|
||||
<van-swipe-item>2</van-swipe-item>
|
||||
<van-swipe-item>3</van-swipe-item>
|
||||
<van-swipe-item>4</van-swipe-item>
|
||||
</van-swipe>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-swipe :autoplay="3000">
|
||||
<van-swipe-item v-for="(image, index) in images" :key="index">
|
||||
<img v-lazy="image" />
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '图片懒加载'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Image Lazyload'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-swipe {
|
||||
padding-bottom: 30px;
|
||||
|
||||
.van-swipe {
|
||||
cursor: pointer;
|
||||
|
||||
&-item {
|
||||
color: #fff;
|
||||
min-height: 140px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 150px;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
display: block;
|
||||
padding: 30px 60px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
docs/demos/views/switch-cell.vue
Normal file
45
docs/demos/views/switch-cell.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" disabled :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loading')">
|
||||
<van-cell-group>
|
||||
<van-switch-cell v-model="checked" loading :title="$t('title')" />
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
|
||||
},
|
||||
'en-US': {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
</style>
|
||||
61
docs/demos/views/switch.vue
Normal file
61
docs/demos/views/switch.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-switch v-model="checked" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-switch v-model="checked" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('loading')">
|
||||
<van-switch v-model="checked" loading />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-switch :value="checked2" @input="onInput" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title: '提醒',
|
||||
message: '是否切换开关？'
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Confirm',
|
||||
message: 'Are you sure to toggle switch?'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checked: true,
|
||||
checked2: true
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(checked) {
|
||||
Dialog.confirm({
|
||||
title: this.$t('title'),
|
||||
message: this.$t('message')
|
||||
}).then(() => {
|
||||
this.checked2 = checked;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-switch {
|
||||
.van-switch {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
docs/demos/views/tab.vue
Normal file
112
docs/demos/views/tab.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tabs :active="active">
|
||||
<van-tab :title="$t('tab') + index" v-for="index in 4" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-tabs>
|
||||
<van-tab v-for="index in 8" :title="$t('tab') + index" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tab v-for="index in 4" :title="$t('tab') + index" :disabled="index === 2" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title4')">
|
||||
<van-tabs type="card">
|
||||
<van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-tabs @click="handleTabClick">
|
||||
<van-tab v-for="index in 4" :title="$t('tab') + index" :key="index">
|
||||
{{ $t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
tab: '选项 ',
|
||||
title2: '横向滚动',
|
||||
title3: '禁用标签',
|
||||
title4: '样式风格',
|
||||
title5: '点击事件'
|
||||
},
|
||||
'en-US': {
|
||||
tab: 'Tab ',
|
||||
content: 'content of tab',
|
||||
title2: 'Swipe Tabs',
|
||||
title3: 'Disabled Tab',
|
||||
title4: 'Card Style',
|
||||
title5: 'Click Event'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.active = 3;
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickDisabled() {
|
||||
Toast('Disabled!');
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
Toast(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-tab {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
docs/demos/views/tabbar.vue
Normal file
60
docs/demos/views/tabbar.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tabbar v-model="active">
|
||||
<van-tabbar-item icon="shop">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat" dot>{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="records" info="5">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="gold-coin" info="20">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-tabbar v-model="active2">
|
||||
<van-tabbar-item icon="shop">
|
||||
<span>{{ $t('custom') }}</span>
|
||||
<img slot="icon" :src="active2 === 0 ? icon.active : icon.normal" />
|
||||
</van-tabbar-item>
|
||||
<van-tabbar-item icon="chat">{{ $t('tab') }}</van-tabbar-item>
|
||||
<van-tabbar-item icon="records">{{ $t('tab') }}</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '自定义图标'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom icon'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
active2: 0,
|
||||
icon: {
|
||||
normal: 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
|
||||
active: 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-tabbar {
|
||||
.van-tabbar {
|
||||
position: relative;
|
||||
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
docs/demos/views/tag.vue
Normal file
53
docs/demos/views/tag.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tag>{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="success">{{ $t('tag') }}</van-tag>
|
||||
<van-tag type="primary">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-tag plain>{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag plain type="success">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-tag mark>{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="danger">{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="primary">{{ $t('tag') }}</van-tag>
|
||||
<van-tag mark type="success">{{ $t('tag') }}</van-tag>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '空心样式',
|
||||
title3: '标记样式'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Plain style',
|
||||
title3: 'Mark style'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-tag {
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
docs/demos/views/toast.vue
Normal file
95
docs/demos/views/toast.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('title1')">
|
||||
<van-button @click="showToast">{{ $t('title1') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title2')">
|
||||
<van-button @click="showLoadingToast">{{ $t('title2') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title3')">
|
||||
<van-button @click="showSuccessToast">{{ $t('success') }}</van-button>
|
||||
<van-button @click="showFailToast">{{ $t('fail') }}</van-button>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-button @click="showCustomizedToast">{{ $t('advancedUsage') }}</van-button>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title1: '文字提示',
|
||||
title2: '加载提示',
|
||||
title3: '成功/失败提示',
|
||||
success: '成功提示',
|
||||
fail: '失败提示',
|
||||
text1: '我是提示文案，建议不超过十五字~',
|
||||
text2: '成功文案',
|
||||
text3: '失败文案',
|
||||
text4: second => `倒计时 ${second} 秒`
|
||||
},
|
||||
'en-US': {
|
||||
title1: 'Text',
|
||||
title2: 'Loading',
|
||||
title3: 'Success/Fail',
|
||||
success: 'Success',
|
||||
fail: 'Fail',
|
||||
text1: 'Some messages',
|
||||
text2: 'Success',
|
||||
text3: 'Fail',
|
||||
text4: second => `${second} seconds`
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast(this.$t('text1'));
|
||||
},
|
||||
|
||||
showLoadingToast() {
|
||||
Toast.loading({ mask: true });
|
||||
},
|
||||
|
||||
showSuccessToast() {
|
||||
Toast.success(this.$t('text2'));
|
||||
},
|
||||
|
||||
showFailToast() {
|
||||
Toast.fail(this.$t('text3'));
|
||||
},
|
||||
|
||||
showCustomizedToast(duration) {
|
||||
const toast = Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
message: this.$t('text4')(3)
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = this.$t('text4')(second);
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-toast {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
119
docs/demos/views/tree-select.vue
Normal file
119
docs/demos/views/tree-select.vue
Normal file
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-tree-select
|
||||
:items="items"
|
||||
:mainActiveIndex="mainActiveIndex"
|
||||
:activeId="activeId"
|
||||
@navclick="onNavClick"
|
||||
@itemclick="onItemClick"
|
||||
/>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
group1: '所有城市',
|
||||
group2: '浙江',
|
||||
group3: '江苏',
|
||||
city1: [{
|
||||
text: '杭州',
|
||||
id: 1001
|
||||
}, {
|
||||
text: '温州',
|
||||
id: 1002
|
||||
}, {
|
||||
text: '宁波',
|
||||
id: 1003
|
||||
}, {
|
||||
text: '义乌',
|
||||
id: 1004
|
||||
}],
|
||||
city2: [{
|
||||
text: '无锡',
|
||||
id: 1011
|
||||
}, {
|
||||
text: '常州',
|
||||
id: 1012
|
||||
}, {
|
||||
text: '莆田',
|
||||
id: 1013
|
||||
}, {
|
||||
text: '三明',
|
||||
id: 1014
|
||||
}]
|
||||
},
|
||||
'en-US': {
|
||||
group1: 'All',
|
||||
group2: 'Group1',
|
||||
group3: 'Group2',
|
||||
city1: [{
|
||||
text: 'Delaware',
|
||||
id: 1001
|
||||
}, {
|
||||
text: 'Florida',
|
||||
id: 1002
|
||||
}, {
|
||||
text: 'Georqia',
|
||||
id: 1003
|
||||
}, {
|
||||
text: 'Indiana',
|
||||
id: 1004
|
||||
}],
|
||||
city2: [{
|
||||
text: 'Alabama',
|
||||
id: 1011
|
||||
}, {
|
||||
text: 'Kansas',
|
||||
id: 1012
|
||||
}, {
|
||||
text: 'Louisiana',
|
||||
id: 1013
|
||||
}, {
|
||||
text: 'Texas',
|
||||
id: 1014
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mainActiveIndex: 0,
|
||||
activeId: 1001
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
items() {
|
||||
return [{
|
||||
text: this.$t('group1'),
|
||||
children: [...this.$t('city1'), ...this.$t('city2')]
|
||||
}, {
|
||||
text: this.$t('group2'),
|
||||
children: this.$t('city1')
|
||||
}, {
|
||||
text: this.$t('group3'),
|
||||
children: this.$t('city2')
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onNavClick(index) {
|
||||
this.mainActiveIndex = index;
|
||||
},
|
||||
onItemClick(data) {
|
||||
console.log(data);
|
||||
this.activeId = data.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
</style>
|
||||
31
docs/demos/views/uploader.vue
Normal file
31
docs/demos/views/uploader.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="demo-uploader-container">
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph" />
|
||||
</van-uploader>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-uploader {
|
||||
&-container {
|
||||
padding: 10px 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
77
docs/demos/views/waterfall.vue
Normal file
77
docs/demos/views/waterfall.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<p class="page-desc">{{ $t('text') }}</p>
|
||||
<ul
|
||||
v-waterfall-lower="loadMore"
|
||||
waterfall-disabled="disabled"
|
||||
waterfall-offset="400">
|
||||
<li v-for="item in list">{{ item }}</li>
|
||||
</ul>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Waterfall } from 'packages';
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
text: '当即将滚动到元素底部时，会自动加载更多'
|
||||
},
|
||||
'en-US': {
|
||||
text: 'This list will load items will scroll to bottom.'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
disabled: false
|
||||
};
|
||||
},
|
||||
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower')
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
for (let i = 0; i < 5; i ++) {
|
||||
this.list.push(this.list.length);
|
||||
}
|
||||
this.disabled = false;
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-waterfall {
|
||||
ul {
|
||||
max-height: 360px;
|
||||
overflow: scroll;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,126 +0,0 @@
|
||||
<script>
|
||||
import { Dialog } from 'packages';
|
||||
|
||||
const message = 'Content';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
message,
|
||||
title: 'Title',
|
||||
confirmButtonText: 'ok'
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message,
|
||||
confirmButtonText: 'ok'
|
||||
});
|
||||
},
|
||||
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: 'Title',
|
||||
message,
|
||||
confirmButtonText: 'ok',
|
||||
cancelButtonText: 'cancel'
|
||||
}).catch(action => {
|
||||
console.log(action);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Dialog
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Alert dialog
|
||||
Used to prompt for some messages, only including one confirm button
|
||||
|
||||
:::demo Alert dialog
|
||||
```html
|
||||
<van-button @click="onClickAlert">Alert</van-button>
|
||||
<van-button @click="onClickAlert2">Alert without title</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
title: 'Title',
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Confirm dialog
|
||||
Used to confirm some messages, including a confirm button and a cancel button
|
||||
|
||||
:::demo Confirm dialog
|
||||
```html
|
||||
<van-button @click="onClickConfirm">Confirm</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: 'Title',
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on confirm
|
||||
}).catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### Methods
|
||||
|
||||
| Name | Attribute | Return value | Description |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Dialog.alert | options | `Promise` | Show alert dialog |
|
||||
| Dialog.confirm | options | `Promise` | Show confim dialog |
|
||||
| Dialog.close | - | `void` | Close dialog |
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | Title | `String` | - | - |
|
||||
| message | Message | `String` | - | - |
|
||||
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` | - |
|
||||
| showCancelButton | Whether to show cancel button | `Boolean` | `false` | - |
|
||||
| confirmButtonText | Confirm button text | `String` | `确认` | - |
|
||||
| cancelButtonText | Cancel button test | `String` | `取消` | - |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` | - |
|
||||
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
|
||||
| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
|
||||
@ -1,52 +0,0 @@
|
||||
<script>
|
||||
import { ImagePreview } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## ImagePreview
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-button @click="showImagePreview">Show</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### Arguments
|
||||
|
||||
| Attribute | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | Image URL list | `Array` |
|
||||
@ -1,119 +0,0 @@
|
||||
<script>
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.show3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showDialog() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Popup
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.component(Popup.name, Popup);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Popup is located in the middle of the screen by default
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-button @click="show1 = true">Show Popup</van-button>
|
||||
<van-popup v-model="show1">Content</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Different Position
|
||||
Use `position` prop to set popup display position
|
||||
|
||||
:::demo Different Position
|
||||
```html
|
||||
<van-button @click="show2 = true;">From Bottom</van-button>
|
||||
<van-popup v-model="show2" position="bottom">
|
||||
<van-button @click="showDialog">Show Dialog</van-button>
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="show3 = true">From Top</van-button>
|
||||
<van-popup v-model="show3" position="top" :overlay="false">Content</van-popup>
|
||||
|
||||
<van-button @click="show4 = true">From Right</van-button>
|
||||
<van-popup v-model="show4" position="right" :overlay="false">
|
||||
<van-button @click="show4 = false">Close</van-button>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.show2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | Whether to show popup | `Boolean` | `false` | - |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` | - |
|
||||
| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
|
||||
| position | Position | `String` | - | `top` `bottom` `right` `left` |
|
||||
| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
|
||||
| transition | Transition | `String` | `popup-slide` | - |
|
||||
| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
|
||||
@ -1,339 +0,0 @@
|
||||
<style>
|
||||
.demo-tab {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.active = 3;
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
onClickDisabled() {
|
||||
Toast('Disabled!');
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Tabs
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Tab, Tabs } from 'vant';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
By default, the first tab is actived.
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</van-tab>
|
||||
<van-tab title="tab 2">
|
||||
content of tab 2
|
||||
</van-tab>
|
||||
<van-tab title="tab 3">
|
||||
content of tab 3
|
||||
</van-tab>
|
||||
<van-tab title="tab 4">
|
||||
content of tab 4
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Active Specified tab
|
||||
|
||||
You can set `active` attribute on `van-tabs` to active specified tab.
|
||||
|
||||
:::demo Active Specified tab
|
||||
```html
|
||||
<van-tabs :active="active">
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</van-tab>
|
||||
<van-tab title="tab 2">
|
||||
content of tab 2
|
||||
</van-tab>
|
||||
<van-tab title="tab 3">
|
||||
content of tab 3
|
||||
</van-tab>
|
||||
<van-tab title="tab 4">
|
||||
content of tab 4
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Tab duration time
|
||||
|
||||
You can use `duration` attribute to set tab duration time, the default time is `0.3s`.
|
||||
|
||||
:::demo Tab duration time
|
||||
```html
|
||||
<van-tabs :duration="0.6">
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</van-tab>
|
||||
<van-tab title="tab 2">
|
||||
content of tab 2
|
||||
</van-tab>
|
||||
<van-tab title="tab 3">
|
||||
content of tab 3
|
||||
</van-tab>
|
||||
<van-tab title="tab 4">
|
||||
content of tab 4
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Swipe Tabs
|
||||
|
||||
By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number.
|
||||
|
||||
:::demo Swipe Tabs
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</van-tab>
|
||||
<van-tab title="tab 2">
|
||||
content of tab 2
|
||||
</van-tab>
|
||||
<van-tab title="tab 3">
|
||||
content of tab 3
|
||||
</van-tab>
|
||||
<van-tab title="tab 4">
|
||||
content of tab 4
|
||||
</van-tab>
|
||||
<van-tab title="tab 5">
|
||||
content of tab 5
|
||||
</van-tab>
|
||||
<van-tab title="tab 6">
|
||||
content of tab 6
|
||||
</van-tab>
|
||||
<van-tab title="tab 7">
|
||||
content of tab 7
|
||||
</van-tab>
|
||||
<van-tab title="tab 8">
|
||||
content of tab 8
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled Tab
|
||||
|
||||
You can set `disabled` attribute on the corresponding `van-tab`.
|
||||
|
||||
:::demo Disabled Tab
|
||||
```html
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</van-tab>
|
||||
<van-tab title="tab 2">
|
||||
content of tab 2
|
||||
</van-tab>
|
||||
<van-tab title="tab 3">
|
||||
content of tab 3
|
||||
</van-tab>
|
||||
<van-tab title="tab 4">
|
||||
content of tab 4
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickDisabled() {
|
||||
Toast('Disabled!');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Card Style
|
||||
|
||||
Tabs styled as cards.
|
||||
|
||||
:::demo Card Style
|
||||
```html
|
||||
<van-tabs type="card">
|
||||
<van-tab title="tab 1">
|
||||
content of tab 1
|
||||
</van-tab>
|
||||
<van-tab title="tab 2">
|
||||
content of tab 2
|
||||
</van-tab>
|
||||
<van-tab title="tab 3">
|
||||
content of tab 3
|
||||
</van-tab>
|
||||
<van-tab title="tab 4">
|
||||
content of tab 4
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
<style>
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
#### Custom Style
|
||||
|
||||
You can set `css class` to customize tabs style.
|
||||
|
||||
:::demo Custom Style
|
||||
```html
|
||||
<van-tabs active="2" class="custom-tabwrap">
|
||||
<van-tab title="tab 1" class="custom-pane">
|
||||
content of tab 1
|
||||
</van-tab>
|
||||
<van-tab title="tab 2" class="custom-pane">
|
||||
content of tab 2
|
||||
</van-tab>
|
||||
<van-tab title="tab 3" class="custom-pane">
|
||||
content of tab 3
|
||||
</van-tab>
|
||||
<van-tab title="tab 4" class="custom-pane">
|
||||
content of tab 4
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<style>
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Click Event
|
||||
|
||||
You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab.
|
||||
|
||||
:::demo Click Event
|
||||
```html
|
||||
<van-tabs @click="handleTabClick">
|
||||
<van-tab title="tab 1" class="custom-pane">
|
||||
content of tab 1
|
||||
</van-tab>
|
||||
<van-tab title="tab 2" class="custom-pane">
|
||||
content of tab 2
|
||||
</van-tab>
|
||||
<van-tab title="tab 3" class="custom-pane">
|
||||
content of tab 3
|
||||
</van-tab>
|
||||
<van-tab title="tab 4" class="custom-pane">
|
||||
content of tab 4
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### van-tabs API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `line`, `card` |
|
||||
| active | Index of active tab | `String`, `Number` | `0` | - |
|
||||
| duration | Toggle tab's animation time | `Number` | `0.3` | - | - |
|
||||
| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
|
||||
|
||||
### van-tab API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | Tab title | `String` | - | - |
|
||||
| disabled | Whether disabled current tab | `Boolean` | `false` | - |
|
||||
|
||||
### van-tabs Event
|
||||
|
||||
| Event | Description | Attribute |
|
||||
|-----------|-----------|-----------|
|
||||
| click | Triggered when click tab | index：index of current tab |
|
||||
| disabled | Triggered when click disabled tab | index：index of current tab |
|
||||
|
||||
@ -1,160 +0,0 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast('Some messages');
|
||||
},
|
||||
showLoadingToast() {
|
||||
Toast.loading({ mask: true });
|
||||
},
|
||||
showSuccessToast() {
|
||||
Toast.success('Success');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('Fail');
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
const toast = Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
message: '3 seconds'
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = `${second} seconds`;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Toast
|
||||
|
||||
### Install
|
||||
|
||||
```javascript
|
||||
import { Toast } from 'vant';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Text
|
||||
|
||||
:::demo Text
|
||||
```html
|
||||
<van-button @click="showToast">Show Text</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast('Some messages');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### Loading
|
||||
|
||||
:::demo Loading
|
||||
```html
|
||||
<van-button @click="showLoadingToast">Show Loading</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showLoadingToast() {
|
||||
Toast.loading({ mask: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### Success/Fail
|
||||
|
||||
:::demo Success/Fail
|
||||
```html
|
||||
<van-button @click="showSuccessToast">Show Success</van-button>
|
||||
<van-button @click="showFailToast">Show Fail</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showSuccessToast() {
|
||||
Toast.success('Success');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('Fail');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
:::demo Advanced Usage
|
||||
```html
|
||||
<van-button @click="showCustomizedToast">Advanced Usage</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showCustomizedToast() {
|
||||
const toast = Toast.loading({
|
||||
duration: 0, // continuous display toast
|
||||
forbidClick: true, // forbid click background
|
||||
message: '3 seconds'
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = `${second} seconds`;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### Methods
|
||||
|
||||
| Methods | Attribute | Return value | Description |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Toast | `options | message` | toast instance | Show toast |
|
||||
| Toast.loading | `options | message` | toast instance | Show loading toast |
|
||||
| Toast.success | `options | message` | toast instance | Show success toast |
|
||||
| Toast.fail | `options | message` | toast instance | Show fail toast |
|
||||
| Toast.clear | - | `void` | Close |
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | Type | `String` | `text` | `loading` `success` `fail` `html` |
|
||||
| message | Message | `String` | `''` | - |
|
||||
| position | Position | `String` | `middle` | `top` `bottom` |
|
||||
| mask | Whether to show mask | `Boolean` | `false` | - |
|
||||
| forbidClick | Whether to forbid click background | `Boolean` | `false` | - |
|
||||
| duration | Toast duration(ms) | `Number` | `3000` | Toast won't disappear if value is 0 |
|
||||
@ -1,57 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Uploader
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Uploader } from 'vant';
|
||||
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
</van-uploader>
|
||||
</div>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
|
||||
| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
|
||||
| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | Description |
|
||||
|-----------|-----------|
|
||||
| - | 自定义上传显示图标 |
|
||||
@ -1,181 +0,0 @@
|
||||
<style>
|
||||
.demo-actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06BF04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
actions: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.onClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(item) {
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Actionsheet 行动按钮
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Actionsheet } from 'vant';
|
||||
|
||||
Vue.component(Actionsheet.name, Actionsheet);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @click="show1 = true">弹出 Actionsheet</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
actions: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.onClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(item) {
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带取消按钮的 Actionsheet
|
||||
|
||||
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
|
||||
|
||||
:::demo 带取消按钮的 Actionsheet
|
||||
```html
|
||||
<van-button @click="show2 = true">弹出带取消按钮的 Actionsheet</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions" cancel-text="取消">
|
||||
</van-actionsheet>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show2: false,
|
||||
actions: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.onClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带标题的 Actionsheet
|
||||
|
||||
如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
|
||||
|
||||
:::demo 带标题的 Actionsheet
|
||||
```html
|
||||
<van-button @click="show3 = true">弹出带标题的 Actionsheet</van-button>
|
||||
<van-actionsheet v-model="show3" title="支持以下配送方式">
|
||||
<p>一些内容</p>
|
||||
</van-actionsheet>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | - |
|
||||
| title | 标题 | `String` | - | - |
|
||||
| cancelText | 取消按钮文案 | `String` | - | - |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | - | - |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
|
||||
|
||||
### actions
|
||||
|
||||
|
||||
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| name | 标题 |
|
||||
| subname | 二级标题 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
| loading | 是否是`loading`状态 |
|
||||
| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
|
||||
@ -1,132 +0,0 @@
|
||||
<style>
|
||||
.demo-dialog {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'packages';
|
||||
|
||||
const message = '弹窗内容';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message
|
||||
});
|
||||
},
|
||||
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message
|
||||
}).catch(action => {
|
||||
console.log(action);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Dialog 弹出框
|
||||
|
||||
### 使用指南
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 消息提示
|
||||
|
||||
用于提示一些消息，只包含一个确认按钮
|
||||
|
||||
:::demo 消息提示
|
||||
```html
|
||||
<van-button @click="onClickAlert">Alert</van-button>
|
||||
<van-button @click="onClickAlert2">无标题 Alert</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickAlert() {
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
},
|
||||
|
||||
onClickAlert2() {
|
||||
Dialog.alert({
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮
|
||||
|
||||
:::demo 消息确认
|
||||
```html
|
||||
<van-button @click="onClickConfirm">Confirm</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickConfirm() {
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容'
|
||||
}).then(() => {
|
||||
// on confirm
|
||||
}).catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Dialog.alert | options | `Promise` | 展示消息提示弹窗 |
|
||||
| Dialog.confirm | options | `Promise` | 展示消息确认弹窗 |
|
||||
| Dialog.close | - | `void` | 关闭弹窗 |
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `String` | - | - |
|
||||
| message | 内容 | `String` | - | - |
|
||||
| showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - |
|
||||
| showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - |
|
||||
| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - |
|
||||
| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - |
|
||||
| overlay | 是否展示蒙层 | `Boolean` | `true` | - |
|
||||
| closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - |
|
||||
| lockOnScroll | 是否禁用背景滚动 | `Boolean` | `true` | - |
|
||||
@ -1,172 +0,0 @@
|
||||
<style>
|
||||
.demo-icon {
|
||||
font-size: 0;
|
||||
|
||||
.examples {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
|
||||
.van-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
display: none;
|
||||
font-size: 32px;
|
||||
margin: 15px 0;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
|
||||
const icons = [
|
||||
'close',
|
||||
'location',
|
||||
'clock',
|
||||
'gold-coin',
|
||||
'chat',
|
||||
'exchange',
|
||||
'upgrade',
|
||||
'edit',
|
||||
'contact',
|
||||
'passed',
|
||||
'points',
|
||||
'delete',
|
||||
'records',
|
||||
'logistics',
|
||||
'check',
|
||||
'checked',
|
||||
'gift',
|
||||
'like-o',
|
||||
'like',
|
||||
'qr',
|
||||
'qr-invalid',
|
||||
'shop',
|
||||
'photograph',
|
||||
'add',
|
||||
'add2',
|
||||
'photo',
|
||||
'cart',
|
||||
'arrow',
|
||||
'search',
|
||||
'clear',
|
||||
'success',
|
||||
'fail',
|
||||
'wechat',
|
||||
'alipay',
|
||||
'password-view',
|
||||
'wap-nav',
|
||||
'password-not-view',
|
||||
'wap-home',
|
||||
'ecard-pay',
|
||||
'balance-pay',
|
||||
'peer-pay',
|
||||
'credit-pay',
|
||||
'debit-pay',
|
||||
'other-pay',
|
||||
'shopping-cart',
|
||||
'browsing-history',
|
||||
'goods-collect',
|
||||
'shop-collect',
|
||||
'receive-gift',
|
||||
'send-gift',
|
||||
'setting',
|
||||
'coupon',
|
||||
'free-postage',
|
||||
'discount',
|
||||
'birthday-privilege',
|
||||
'member-day-privilege',
|
||||
'balance-details',
|
||||
'cash-back-record',
|
||||
'points-mall',
|
||||
'exchange-record',
|
||||
'pending-payment',
|
||||
'pending-orders',
|
||||
'pending-deliver',
|
||||
'pending-evaluate',
|
||||
'cash-on-deliver',
|
||||
'gift-card-pay',
|
||||
'underway',
|
||||
'point-gift',
|
||||
'after-sale',
|
||||
'edit-data',
|
||||
'question',
|
||||
'description',
|
||||
'card',
|
||||
'gift-card',
|
||||
'completed',
|
||||
'value-card',
|
||||
'certificate',
|
||||
'tosend',
|
||||
'sign',
|
||||
'home',
|
||||
'phone'
|
||||
];
|
||||
|
||||
const IconListConstructor = Vue.extend({
|
||||
render(h) {
|
||||
return (
|
||||
<div>
|
||||
{icons.map(icon => (
|
||||
<van-col span="8">
|
||||
<van-icon name={icon}></van-icon>
|
||||
<span>{icon}</span>
|
||||
</van-col>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
const IconList = new IconListConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
const block = document.querySelector('.zan-doc-demo-block');
|
||||
if (block) {
|
||||
block.appendChild(IconList.$el);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Icon 图标
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Icon } from 'vant';
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
设置`name`属性为对应的图标名称即可，所有可用的图标名称见右侧列表
|
||||
:::demo 图标列表
|
||||
```html
|
||||
<van-icon name="success" />
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | icon名称 | `String` | `''` | - |
|
||||
@ -1,89 +0,0 @@
|
||||
<style>
|
||||
.demo-image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
.van-image-preview {
|
||||
img {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showImagePreview(position) {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
], typeof position === 'number' ? position : 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## ImagePreview 图片预览
|
||||
|
||||
### 使用指南
|
||||
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @click="showImagePreview">预览图片</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 指定初始位置
|
||||
|
||||
:::demo 指定初始位置
|
||||
```html
|
||||
<van-button @click="showImagePreview(1)">指定初始位置</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showImagePreview(startPosition) {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
], startPosition);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### 方法参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | 需要预览的图片 | `Array` |
|
||||
| startPosition | 图片预览起始位置索引 | `Number` |
|
||||
@ -1,153 +0,0 @@
|
||||
<style>
|
||||
.demo-lazyload {
|
||||
padding: 15px;
|
||||
|
||||
img,
|
||||
div[lazy] {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin: 10px 0 0;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
background-size: 315px 250px;
|
||||
background-position: 15px;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zan-doc-demo-block__title,
|
||||
.zan-doc-demo-block__subtitle {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
|
||||
],
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
|
||||
],
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
|
||||
'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleComponentShow() {
|
||||
console.log('component show');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Lazyload 图片懒加载
|
||||
|
||||
### 使用指南
|
||||
|
||||
`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Lazyload } from 'vant';
|
||||
|
||||
Vue.use(Lazyload, options);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
将`v-lazy`指令的值设置为你需要懒加载的图片
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<img v-for="img in imageList" v-lazy="img">
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 背景图懒加载
|
||||
|
||||
和图片懒加载不同，背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。
|
||||
|
||||
:::demo 背景图懒加载
|
||||
```html
|
||||
<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 懒加载模块
|
||||
|
||||
懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
|
||||
|
||||
:::demo 懒加载模块
|
||||
```html
|
||||
<lazy-component>
|
||||
<img v-for="img in componentImageList" v-lazy="img">
|
||||
</lazy-component>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| loading | 加载时的图片 | `String` | - | - |
|
||||
| error | 错误时的图片 | `String` | - | - |
|
||||
| preload | 预加载高度的比例 | `String` | - | - |
|
||||
| attempt | 尝试次数 | `Number` | `3` | - |
|
||||
| listenEvents | 监听的事件 | `Array` | `scroll`等 | - |
|
||||
| adapter | 适配器 | `Object` | - | - |
|
||||
| filter | 图片url过滤 | `Object` | - | - |
|
||||
| lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
|
||||
|
||||
更多内容请参照：[ vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
|
||||
@ -1,53 +0,0 @@
|
||||
<style>
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
display: inline-block;
|
||||
margin: 10px 0 10px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading 加载
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Loading } from 'vant';
|
||||
|
||||
Vue.component(Loading.name, Loading);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 单色圆环
|
||||
|
||||
:::demo 单色圆环
|
||||
```html
|
||||
<van-loading type="circle" color="black"></van-loading>
|
||||
<van-loading type="circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 渐变色圆环
|
||||
|
||||
:::demo 渐变色圆环
|
||||
```html
|
||||
<van-loading type="gradient-circle" color="black"></van-loading>
|
||||
<van-loading type="gradient-circle" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Spinner
|
||||
|
||||
:::demo Spinner
|
||||
```html
|
||||
<van-loading type="spinner" color="black"></van-loading>
|
||||
<van-loading type="spinner" color="white"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | 颜色 | `String` | `black` | `black` `white` |
|
||||
| type | 类型 | `String` | `gradient-circle` | `spinner` `circle` |
|
||||
@ -1,154 +0,0 @@
|
||||
<style>
|
||||
.demo-popup {
|
||||
.van-button {
|
||||
margin: 10px 0 10px 15px;
|
||||
}
|
||||
|
||||
.van-popup {
|
||||
width: 60%;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&--bottom {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&--top {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
line-height: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&--left,
|
||||
&--right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.show3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showDialog() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
message: '弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。弹窗提示文字，左右始终距离边20PX，上下距离20PX，文字左对齐。'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Popup 弹出层
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.component(Popup.name, Popup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
`popup`默认从中间弹出
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-button @click="show1 = true">弹出 Popup</van-button>
|
||||
<van-popup v-model="show1">内容</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### 弹出位置
|
||||
通过`position`属性设置 Popup 弹出位置
|
||||
|
||||
:::demo 弹出位置
|
||||
```html
|
||||
<van-button @click="show2 = true;">底部弹出</van-button>
|
||||
<van-popup v-model="show2" position="bottom">
|
||||
<van-button @click="showDialog">弹出 Dialog</van-button>
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="show3 = true">顶部弹出</van-button>
|
||||
<van-popup v-model="show3" position="top" :overlay="false">
|
||||
更新成功
|
||||
</van-popup>
|
||||
|
||||
<van-button @click="show4 = true">右侧弹出</van-button>
|
||||
<van-popup v-model="show4" position="right" :overlay="false">
|
||||
<van-button @click="show4 = false">关闭弹层</van-button>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
show2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.show2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | 当前组件是否显示 | `Boolean` | `false` | - |
|
||||
| overlay | 是否显示背景遮罩层 | `Boolean` | `true` | - |
|
||||
| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
|
||||
| position | 弹出层位置 | `String` | - | `top` `bottom` `right` `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出层 | `Boolean` | `true` | - |
|
||||
| transition | 弹出层的`transition` | `String` | `popup-slide` | - |
|
||||
| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
|
||||
@ -1,257 +0,0 @@
|
||||
<style>
|
||||
.demo-tab {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.active = 3;
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
onClickDisabled() {
|
||||
Toast('Disabled!');
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Tabs 标签页
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Tab, Tabs } from 'vant';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况下是启用第一个`tab`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### active特定tab
|
||||
|
||||
可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-tabs :active="active">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 设置切换tab的动画时间
|
||||
|
||||
通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
|
||||
|
||||
:::demo 设置切换tab的动画时间
|
||||
```html
|
||||
<van-tabs :duration="0.6">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 横向滚动tab
|
||||
|
||||
默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
|
||||
|
||||
:::demo 横向滚动tab
|
||||
```html
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
<van-tab title="选项六">内容六</van-tab>
|
||||
<van-tab title="选项七">内容七</van-tab>
|
||||
<van-tab title="选项八">内容八</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用tab
|
||||
|
||||
在对应的`van-tab`上设置`disabled`属性即可。如果需要监听禁用事件，可以在`van-tabs`上监听`disabled`事件。
|
||||
|
||||
:::demo 禁用tab
|
||||
```html
|
||||
<van-tabs @disabled="onClickDisabled">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled>内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
onClickDisabled() {
|
||||
Toast('Disabled!')
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### card样式
|
||||
|
||||
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
|
||||
|
||||
:::demo card样式
|
||||
```html
|
||||
<van-tabs type="card">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
<style>
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
#### 自定义样式
|
||||
|
||||
可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
|
||||
|
||||
:::demo 自定义样式
|
||||
```html
|
||||
<van-tabs active="2" class="custom-tabwrap">
|
||||
<van-tab title="选项一" class="custom-pane">内容一</van-tab>
|
||||
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
|
||||
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
|
||||
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<style>
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
:::
|
||||
|
||||
#### click事件
|
||||
|
||||
可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
|
||||
|
||||
:::demo click事件
|
||||
```html
|
||||
<van-tabs @click="handleTabClick">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### van-tabs API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 两种UI | `String` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `String`, `Number` | `0` | - |
|
||||
| duration | 切换tab的动画时间 | `Number` | `0.3` | - | - |
|
||||
| swipeThreshold | 滚动阀值，默认是超过4个tab时标签页可滚动，通过这个属性可以设置超过多少个可滚动 | `Number` | `4` | - | - |
|
||||
|
||||
|
||||
### van-tab API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `String` | - | - |
|
||||
| disabled | 是否禁用这个tab | `Boolean` | `false` | - |
|
||||
|
||||
### van-tabs Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
|
||||
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
|
||||
|
||||
@ -1,168 +0,0 @@
|
||||
<style>
|
||||
.demo-toast {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
showLoadingToast() {
|
||||
Toast.loading({ mask: true });
|
||||
},
|
||||
showSuccessToast() {
|
||||
Toast.success('成功文案');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
const toast = Toast.loading({
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
message: '倒计时 3 秒'
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = `倒计时 ${second} 秒`;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Toast 轻提示
|
||||
|
||||
### 使用指南
|
||||
|
||||
```javascript
|
||||
import { Toast } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 文字提示
|
||||
|
||||
:::demo 文字提示
|
||||
```html
|
||||
<van-button @click="showToast">文字提示</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 加载提示
|
||||
|
||||
:::demo 加载提示
|
||||
```html
|
||||
<van-button @click="showLoadingToast">加载提示</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showLoadingToast() {
|
||||
Toast.loading({ mask: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 成功/失败提示
|
||||
|
||||
:::demo 成功/失败提示
|
||||
```html
|
||||
<van-button @click="showSuccessToast">成功提示</van-button>
|
||||
<van-button @click="showFailToast">失败提示</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showSuccessToast() {
|
||||
Toast.success('成功文案');
|
||||
},
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<van-button @click="showCustomizedToast">高级用法</van-button>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
methods: {
|
||||
showCustomizedToast() {
|
||||
const toast = Toast.loading({
|
||||
duration: 0, // 持续展示 toast
|
||||
forbidClick: true, // 禁用背景点击
|
||||
message: '倒计时 3 秒'
|
||||
});
|
||||
|
||||
let second = 3;
|
||||
const timer = setInterval(() => {
|
||||
second--;
|
||||
if (second) {
|
||||
toast.message = `倒计时 ${second} 秒`;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
Toast.clear();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Toast | `options | message` | toast 实例 | 展示提示 |
|
||||
| Toast.loading | `options | message` | toast 实例 | 展示加载提示 |
|
||||
| Toast.success | `options | message` | toast 实例 | 展示成功提示 |
|
||||
| Toast.fail | `options | message` | toast 实例 | 展示失败提示 |
|
||||
| Toast.clear | - | `void` | 关闭提示 |
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 提示类型 | `String` | `text` | `loading` `success` `fail` `html` |
|
||||
| message | 内容 | `String` | `''` | - |
|
||||
| position | 位置 | `String` | `middle` | `top` `bottom` |
|
||||
| mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
|
||||
| forbidClick | 禁止背景点击 | `Boolean` | `false` | - |
|
||||
| duration | 时长(ms) | `Number` | `3000` | 值为 0 时，toast 不会消失 |
|
||||
@ -1,28 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
actions: [
|
||||
{ name: 'Option1', callback: this.onClick },
|
||||
{ name: 'Option2' },
|
||||
{ name: 'Option3', loading: true }
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(item) {
|
||||
Toast(item.name);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Actionsheet
|
||||
|
||||
### Install
|
||||
@ -37,17 +12,15 @@ Vue.component(Actionsheet.name, Actionsheet);
|
||||
#### Basic Usage
|
||||
Use `actions` prop to set options of actionsheet.
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-button @click="show1 = true">Show Actionsheet</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions" />
|
||||
<van-actionsheet v-model="show" :actions="actions" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
show: false,
|
||||
actions: [
|
||||
{ name: 'Option1', callback: this.onClick },
|
||||
{ name: 'Option2' },
|
||||
@ -63,28 +36,21 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### Actionsheet with cancel button
|
||||
|
||||
:::demo Actionsheet with cancel button
|
||||
```html
|
||||
<van-button @click="show2 = true">Show Actionsheet with cancel button</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions" cancel-text="Cancel" />
|
||||
<van-actionsheet v-model="show" :actions="actions" cancelText="Cancel" />
|
||||
```
|
||||
:::
|
||||
|
||||
#### Actionsheet with title
|
||||
Actionsheet will get another style if there is a `title` prop.
|
||||
|
||||
:::demo Actionsheet with title
|
||||
```html
|
||||
<van-button @click="show3 = true">Show Actionsheet with title</van-button>
|
||||
<van-actionsheet v-model="show3" title="Title">
|
||||
<van-actionsheet v-model="show" title="Title">
|
||||
<p>Content</p>
|
||||
</van-actionsheet>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -1,41 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
import areaList from '../../mock/area.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList,
|
||||
searchResult: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSave() {
|
||||
Toast('save');
|
||||
},
|
||||
onDelete() {
|
||||
Toast('delete');
|
||||
},
|
||||
onChangeDetail(val) {
|
||||
if (val) {
|
||||
this.searchResult = [{
|
||||
name: '黄龙万科中心',
|
||||
address: '杭州市西湖区'
|
||||
}, {
|
||||
name: '黄龙万科中心H座'
|
||||
}, {
|
||||
name: '黄龙万科中心H座',
|
||||
address: '杭州市西湖区'
|
||||
}];
|
||||
} else {
|
||||
this.searchResult = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## AddressEdit
|
||||
|
||||
### Install
|
||||
@ -49,14 +11,14 @@ Vue.component(AddressEdit.name, AddressEdit);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
|
||||
```html
|
||||
<van-address-edit
|
||||
:area-list="areaList"
|
||||
:show-postal="true"
|
||||
:show-set-default="true"
|
||||
:show-search-result="true"
|
||||
:search-result="searchResult"
|
||||
:areaList="areaList"
|
||||
:showPostal="true"
|
||||
:showSetDefault="true"
|
||||
:showSearchResult="true"
|
||||
:searchResult="searchResult"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
@change-detail="onChangeDetail"
|
||||
@ -92,7 +54,7 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
@ -1,44 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenAddressId: '1',
|
||||
list: [
|
||||
{
|
||||
id: '1',
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '李四',
|
||||
tel: '1310000000',
|
||||
address: '浙江省杭州市拱墅区莫干山路 50 号'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '王五',
|
||||
tel: '1320000000',
|
||||
address: '浙江省杭州市滨江区江南大道 15 号'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
Toast('新增收货地址');
|
||||
},
|
||||
onEdit(item, index) {
|
||||
Toast('编辑收货地址:' + index);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## AddressList
|
||||
|
||||
### Install
|
||||
@ -52,7 +11,6 @@ Vue.component(AddressList.name, AddressList);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-address-list
|
||||
v-model="chosenAddressId"
|
||||
@ -94,7 +52,6 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -1,15 +1,3 @@
|
||||
<script>
|
||||
import AreaList from '../../mock/area.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList: AreaList
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Area
|
||||
|
||||
### Install
|
||||
@ -26,43 +14,26 @@ Vue.component(Area.name, Area);
|
||||
|
||||
要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-area :area-list="areaList"></van-area>
|
||||
|
||||
<script>
|
||||
import AreaList from '../../mock/area.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
areaList: AreaList
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<van-area :areaList="areaList" />
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选中省市县
|
||||
#### Initial Value
|
||||
|
||||
如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
|
||||
|
||||
:::demo 选中省市县
|
||||
```html
|
||||
<van-area :area-list="areaList" value="110101"></van-area>
|
||||
<van-area :areaList="areaList" value="110101" />
|
||||
```
|
||||
:::
|
||||
|
||||
#### 配置显示列
|
||||
#### Columns Number
|
||||
|
||||
可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
|
||||
|
||||
:::demo 配置显示列
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2"></van-area>
|
||||
<van-area :areaList="areaList" :columnsNum="2" />
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
@ -115,7 +86,7 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/mock/area.json)
|
||||
完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
|
||||
|
||||
#### 点击完成时返回的Data Structure
|
||||
返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
|
||||
@ -1,18 +1,3 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClick(key) {
|
||||
this.activeKey = key;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Badge
|
||||
|
||||
### Install
|
||||
@ -25,11 +10,10 @@ Vue.component(Badge.name, Badge);
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Use `active-key` prop to set index of chosen 'badge'
|
||||
Use `activeKey` prop to set index of chosen 'badge'
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-badge-group :active-key="activeKey">
|
||||
<van-badge-group :activeKey="activeKey">
|
||||
<van-badge title="Title" @click="onClick"></van-badge>
|
||||
<van-badge title="Title" @click="onClick" info="8"></van-badge>
|
||||
<van-badge title="Title" @click="onClick" info="99"></van-badge>
|
||||
@ -51,13 +35,12 @@ export default {
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### BadgeGroup API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active-key | Index of chosen badge | `String | Number` | `0` | - |
|
||||
| activeKey | Index of chosen badge | `String | Number` | `0` | - |
|
||||
|
||||
### Badge API
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
@ -11,69 +11,57 @@ Vue.component(Button.name, Button);
|
||||
|
||||
#### Type
|
||||
|
||||
:::demo Type
|
||||
```html
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="danger">Danger</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Size
|
||||
|
||||
:::demo Size
|
||||
```html
|
||||
<van-button size="large">Large</van-button>
|
||||
<van-button size="normal">Normal</van-button>
|
||||
<van-button size="small">Small</van-button>
|
||||
<van-button size="mini">Mini</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
|
||||
:::demo Disabled
|
||||
```html
|
||||
<van-button disabled>Diabled</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Loading
|
||||
|
||||
:::demo Loading
|
||||
```html
|
||||
<van-button loading></van-button>
|
||||
<van-button loading type="primary"></van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Custom Tag
|
||||
Use `tag` prop to custom button tag
|
||||
|
||||
:::demo Custom Tag
|
||||
```html
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
Button
|
||||
</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Action Button
|
||||
|
||||
:::demo Action Button
|
||||
```html
|
||||
<van-button type="primary" bottom-action>Text</van-button>
|
||||
<van-button type="primary" bottomAction>Button</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>Text</van-button>
|
||||
<van-button bottomAction>Button</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action>Text</van-button>
|
||||
<van-button type="primary" bottomAction>Button</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -1,13 +1,3 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageURL: '//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Card
|
||||
|
||||
### Install
|
||||
@ -21,7 +11,6 @@ Vue.component(Card.name, Card);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-card
|
||||
title="Title"
|
||||
@ -31,12 +20,10 @@ Vue.component(Card.name, Card);
|
||||
:thumb="imageURL"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Advanced Usage
|
||||
Use `slot` to custom content.
|
||||
|
||||
:::demo Advanced Usage
|
||||
```html
|
||||
<van-card
|
||||
title="Title"
|
||||
@ -51,7 +38,6 @@ Use `slot` to custom content.
|
||||
</div>
|
||||
</van-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -11,7 +11,6 @@ Vue.component(CellSwipe.name, CellSwipe);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-cell-swipe :right-width="65" :left-width="65">
|
||||
<span slot="left">Select</span>
|
||||
@ -21,7 +20,6 @@ Vue.component(CellSwipe.name, CellSwipe);
|
||||
<span slot="right">Delete</span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -1,13 +1,3 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Cell
|
||||
|
||||
### Install
|
||||
@ -22,66 +12,56 @@ Vue.component(CellGroup.name, CellGroup);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Title" value="Text"></van-cell>
|
||||
<van-cell title="Title" value="Text" label="Description"></van-cell>
|
||||
<van-cell title="Cell title" value="Content"></van-cell>
|
||||
<van-cell title="Cell title" value="Content" label="Description"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Value only
|
||||
|
||||
:::demo Value only
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="Text"></van-cell>
|
||||
<van-cell value="Content"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Left Icon
|
||||
|
||||
:::demo Left Icon
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Title" icon="location"></van-cell>
|
||||
<van-cell title="Cell title" icon="location"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Link
|
||||
|
||||
:::demo Link
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Title" is-link></van-cell>
|
||||
<van-cell title="Title" is-link value="Text"></van-cell>
|
||||
<van-cell title="Cell title" is-link></van-cell>
|
||||
<van-cell title="Cell title" is-link value="Content"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
:::demo Advanced Usage
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="Text" icon="shop" is-link>
|
||||
<van-cell value="Content" icon="shop" is-link>
|
||||
<template slot="title">
|
||||
<span class="van-cell-text">Title</span>
|
||||
<span class="van-cell-text">Cell title</span>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell title="Title" icon="location" is-link></van-cell>
|
||||
<van-cell title="Title">
|
||||
<van-cell title="Cell title" icon="location" is-link></van-cell>
|
||||
<van-cell title="Cell title">
|
||||
<template slot="right-icon">
|
||||
<van-icon name="search" class="van-cell__right-icon"></van-icon>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -4,12 +4,10 @@
|
||||
`2017-11-15`
|
||||
|
||||
**Improvements**
|
||||
|
||||
- Icon: add new icons [\#315](https://github.com/youzan/vant/pull/315) ([cookfront](https://github.com/cookfront))
|
||||
- Icon: add new icons [\#315](https://github.com/youzan/vant/pull/315) [@cookfront](https://github.com/cookfront)
|
||||
|
||||
**Bug Fixes**
|
||||
|
||||
- Search: fix box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Search: fix box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) [@chenjiahan](https://github.com/chenjiahan)
|
||||
|
||||
### [0.10.8](https://github.com/youzan/vant/tree/v0.10.8)
|
||||
`2017-11-11`
|
||||
@ -1,20 +1,3 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Checkbox
|
||||
|
||||
### Install
|
||||
@ -29,34 +12,29 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-checkbox v-model="checkbox1">Checkbox 1</van-checkbox>
|
||||
<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true
|
||||
checked: true
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
|
||||
:::demo Disabled
|
||||
```html
|
||||
<van-checkbox v-model="checkbox2" disabled>Checkbox 2</van-checkbox>
|
||||
<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
|
||||
```
|
||||
:::
|
||||
|
||||
#### CheckboxGroup
|
||||
#### Checkbox Group
|
||||
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
|
||||
|
||||
:::demo CheckboxGroup
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox
|
||||
@ -76,42 +54,22 @@ export default {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Inside a Cell
|
||||
|
||||
:::demo Inside a Cell
|
||||
```html
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="(item, index) in list" :key="index">
|
||||
<van-checkbox :name="item">Checkbox{{ item }}</van-checkbox>
|
||||
<van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
@ -1,71 +1,3 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chosenContactId: null,
|
||||
editingContact: {},
|
||||
showList: false,
|
||||
showEdit: false,
|
||||
isEdit: false,
|
||||
list: [{
|
||||
name: '张三',
|
||||
tel: '13000000000',
|
||||
id: 0
|
||||
}]
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
cardType() {
|
||||
return this.chosenContactId !== null ? 'edit' : 'add';
|
||||
},
|
||||
|
||||
currentContact() {
|
||||
const id = this.chosenContactId;
|
||||
return id !== null ? this.list.filter(item => item.id === id)[0] : {};
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onAdd() {
|
||||
this.editingContact = { id: this.list.length };
|
||||
this.isEdit = false;
|
||||
this.showEdit = true;
|
||||
},
|
||||
|
||||
onEdit(item) {
|
||||
this.isEdit = true;
|
||||
this.showEdit = true;
|
||||
this.editingContact = item;
|
||||
},
|
||||
|
||||
onSelect() {
|
||||
this.showList = false;
|
||||
},
|
||||
|
||||
onSave(info) {
|
||||
this.showEdit = false;
|
||||
this.showList = false;
|
||||
|
||||
if (this.isEdit) {
|
||||
this.list = this.list.map(item => item.id === info.id ? info : item);
|
||||
} else {
|
||||
this.list.push(info);
|
||||
}
|
||||
this.chosenContactId = info.id;
|
||||
},
|
||||
|
||||
onDelete(info) {
|
||||
this.showEdit = false;
|
||||
this.list = this.list.filter(item => item.id !== info.id);
|
||||
if (this.chosenContactId === info.id) {
|
||||
this.chosenContactId = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Contact
|
||||
通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
|
||||
|
||||
@ -82,7 +14,7 @@ Vue.component(ContactEdit.name, ContactEdit);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
|
||||
```html
|
||||
<!-- 联系人卡片 -->
|
||||
<van-contact-card
|
||||
@ -90,7 +22,7 @@ Vue.component(ContactEdit.name, ContactEdit);
|
||||
:name="currentContact.name"
|
||||
:tel="currentContact.tel"
|
||||
@click="showList = true"
|
||||
></van-contact-card>
|
||||
/>
|
||||
|
||||
<!-- 联系人列表 -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
@ -106,8 +38,8 @@ Vue.component(ContactEdit.name, ContactEdit);
|
||||
<!-- 联系人编辑 -->
|
||||
<van-popup v-model="showEdit" position="bottom">
|
||||
<van-contact-edit
|
||||
:contact-info="editingContact"
|
||||
:is-edit="isEdit"
|
||||
:contactInfo="editingContact"
|
||||
:isEdit="isEdit"
|
||||
@save="onSave"
|
||||
@delete="onDelete"
|
||||
/>
|
||||
@ -186,7 +118,7 @@ export default {
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### ContactCard API
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
@ -1,63 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
const coupon = {
|
||||
available: 1,
|
||||
discount: 0,
|
||||
denominations: 150,
|
||||
origin_condition: 0,
|
||||
reason: '',
|
||||
value: 150,
|
||||
condition: '下单立减 1.50 元',
|
||||
name: '新手专用优惠券',
|
||||
start_at: 1489104000,
|
||||
end_at: 1514592000
|
||||
};
|
||||
|
||||
const discountCoupon = {
|
||||
...coupon,
|
||||
discount: 88,
|
||||
denominations: 0,
|
||||
origin_condition: 50,
|
||||
value: 12,
|
||||
condition: '下单即享 8.8 折',
|
||||
};
|
||||
|
||||
const disabledCoupon = {
|
||||
...coupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
const disabledDiscountCoupon = {
|
||||
...discountCoupon,
|
||||
avaliable: 0,
|
||||
reason: '未满足使用门槛'
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showList: false,
|
||||
chosenCoupon: -1,
|
||||
coupons: [coupon, discountCoupon],
|
||||
disabledCoupons: [disabledCoupon, disabledDiscountCoupon]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.showList = false;
|
||||
this.chosenCoupon = index;
|
||||
},
|
||||
onExchange(code) {
|
||||
Toast('兑换成功');
|
||||
this.coupons.push(coupon);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Coupon
|
||||
|
||||
### Install
|
||||
@ -72,24 +12,23 @@ Vue.component(CouponList.name, CouponList);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<!-- 优惠券单元格 -->
|
||||
<van-coupon-cell
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:chosenCoupon="chosenCoupon"
|
||||
@click="showList = true"
|
||||
></van-coupon-cell>
|
||||
/>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<van-popup v-model="showList" position="bottom">
|
||||
<van-coupon-list
|
||||
:coupons="coupons"
|
||||
:chosen-coupon="chosenCoupon"
|
||||
:disabled-coupons="disabledCoupons"
|
||||
:chosenCoupon="chosenCoupon"
|
||||
:disabledCoupons="disabledCoupons"
|
||||
@change="onChange"
|
||||
@exchange="onExchange"
|
||||
></van-coupon-list>
|
||||
/>
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
@ -127,7 +66,6 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### CouponCell API
|
||||
|
||||
@ -1,21 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
maxDate: new Date(2019, 10, 1),
|
||||
currentDate1: new Date(2018, 0, 1),
|
||||
currentDate2: null,
|
||||
currentDate3: null
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## DatetimePicker
|
||||
|
||||
### Install
|
||||
@ -29,15 +11,14 @@ Vue.component(DatetimePicker.name, DatetimePicker);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate1"
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:minHour="minHour"
|
||||
:maxHour="maxHour"
|
||||
:minDate="minDate"
|
||||
:maxDate="maxDate"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -54,25 +35,21 @@ export default {
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
#### Date Picker
|
||||
|
||||
:::demo Date Picker
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate2"
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Time Picker
|
||||
|
||||
:::demo Time Picker
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate3"
|
||||
@ -82,8 +59,6 @@ export default {
|
||||
:min-date="minDate"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
63
docs/markdown/en-US/dialog.md
Normal file
63
docs/markdown/en-US/dialog.md
Normal file
@ -0,0 +1,63 @@
|
||||
## Dialog
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import { Dialog } from 'vant';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Alert dialog
|
||||
Used to prompt for some messages, only including one confirm button
|
||||
|
||||
```javascript
|
||||
Dialog.alert({
|
||||
title: 'Title',
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
|
||||
Dialog.alert({
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
```
|
||||
|
||||
#### Confirm dialog
|
||||
Used to confirm some messages, including a confirm button and a cancel button
|
||||
|
||||
```javascript
|
||||
Dialog.confirm({
|
||||
title: 'Title',
|
||||
message: 'Content'
|
||||
}).then(() => {
|
||||
// on confirm
|
||||
}).catch(() => {
|
||||
// on cancel
|
||||
});
|
||||
```
|
||||
|
||||
### Methods
|
||||
|
||||
| Name | Attribute | Return value | Description |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| Dialog.alert | options | `Promise` | Show alert dialog |
|
||||
| Dialog.confirm | options | `Promise` | Show confim dialog |
|
||||
| Dialog.close | - | `void` | Close dialog |
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | Title | `String` | - | - |
|
||||
| message | Message | `String` | - | - |
|
||||
| showConfirmButton | Whether to show confirm button | `Boolean` | `true` | - |
|
||||
| showCancelButton | Whether to show cancel button | `Boolean` | `false` | - |
|
||||
| confirmButtonText | Confirm button text | `String` | `Confirm` | - |
|
||||
| cancelButtonText | Cancel button test | `String` | `Cancel` | - |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` | - |
|
||||
| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
|
||||
| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
|
||||
@ -1,16 +1,3 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
password: '',
|
||||
username: '',
|
||||
message: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Field
|
||||
|
||||
### Install
|
||||
@ -25,18 +12,15 @@ Vue.component(Field.name, Field);
|
||||
#### Basic Usage
|
||||
The value of filed is bound with v-model.
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field v-model="value" placeholder="Username"></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Custom Type
|
||||
#### Custom type
|
||||
Use `type` prop to custom diffrent type fileds.
|
||||
|
||||
:::demo Custom Type
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
@ -58,32 +42,26 @@ Use `type` prop to custom diffrent type fileds.
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disabled
|
||||
|
||||
:::demo Disabled
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field value="Disabled" label="Username" disabled></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Error Info
|
||||
#### Error info
|
||||
|
||||
:::demo Error Info
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field label="Username" placeholder="Username" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Auto resize
|
||||
Textarea Filed can be auto resize when has `autosize` prop
|
||||
|
||||
:::demo Auto resize
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
@ -97,7 +75,6 @@ Textarea Filed can be auto resize when has `autosize` prop
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -1,18 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
onClickMiniBtn() {
|
||||
Toast('点击图标');
|
||||
},
|
||||
onClickBigBtn() {
|
||||
Toast('点击按钮');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## GoodsAction
|
||||
|
||||
### Install
|
||||
@ -30,7 +15,7 @@ Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
|
||||
|
||||
### Usage
|
||||
|
||||
:::demo
|
||||
|
||||
```html
|
||||
<van-goods-action>
|
||||
<van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
|
||||
@ -60,7 +45,6 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
23
docs/markdown/en-US/icon.md
Normal file
23
docs/markdown/en-US/icon.md
Normal file
@ -0,0 +1,23 @@
|
||||
## Icon
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Icon } from 'vant';
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
View all usable icons on the right.
|
||||
|
||||
```html
|
||||
<van-icon name="success" />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | Icon name | `String` | `''` | - |
|
||||
32
docs/markdown/en-US/image-preview.md
Normal file
32
docs/markdown/en-US/image-preview.md
Normal file
@ -0,0 +1,32 @@
|
||||
## ImagePreview
|
||||
|
||||
### Install
|
||||
|
||||
```js
|
||||
import { ImagePreview } from 'vant';
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```javascript
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]);
|
||||
```
|
||||
|
||||
#### Custom Start Position
|
||||
```javascript
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
], 1);
|
||||
```
|
||||
|
||||
### Arguments
|
||||
|
||||
| Attribute | Description | Type |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | Image URL list | `Array` |
|
||||
@ -16,7 +16,7 @@ Vue.component(Col.name, Col);
|
||||
|
||||
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.
|
||||
|
||||
:::demo Basic Usage
|
||||
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">span: 8</van-col>
|
||||
@ -34,13 +34,13 @@ Layout are based on 24-column. The attribute `span` in `Col` means the number of
|
||||
<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
|
||||
|
||||
:::demo Column Spacing
|
||||
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">span: 8</van-col>
|
||||
@ -48,7 +48,7 @@ Set grid spacing using `gutter` attribute. The default value is 0
|
||||
<van-col span="8">span: 8</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
@ -42,7 +42,6 @@ Vue.use(Lazyload, options);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<img v-for="img in imageList" v-lazy="img">
|
||||
```
|
||||
@ -59,53 +58,22 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### Background Image
|
||||
#### Lazyload Background Image
|
||||
Use `v-lazy:background-image` to set background url, and declare the height of the container.
|
||||
|
||||
:::demo Background Image
|
||||
```html
|
||||
<div v-for="img in backgroundImageList" v-lazy:background-image="img" />
|
||||
<div v-for="img in imageList" v-lazy:background-image="img" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
#### Lazyload Component
|
||||
|
||||
:::demo Lazyload Component
|
||||
```html
|
||||
<lazy-component>
|
||||
<img v-for="img in componentImageList" v-lazy="img">
|
||||
<img v-for="img in imageList" v-lazy="img">
|
||||
</lazy-component>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/1.jpg',
|
||||
'https://img.yzcdn.cn/2.jpg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
@ -11,30 +11,24 @@ Vue.component(Loading.name, Loading);
|
||||
|
||||
#### Solid Circle
|
||||
|
||||
:::demo Solid Circle
|
||||
```html
|
||||
<van-loading type="circle" color="black"></van-loading>
|
||||
<van-loading type="circle" color="white"></van-loading>
|
||||
<van-loading type="circle" color="black" />
|
||||
<van-loading type="circle" color="white" />
|
||||
```
|
||||
:::
|
||||
|
||||
#### Gradient Circle
|
||||
|
||||
:::demo Gradient Circle
|
||||
```html
|
||||
<van-loading type="gradient-circle" color="black"></van-loading>
|
||||
<van-loading type="gradient-circle" color="white"></van-loading>
|
||||
<van-loading type="gradient-circle" color="black" />
|
||||
<van-loading type="gradient-circle" color="white" />
|
||||
```
|
||||
:::
|
||||
|
||||
#### Spinner
|
||||
|
||||
:::demo Spinner
|
||||
```html
|
||||
<van-loading type="spinner" color="black"></van-loading>
|
||||
<van-loading type="spinner" color="white"></van-loading>
|
||||
<van-loading type="spinner" color="black" />
|
||||
<van-loading type="spinner" color="white" />
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -11,35 +11,31 @@ Vue.component(NavBar.name, NavBar);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-nav-bar
|
||||
title="Title"
|
||||
left-text="Back"
|
||||
right-text="Button"
|
||||
left-arrow
|
||||
leftText="Back"
|
||||
rightText="Button"
|
||||
leftArrow
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
:::demo Advanced Usage
|
||||
```html
|
||||
<van-nav-bar title="Title" left-text="Back" left-arrow>
|
||||
<van-nav-bar title="Title" leftText="Back" leftArrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
</van-nav-bar>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | Title | `String` | `''` | - |
|
||||
| left-text | Left Text | `String` | `''` | - |
|
||||
| right-text | Right Text | `String` | `''` | - |
|
||||
| left-arrow | Whether to show left arrow | `Boolean` | `false` | - |
|
||||
| leftText | Left Text | `String` | `''` | - |
|
||||
| rightText | Right Text | `String` | `''` | - |
|
||||
| leftArrow | Whether to show left arrow | `Boolean` | `false` | - |
|
||||
| fixed | Whether to fixed top | `Boolean` | `false` | - |
|
||||
|
||||
### Slot
|
||||
@ -11,28 +11,23 @@ Vue.component(NoticeBar.name, NoticeBar);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-notice-bar
|
||||
text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
|
||||
left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
|
||||
leftIcon="https://img.yzcdn.cn/1.png"
|
||||
/>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Disable scroll
|
||||
|
||||
:::demo Disable scroll
|
||||
```html
|
||||
<van-notice-bar :scrollable="false">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Mode
|
||||
|
||||
:::demo Mode
|
||||
```html
|
||||
<van-notice-bar mode="closeable">
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
@ -42,7 +37,6 @@ Vue.component(NoticeBar.name, NoticeBar);
|
||||
Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
|
||||
</van-notice-bar>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -1,24 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showKeyboard: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onInput(value) {
|
||||
Toast('Input: ' + value);
|
||||
},
|
||||
onDelete() {
|
||||
Toast('Delete');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## NumberKeyboard
|
||||
|
||||
### Install
|
||||
@ -32,14 +11,13 @@ Vue.component(NumberKeyboard.name, NumberKeyboard);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-button @touchstart.native.stop="showKeyboard = true">
|
||||
ShowKeyboard
|
||||
Show Keyboard
|
||||
</van-button>
|
||||
|
||||
<van-button @touchstart.native.stop="showKeyboard = false">
|
||||
HideKeyboard
|
||||
Hide Keyboard
|
||||
</van-button>
|
||||
|
||||
<van-number-keyboard
|
||||
@ -68,8 +46,6 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
@ -11,27 +11,23 @@ Vue.component(Panel.name, Panel);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-panel title="Title" desc="Description" status="Status">
|
||||
<div>Panel Content</div>
|
||||
<div>Content</div>
|
||||
</van-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Advanced Usage
|
||||
|
||||
:::demo Advanced Usage
|
||||
```html
|
||||
<van-panel title="Title" desc="Description" status="Status">
|
||||
<div>Panel Content</div>
|
||||
<div>Content</div>
|
||||
<div slot="footer">
|
||||
<van-button size="small">Button</van-button>
|
||||
<van-button size="small" type="danger">Button</van-button>
|
||||
</div>
|
||||
</van-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -33,14 +33,13 @@ Vue.component(NumberKeyBoard.name, NumberKeyBoard);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<!-- PasswordInput -->
|
||||
<van-password-input
|
||||
:value="value"
|
||||
info="Some tips"
|
||||
@focus="showKeyboard = true"
|
||||
></van-password-input>
|
||||
/>
|
||||
|
||||
<!-- NumberKeyboard -->
|
||||
<van-number-keyboard
|
||||
@ -48,7 +47,7 @@ Vue.component(NumberKeyBoard.name, NumberKeyBoard);
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@blur="showKeyboard = false"
|
||||
></van-number-keyboard>
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -57,7 +56,7 @@ export default {
|
||||
return {
|
||||
value: '',
|
||||
showKeyboard: true
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -70,7 +69,6 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -1,42 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
const states = {
|
||||
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Title',
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(states),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: states.Group1,
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, states[values[0]]);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
Toast('Cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
Toast('Confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Picker
|
||||
|
||||
### Install
|
||||
@ -50,9 +11,9 @@ Vue.component(Picker.name, Picker);
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
:::demo Basic Usage
|
||||
|
||||
```html
|
||||
<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
|
||||
<van-picker :columns="pickerColumns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -78,26 +39,25 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### Picker with toolbar
|
||||
|
||||
:::demo Picker with toolbar
|
||||
```html
|
||||
<van-picker
|
||||
show-toolbar
|
||||
showToolbar
|
||||
:title="title"
|
||||
:columns="pickerColumns"
|
||||
@change="handlePickerChange"
|
||||
@cancel="handlePickerCancel"
|
||||
@confirm="handlePickerConfirm"
|
||||
></van-picker>
|
||||
@change="onChange"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
@ -124,19 +84,18 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
onCancel() {
|
||||
Toast('Cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
onConfirm() {
|
||||
Toast('Confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
48
docs/markdown/en-US/popup.md
Normal file
48
docs/markdown/en-US/popup.md
Normal file
@ -0,0 +1,48 @@
|
||||
## Popup
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.component(Popup.name, Popup);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
Popup is located in the middle of the screen by default
|
||||
|
||||
```html
|
||||
<van-popup v-model="show">Content</van-popup>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Position
|
||||
Use `position` prop to set popup display position
|
||||
|
||||
```html
|
||||
<van-popup v-model="show" position="top" :overlay="false">
|
||||
Content
|
||||
</van-popup>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default | Accepted Values |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-model | Whether to show popup | `Boolean` | `false` | - |
|
||||
| overlay | Whether to show overlay | `Boolean` | `true` | - |
|
||||
| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
|
||||
| position | Position | `String` | - | `top` `bottom` `right` `left` |
|
||||
| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
|
||||
| transition | Transition | `String` | `popup-slide` | - |
|
||||
| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
|
||||
@ -12,36 +12,30 @@ Vue.component(Progress.name, Progress);
|
||||
#### Basic Usage
|
||||
Use 'percentage' prop to set current progress
|
||||
|
||||
:::demo Basic Usage
|
||||
```html
|
||||
<van-progress :percentage="0"></van-progress>
|
||||
<van-progress :percentage="46"></van-progress>
|
||||
<van-progress :percentage="100"></van-progress>
|
||||
<van-progress :percentage="0" />
|
||||
<van-progress :percentage="46" />
|
||||
<van-progress :percentage="100" />
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### Inactive
|
||||
|
||||
:::demo Inactive
|
||||
```html
|
||||
<van-progress inactive :percentage="0"></van-progress>
|
||||
<van-progress inactive :percentage="46"></van-progress>
|
||||
<van-progress inactive :percentage="100"></van-progress>
|
||||
<van-progress inactive :percentage="0" />
|
||||
<van-progress inactive :percentage="46" />
|
||||
<van-progress inactive :percentage="100" />
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### Custom Style
|
||||
Use `pivot-text` to custom text，use `color` to custom bar color
|
||||
Use `pivotText` to custom text，use `color` to custom bar color
|
||||
|
||||
:::demo Custom Style
|
||||
```html
|
||||
<van-progress pivot-text="Red" color="#ed5050" :percentage="26"></van-progress>
|
||||
<van-progress pivot-text="Orange" color="#f60" :percentage="46"></van-progress>
|
||||
<van-progress pivot-text="Yellow" color="#f09000" :percentage="66"></van-progress>
|
||||
<van-progress pivotText="Red" color="#ed5050" :percentage="26" />
|
||||
<van-progress pivotText="Orange" color="#f60" :percentage="46" />
|
||||
<van-progress pivotText="Yellow" color="#f09000" :percentage="66" />
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
@ -1,33 +1,3 @@
|
||||
<script>
|
||||
import { Toast } from 'packages';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
isLoading() {
|
||||
if (this.isLoading) {
|
||||
setTimeout(() => {
|
||||
Toast('Refresh Success');
|
||||
this.isLoading = false;
|
||||
this.count++;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const head = document.querySelector('.van-pull-refresh__head');
|
||||
head.insertAdjacentHTML('afterend', '<h1 class="zan-doc-demo-block__title">PullRefresh</h1>');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## PullRefresh
|
||||
|
||||
### Install
|
||||
@ -39,7 +9,6 @@ Vue.component(PullRefresh.name, PullRefresh);
|
||||
|
||||
### Usage
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<!-- use v-model to control loading status -->
|
||||
<van-pull-refresh
|
||||
@ -74,7 +43,6 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
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