mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge remote-tracking branch 'upstream/dev' into dev
This commit is contained in:
niunai
commit
4f40550339
19
.babelrc
19
.babelrc
@ -1,12 +1,9 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"es2015",
|
||||
{ "modules": false }
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
"transform-runtime",
|
||||
"transform-vue-jsx"
|
||||
]
|
||||
}
|
||||
"presets": [["env", { "modules": false, "loose": true }]],
|
||||
"plugins": ["transform-vue-jsx", "transform-runtime", "transform-object-rest-spread"],
|
||||
"env": {
|
||||
"commonjs": {
|
||||
"presets": [["env", { "modules": "commonjs", "loose": true }]]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const components = require('../../components.json');
|
||||
const execSync = require('child_process').execSync;
|
||||
const existsSync = require('fs').existsSync;
|
||||
const path = require('path');
|
||||
|
||||
const componentPaths = [];
|
||||
|
||||
delete components.font;
|
||||
|
||||
Object.keys(components).forEach(key => {
|
||||
const filePath = path.join(__dirname, `../../packages/${key}/webpack.conf.js`);
|
||||
|
||||
if (existsSync(filePath)) {
|
||||
componentPaths.push(`packages/${key}/webpack.conf.js`);
|
||||
}
|
||||
});
|
||||
|
||||
const paths = componentPaths.join(',');
|
||||
const cli = `node_modules/.bin/webpack build -c ${paths} -p`;
|
||||
|
||||
execSync(cli, {
|
||||
stdio: 'inherit'
|
||||
});
|
||||
52
build/bin/build-components.js
Normal file
52
build/bin/build-components.js
Normal file
@ -0,0 +1,52 @@
|
||||
/**
|
||||
* 编译 components 到 lib 目录
|
||||
*/
|
||||
const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
const compiler = require('vue-sfc-compiler');
|
||||
const libDir = path.resolve(__dirname, '../../lib');
|
||||
const srcDir = path.resolve(__dirname, '../../packages');
|
||||
require('shelljs/global');
|
||||
|
||||
// 清空 lib 目录
|
||||
fs.emptyDirSync(libDir);
|
||||
|
||||
// 复制 packages
|
||||
fs.copySync(srcDir, libDir);
|
||||
|
||||
// 编译所有 .vue 文件到 .js
|
||||
compileVueFiles(libDir);
|
||||
|
||||
// babel 编译
|
||||
exec('cross-env BABEL_ENV=commonjs babel lib --out-dir lib');
|
||||
|
||||
function compileVueFiles(dir) {
|
||||
const files = fs.readdirSync(dir);
|
||||
|
||||
files.forEach(file => {
|
||||
const absolutePath = path.resolve(dir, file);
|
||||
|
||||
// 移除 vant-css
|
||||
if (file.indexOf('vant-css') !== -1) {
|
||||
fs.removeSync(absolutePath);
|
||||
}
|
||||
// 遍历文件夹
|
||||
else if (isDir(absolutePath)) {
|
||||
return compileVueFiles(absolutePath);
|
||||
}
|
||||
// 编译 .vue 文件
|
||||
else if (/\.vue$/.test(file)) {
|
||||
const source = fs.readFileSync(absolutePath, 'utf-8');
|
||||
fs.removeSync(absolutePath);
|
||||
|
||||
const outputVuePath = absolutePath + '.js';
|
||||
const outputJsPath = absolutePath.replace('.vue', '.js');
|
||||
const output = fs.existsSync(outputJsPath) ? outputVuePath : outputJsPath;
|
||||
fs.outputFileSync(output, compiler(source));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function isDir(dir) {
|
||||
return fs.lstatSync(dir).isDirectory();
|
||||
}
|
||||
@ -4,8 +4,8 @@ var render = require('json-templater/string');
|
||||
var uppercamelcase = require('uppercamelcase');
|
||||
var path = require('path');
|
||||
|
||||
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
|
||||
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.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}}
|
||||
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
* Steps:
|
||||
* 1. 清理目录
|
||||
* 2. 构建 JS 入口文件
|
||||
* 3. 打包 JS 文件：vant.js && vant.min.js
|
||||
* 4. 构建 CSS 文件：vant-css
|
||||
* 5. 构建每个组件对应的 [component].js
|
||||
* 3. 代码格式校验
|
||||
* 4. 构建每个组件对应的 [component].js
|
||||
* 5. 构建 vant-css
|
||||
* 6. 生成每个组件目录下的 style 入口
|
||||
* 7. 编译 utils
|
||||
* 7. 打包 JS 文件：vant.js && vant.min.js
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
@ -16,37 +16,27 @@ const components = require('../../components.json');
|
||||
const chalk = require('chalk');
|
||||
require('shelljs/global');
|
||||
|
||||
// clean dir
|
||||
log('Starting', 'clean');
|
||||
exec('npm run clean --silent');
|
||||
log('Finished', 'clean');
|
||||
|
||||
// build entry
|
||||
log('Starting', 'build:entry');
|
||||
exec('npm run build:file --silent');
|
||||
log('Finished', 'build:entry');
|
||||
|
||||
// lint
|
||||
// 1. lint
|
||||
log('Starting', 'lint');
|
||||
exec('npm run lint --silent');
|
||||
log('Finished', 'lint');
|
||||
|
||||
// build vant.js
|
||||
log('Starting', 'build:vant');
|
||||
exec('npm run build:vant --silent');
|
||||
log('Finished', 'build:vant');
|
||||
// 2. build entry
|
||||
log('Starting', 'build:entry');
|
||||
exec('npm run build:file --silent');
|
||||
log('Finished', 'build:entry');
|
||||
|
||||
// build [component].js
|
||||
// 3. build [component].js
|
||||
log('Starting', 'build:component');
|
||||
exec('npm run build:components --silent');
|
||||
log('Finished', 'build:component');
|
||||
|
||||
// build vant-css
|
||||
// 4. build vant-css
|
||||
log('Starting', 'build:vant-css');
|
||||
exec('npm run build:vant-css --silent');
|
||||
log('Finished', 'build:vant-css');
|
||||
|
||||
// build style entrys
|
||||
// 5. build style entrys
|
||||
log('Starting', 'build:style-entries');
|
||||
Object.keys(components).forEach((componentName) => {
|
||||
const dir = path.join(__dirname, '../../lib/', componentName, '/style');
|
||||
@ -61,10 +51,10 @@ Object.keys(components).forEach((componentName) => {
|
||||
});
|
||||
log('Finished', 'build:style-entries');
|
||||
|
||||
// build utils
|
||||
log('Starting', 'build:utils');
|
||||
exec('npm run build:utils --silent');
|
||||
log('Finished', 'build:utils');
|
||||
// 6. build vant.js
|
||||
log('Starting', 'build:vant');
|
||||
exec('npm run build:vant --silent');
|
||||
log('Finished', 'build:vant');
|
||||
|
||||
// helpers
|
||||
function log(status, action, breakLine) {
|
||||
|
||||
@ -3,7 +3,7 @@ const config = require('./webpack.config.dev.js');
|
||||
const isMinify = process.argv.indexOf('-p') !== -1;
|
||||
|
||||
config.entry = {
|
||||
'vant': './src/index.js'
|
||||
'vant': './packages/index.js'
|
||||
};
|
||||
|
||||
config.output = {
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
const path = require('path');
|
||||
const Components = require('../components.json');
|
||||
const config = require('./webpack.build.js');
|
||||
const webpack = require('webpack');
|
||||
|
||||
delete config.devtool;
|
||||
|
||||
const entry = {};
|
||||
Object.keys(Components).forEach(key => {
|
||||
entry[key + '/index'] = Components[key];
|
||||
});
|
||||
|
||||
config.entry = entry;
|
||||
|
||||
config.externals = {
|
||||
vue: {
|
||||
root: 'Vue',
|
||||
commonjs: 'vue',
|
||||
commonjs2: 'vue',
|
||||
amd: 'vue'
|
||||
}
|
||||
};
|
||||
|
||||
config.output = {
|
||||
path: path.join(__dirname, '../lib'),
|
||||
filename: '[name].js',
|
||||
libraryExport: "default",
|
||||
libraryTarget: 'umd'
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@ -38,7 +38,6 @@ module.exports = {
|
||||
extensions: ['.js', '.vue', '.css'],
|
||||
alias: {
|
||||
vue: 'vue/dist/vue.runtime.esm.js',
|
||||
src: path.join(__dirname, '../src'),
|
||||
packages: path.join(__dirname, '../packages'),
|
||||
lib: path.join(__dirname, '../lib'),
|
||||
components: path.join(__dirname, '../docs/src/components')
|
||||
@ -68,7 +67,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
|
||||
exclude: /node_modules|vue-router\/|vue-loader\//,
|
||||
loader: 'babel-loader'
|
||||
},
|
||||
{
|
||||
|
||||
@ -53,7 +53,14 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
## ActionSheet 行动按钮
|
||||
## Actionsheet 行动按钮
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Actionsheet } from 'vant';
|
||||
|
||||
Vue.component(Actionsheet.name, Actionsheet);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
@ -106,11 +113,11 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带取消按钮的ActionSheet
|
||||
#### 带取消按钮的 Actionsheet
|
||||
|
||||
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
|
||||
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
|
||||
|
||||
:::demo 带取消按钮的ActionSheet
|
||||
:::demo 带取消按钮的 Actionsheet
|
||||
```html
|
||||
<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
@ -149,11 +156,11 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带标题的ActionSheet
|
||||
#### 带标题的 Actionsheet
|
||||
|
||||
如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
|
||||
如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
|
||||
|
||||
:::demo 带标题的ActionSheet
|
||||
:::demo 带标题的 Actionsheet
|
||||
```html
|
||||
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
@ -170,10 +177,11 @@ export default {
|
||||
| title | 标题 | `String` | | |
|
||||
| cancelText | 取消按钮文案 | `String` | | |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`ActionSheet` | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | | |
|
||||
|
||||
### actions
|
||||
|
||||
|
||||
`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|
||||
@ -28,6 +28,13 @@
|
||||
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Badge } from 'vant';
|
||||
|
||||
Vue.component(Badge.name, Badge);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,126 +1,96 @@
|
||||
<style>
|
||||
.demo-button {
|
||||
.van-button {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
user-select: none;
|
||||
}
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.van-col-24 {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
&--large,
|
||||
&--bottom-action {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-doc-demo-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.zan-doc-demo-block__subtitle {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Button } from 'vant';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 按钮功能
|
||||
#### 按钮类型
|
||||
|
||||
只接受`primary`, `default`, `danger`三种类型，默认`default`。
|
||||
支持`default`、`primary`、`danger`三种类型，默认为`default`
|
||||
|
||||
:::demo 按钮功能
|
||||
:::demo 按钮类型
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button block>default</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" block>primary</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button type="danger" block>danger</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
在组件上加上`disabled`属性即可，此时按钮不可点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button disabled block>diabled</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-button type="default">Default</van-button>
|
||||
<van-button type="primary">Primary</van-button>
|
||||
<van-button type="danger">Danger</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 按钮尺寸
|
||||
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
|
||||
支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="large">large</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button size="normal">normal</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button size="small">small</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button size="mini">mini</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<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 禁用状态
|
||||
```html
|
||||
<van-button disabled>Diabled</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 加载状态
|
||||
|
||||
:::demo 加载状态
|
||||
```html
|
||||
<van-button loading />
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自定义按钮标签
|
||||
|
||||
按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
|
||||
按钮标签默认为`button`，可以使用`tag`属性来修改按钮标签
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### loading按钮
|
||||
|
||||
`loading`状态的按钮。
|
||||
|
||||
:::demo loading按钮
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" loading block>loading</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button loading block></van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-button tag="a" href="https://www.youzan.com" target="_blank">
|
||||
a 标签按钮
|
||||
</van-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 页面底部操作按钮
|
||||
|
||||
一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
|
||||
|
||||
:::demo 页面底部操作按钮
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" bottom-action>立即购买</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-button type="primary" bottom-action>立即购买</van-button>
|
||||
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>加入购物车</van-button>
|
||||
@ -136,10 +106,11 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 按钮类型 | `string` | `default` | `primary`, `danger` |
|
||||
| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` |
|
||||
| tag | 按钮标签 | `string` | `button` | 任何有意义的`html`标签, 如`a`, `span`等 |
|
||||
| diabled | 按钮是否禁用 | `boolean` | `false` | |
|
||||
| block | 按钮是否显示为块级元素 | `boolean` | `false` | |
|
||||
| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | `false` | |
|
||||
|
||||
| type | 按钮类型 | `String` | `default` | `primary` `danger` |
|
||||
| size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` |
|
||||
| tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 |
|
||||
| nativeType | 按钮类型（原生） | `String` | `''` | |
|
||||
| diabled | 是否禁用 | `Boolean` | `false` | |
|
||||
| loading | 是否显示为加载状态 | `Boolean` | `false` | |
|
||||
| block | 是否为块级元素 | `Boolean` | `false` | |
|
||||
| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | |
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
## Card 图文组件
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Card } from 'vant';
|
||||
|
||||
Vue.component(Card.name, Card);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -22,6 +22,13 @@
|
||||
</style>
|
||||
## CellSwipe 滑动单元格
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { CellSwipe } from 'vant';
|
||||
|
||||
Vue.component(CellSwipe.name, CellSwipe);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -32,13 +39,8 @@
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
<span slot="right" class="swipe-delete-btn">
|
||||
删除
|
||||
</span>
|
||||
<span slot="left" class="swipe-check-btn">
|
||||
选择
|
||||
</span>
|
||||
<span slot="right" class="swipe-delete-btn">删除</span>
|
||||
<span slot="left" class="swipe-check-btn">选择</span>
|
||||
</van-cell-swipe>
|
||||
```
|
||||
:::
|
||||
@ -48,13 +50,13 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| right-width | 右侧滑动按钮宽度 | `number` | 0 | |
|
||||
| left-width | 左侧滑动按钮宽度 | `number` | 0 | |
|
||||
| left-width | 左侧滑动按钮宽度 | `number` | 0 | |
|
||||
| right-width | 右侧滑动按钮宽度 | `number` | 0 | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| right | 右侧滑动内容 |
|
||||
| left | 左侧滑动内容 |
|
||||
| right | 右侧滑动内容 |
|
||||
|
||||
@ -10,6 +10,14 @@ export default {
|
||||
|
||||
## Cell 单元格
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Cell, CellGroup } from 'vant';
|
||||
|
||||
Vue.component(Cell.name, Cell);
|
||||
Vue.component(CellGroup.name, CellGroup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,12 +1,51 @@
|
||||
## 更新日志
|
||||
|
||||
## [v0.8.4](https://github.com/youzan/vant/tree/v0.8.4) (2017-08-18)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.3...v0.8.4)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- fix: field 计算autosize，需要nextTick [\#78](https://github.com/youzan/vant/pull/78) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.8.3](https://github.com/youzan/vant/tree/v0.8.3) (2017-08-18)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.1...v0.8.3)
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: dialog wrong z-index [\#77](https://github.com/youzan/vant/pull/77) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.8.1](https://github.com/youzan/vant/tree/v0.8.1) (2017-08-18)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.8.0...v0.8.1)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- field 增加icon slot支持 [\#76](https://github.com/youzan/vant/pull/76) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.8.0](https://github.com/youzan/vant/tree/v0.8.0) (2017-08-17)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.10...v0.8.0)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- Optimize component building, reduce dist file size [\#74](https://github.com/youzan/vant/pull/74) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.7.10](https://github.com/youzan/vant/tree/v0.7.10) (2017-08-16)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.8...v0.7.10)
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: 修复popup和dialog同时出现时，几率出现dialog被挡住的情况 [\#75](https://github.com/youzan/vant/pull/75) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- 修复：popup滚动穿透 [\#73](https://github.com/youzan/vant/pull/73) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.7.8](https://github.com/youzan/vant/tree/v0.7.8) (2017-08-10)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.7...v0.7.8)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- not require reset.css by default [\#72](https://github.com/youzan/vant/pull/72) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.7.7](https://github.com/youzan/vant/tree/v0.7.7) (2017-08-09)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.6...v0.7.7)
|
||||
|
||||
@ -35,6 +35,13 @@ export default {
|
||||
|
||||
## Checkbox 复选框
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Checkbox } from 'vant';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -25,7 +25,14 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Datetime Picker 时间选择
|
||||
## DatetimePicker 时间选择
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
Vue.component(DatetimePicker.name, DatetimePicker);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'src/index';
|
||||
import { Dialog } from 'packages/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
|
||||
@ -29,6 +29,13 @@ export default {
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Field } from 'vant';
|
||||
|
||||
Vue.component(Field.name, Field);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -47,7 +54,15 @@ export default {
|
||||
:on-icon-click="onIconClick"
|
||||
@blur="onFieldBlur"
|
||||
required></van-field>
|
||||
<van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
|
||||
<van-field
|
||||
type="password"
|
||||
label="密码："
|
||||
placeholder="请输入密码"
|
||||
required>
|
||||
<template slot="icon">
|
||||
<van-icon name="search"></van-icon>
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
@ -132,3 +147,9 @@ export default {
|
||||
| icon | 输入框尾部图标 | `string` | | icon中支持的类型 |
|
||||
| onIconClick | 点击图标的回调函数 | `function` | | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon |
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<style>
|
||||
.demo-icon {
|
||||
font-size: 0;
|
||||
|
||||
.examples {
|
||||
max-height: none;
|
||||
}
|
||||
@ -7,18 +9,50 @@
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { Icon } from 'packages';
|
||||
|
||||
Vue.component('van-icon-inner', Icon);
|
||||
Vue.component('van-icon', {
|
||||
props: ['name'],
|
||||
|
||||
render(h) {
|
||||
return <van-col span="8">
|
||||
<van-icon-inner name={this.name}></van-icon-inner>
|
||||
<span>{this.name}</span>
|
||||
</van-col>
|
||||
}
|
||||
});
|
||||
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
## Icon 图标
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Icon } from 'vant';
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -27,318 +61,89 @@
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-icon name="qr-invalid" style="text-align: center"></van-icon>
|
||||
<van-icon name="success"></van-icon>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 所有Icons
|
||||
|
||||
以下目前有的所有图标及其名称：
|
||||
#### 图标列表
|
||||
|
||||
:::demo 所有Icon
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="password-view"></van-icon>
|
||||
<span>password-view</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="wap-nav"></van-icon>
|
||||
<span>wap-nav</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="password-not-view"></van-icon>
|
||||
<span>password-not-view</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="wap-home"></van-icon>
|
||||
<span>wap-home</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="ecard-pay"></van-icon>
|
||||
<span>ecard-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="balance-pay"></van-icon>
|
||||
<span>balance-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="peer-pay"></van-icon>
|
||||
<span>peer-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="credit-pay"></van-icon>
|
||||
<span>credit-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="debit-pay"></van-icon>
|
||||
<span>debit-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="other-pay"></van-icon>
|
||||
<span>other-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="browsing-history"></van-icon>
|
||||
<span>browsing-history</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="goods-collect"></van-icon>
|
||||
<span>goods-collect</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop-collect"></van-icon>
|
||||
<span>shop-collect</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="receive-gift"></van-icon>
|
||||
<span>receive-gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="send-gift"></van-icon>
|
||||
<span>send-gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="setting"></van-icon>
|
||||
<span>setting</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="points"></van-icon>
|
||||
<span>points</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="coupon"></van-icon>
|
||||
<span>coupon</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="free-postage"></van-icon>
|
||||
<span>free-postage</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="discount"></van-icon>
|
||||
<span>discount</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="birthday-privilege"></van-icon>
|
||||
<span>birthday-privilege</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="member-day-privilege"></van-icon>
|
||||
<span>member-day-privilege</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="balance-details"></van-icon>
|
||||
<span>balance-details</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cash-back-record"></van-icon>
|
||||
<span>cash-back-record</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="points-mall"></van-icon>
|
||||
<span>points-mall</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange-record"></van-icon>
|
||||
<span>exchange-record</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="pending-payment"></van-icon>
|
||||
<span>pending-payment</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="pending-orders"></van-icon>
|
||||
<span>pending-orders</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="pending-deliver"></van-icon>
|
||||
<span>pending-deliver</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="pending-evaluate"></van-icon>
|
||||
<span>pending-evaluate</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cash-on-deliver"></van-icon>
|
||||
<span>cash-on-deliver</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift-card-pay"></van-icon>
|
||||
<span>gift-card-pay</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="underway"></van-icon>
|
||||
<span>underway</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="point-gift"></van-icon>
|
||||
<span>point-gift</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="after-sale"></van-icon>
|
||||
<span>after-sale</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit-data"></van-icon>
|
||||
<span>edit-data</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="question"></van-icon>
|
||||
<span>question</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="delete"></van-icon>
|
||||
<span>delete</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="records"></van-icon>
|
||||
<span>records</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="description"></van-icon>
|
||||
<span>description</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="card"></van-icon>
|
||||
<span>card</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift-card"></van-icon>
|
||||
<span>gift-card</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="coupon"></van-icon>
|
||||
<span>coupon</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clock"></van-icon>
|
||||
<span>clock</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gold-coin"></van-icon>
|
||||
<span>gold-coin</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<van-icon name="qr"></van-icon>
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<van-icon name="close"></van-icon>
|
||||
<van-icon name="location"></van-icon>
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<van-icon name="check"></van-icon>
|
||||
<van-icon name="checked"></van-icon>
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<van-icon name="chat"></van-icon>
|
||||
<van-icon name="shop"></van-icon>
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<van-icon name="add"></van-icon>
|
||||
<van-icon name="add2"></van-icon>
|
||||
<van-icon name="photo"></van-icon>
|
||||
<van-icon name="edit"></van-icon>
|
||||
<van-icon name="passed"></van-icon>
|
||||
<van-icon name="cart"></van-icon>
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<van-icon name="gift"></van-icon>
|
||||
<van-icon name="search"></van-icon>
|
||||
<van-icon name="clear"></van-icon>
|
||||
<van-icon name="success"></van-icon>
|
||||
<van-icon name="fail"></van-icon>
|
||||
<van-icon name="contact"></van-icon>
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<van-icon name="password-view"></van-icon>
|
||||
<van-icon name="wap-nav"></van-icon>
|
||||
<van-icon name="password-not-view"></van-icon>
|
||||
<van-icon name="wap-home"></van-icon>
|
||||
<van-icon name="ecard-pay"></van-icon>
|
||||
<van-icon name="balance-pay"></van-icon>
|
||||
<van-icon name="peer-pay"></van-icon>
|
||||
<van-icon name="credit-pay"></van-icon>
|
||||
<van-icon name="debit-pay"></van-icon>
|
||||
<van-icon name="other-pay"></van-icon>
|
||||
<van-icon name="cart"></van-icon>
|
||||
<van-icon name="browsing-history"></van-icon>
|
||||
<van-icon name="goods-collect"></van-icon>
|
||||
<van-icon name="shop-collect"></van-icon>
|
||||
<van-icon name="receive-gift"></van-icon>
|
||||
<van-icon name="send-gift"></van-icon>
|
||||
<van-icon name="setting"></van-icon>
|
||||
<van-icon name="points"></van-icon>
|
||||
<van-icon name="coupon"></van-icon>
|
||||
<van-icon name="free-postage"></van-icon>
|
||||
<van-icon name="discount"></van-icon>
|
||||
<van-icon name="birthday-privilege"></van-icon>
|
||||
<van-icon name="member-day-privilege"></van-icon>
|
||||
<van-icon name="balance-details"></van-icon>
|
||||
<van-icon name="cash-back-record"></van-icon>
|
||||
<van-icon name="points-mall"></van-icon>
|
||||
<van-icon name="exchange-record"></van-icon>
|
||||
<van-icon name="pending-payment"></van-icon>
|
||||
<van-icon name="pending-orders"></van-icon>
|
||||
<van-icon name="pending-deliver"></van-icon>
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<van-icon name="pending-evaluate"></van-icon>
|
||||
<van-icon name="cash-on-deliver"></van-icon>
|
||||
<van-icon name="gift-card-pay"></van-icon>
|
||||
<van-icon name="underway"></van-icon>
|
||||
<van-icon name="point-gift"></van-icon>
|
||||
<van-icon name="after-sale"></van-icon>
|
||||
<van-icon name="edit-data"></van-icon>
|
||||
<van-icon name="question"></van-icon>
|
||||
<van-icon name="delete"></van-icon>
|
||||
<van-icon name="records"></van-icon>
|
||||
<van-icon name="description"></van-icon>
|
||||
<van-icon name="card"></van-icon>
|
||||
<van-icon name="gift-card"></van-icon>
|
||||
<van-icon name="coupon"></van-icon>
|
||||
<van-icon name="clock"></van-icon>
|
||||
<van-icon name="gold-coin"></van-icon>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'src/index';
|
||||
import { ImagePreview } from 'packages/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
@ -41,7 +41,7 @@ import { ImagePreview } from 'vant';
|
||||
<van-button @click="handleImagePreview">预览图片</van-button>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'src/index';
|
||||
import { ImagePreview } from 'packages/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
|
||||
@ -1,86 +1,75 @@
|
||||
<style>
|
||||
.demo-layout {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.white {
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
background-clip: content-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout 布局
|
||||
|
||||
主要提供了`van-row`和`van-col`两个组件来进行行列布局。
|
||||
提供了`van-row`和`van-col`两个组件来进行行列布局
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Row, Col } from 'vant';
|
||||
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Col.name, Col);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 常规用法
|
||||
#### 基本用法
|
||||
|
||||
Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比
|
||||
此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同
|
||||
|
||||
:::demo 常规用法
|
||||
:::demo 基本用法
|
||||
```html
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<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">
|
||||
<div class="gray">span: 4</div>
|
||||
</van-col>
|
||||
<van-col span="10" offset="4">
|
||||
<div class="gray">offset: 4, span: 10</div>
|
||||
</van-col>
|
||||
<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">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</van-col>
|
||||
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 在列元素之间增加间距
|
||||
#### 设置列元素间距
|
||||
|
||||
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
|
||||
通过`gutter`属性可以设置列元素之间的间距，默认间距为 0
|
||||
|
||||
:::demo 在列元素之间增加间距
|
||||
```html
|
||||
<van-row gutter="20">
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</van-col>
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
@ -91,9 +80,11 @@ Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | |
|
||||
| prefix | className 前缀 | `String` | `van` | |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | |
|
||||
| offset | 列元素偏移宽度 | `String | Number` | - | |
|
||||
| offset | 列元素偏移距离 | `String | Number` | - | |
|
||||
| prefix | className 前缀 | `String` | `van` | |
|
||||
|
||||
@ -20,6 +20,13 @@
|
||||
|
||||
## Loading 加载
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Loading } from 'vant';
|
||||
|
||||
Vue.component(Loading.name, Loading);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 渐变深色spinner
|
||||
|
||||
@ -29,6 +29,13 @@
|
||||
|
||||
## Panel 面板
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Panel } from 'vant';
|
||||
|
||||
Vue.component(Panel.name, Panel);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -38,6 +38,13 @@ export default {
|
||||
|
||||
## Picker 选择器
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Picker } from 'vant';
|
||||
|
||||
Vue.component(Picker.name, Picker);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -75,6 +75,13 @@ export default {
|
||||
|
||||
## Popup 弹出菜单
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Popup } from 'vant';
|
||||
|
||||
Vue.component(Popup.name, Popup);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -10,6 +10,13 @@
|
||||
|
||||
## Progress 进度条
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Progress } from 'vant';
|
||||
|
||||
Vue.component(Progress.name, Progress);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -23,6 +23,13 @@ export default {
|
||||
|
||||
## Quantity 数量选择
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Quantity } from 'vant';
|
||||
|
||||
Vue.component(Quantity.name, Quantity);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
## Vant
|
||||
|
||||
一套基于`Vue.js 2.0`的 Mobile 组件库
|
||||
基于`Vue 2.0`的 Mobile 组件库
|
||||
|
||||
### 安装
|
||||
|
||||
@ -47,11 +47,11 @@ Vue.use(vant);
|
||||
|
||||
### 自定义主题
|
||||
|
||||
`Vant`默认提供一套主题，`CSS`命名采用`BEM`的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
|
||||
`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法：
|
||||
|
||||
#### 下载主题
|
||||
|
||||
可以通过Github或npm来下载主题：
|
||||
可以通过 Github 或 npm 来下载主题：
|
||||
|
||||
```bash
|
||||
# npm
|
||||
|
||||
@ -25,6 +25,13 @@ export default {
|
||||
|
||||
## Radio 单选框
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Radio } from 'vant';
|
||||
|
||||
Vue.component(Radio.name, Radio);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -16,6 +16,13 @@ export default {
|
||||
|
||||
## Search 搜索
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Search } from 'vant';
|
||||
|
||||
Vue.component(Search.name, Search);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -28,6 +28,14 @@ export default {
|
||||
|
||||
## Steps 步骤条
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Step, Steps } from 'vant';
|
||||
|
||||
Vue.component(Step.name, Step);
|
||||
Vue.component(Steps.name, Steps);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -35,6 +35,13 @@ export default {
|
||||
|
||||
## Swipe 轮播
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Swipe } from 'vant';
|
||||
|
||||
Vue.component(Swipe.name, Swipe);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -64,6 +71,33 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 隐藏指示器
|
||||
|
||||
需要设置`show-indicators`属性为`false`，即会隐藏指示器。
|
||||
|
||||
:::demo 隐藏指示器
|
||||
```html
|
||||
<van-swipe :show-indicators="false">
|
||||
<van-swipe-item v-for="(img, index) in autoImages" :key="index">
|
||||
<img v-lazy="img" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoImages: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 自动轮播
|
||||
|
||||
需要设置`auto-play`属性为`true`，即会自动轮播。
|
||||
|
||||
@ -43,6 +43,13 @@ export default {
|
||||
|
||||
## Switch 开关
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Switch } from 'vant';
|
||||
|
||||
Vue.component(Switch.name, Switch);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -49,6 +49,14 @@ export default {
|
||||
|
||||
## Tab 标签
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Tab, Tabs } from 'vant';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -10,6 +10,13 @@
|
||||
|
||||
## Tag 标记
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Tag } from 'vant';
|
||||
|
||||
Vue.component(Tag.name, Tag);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
@ -85,7 +85,7 @@ import { Toast } from 'vant';
|
||||
<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
@ -137,7 +137,7 @@ export default {
|
||||
<van-button @click="closeToast">关闭</van-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
@ -161,7 +161,7 @@ export default {
|
||||
<van-button @click="showHtmlToast">打开</van-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
import { Toast } from 'packages/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
|
||||
@ -16,6 +16,13 @@ export default {
|
||||
|
||||
## Uploader 图片上传
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Uploader } from 'vant';
|
||||
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -54,37 +54,17 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
body, html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.examples-container {
|
||||
@ -95,38 +75,6 @@ export default {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.page-back {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
transform: rotate(180deg);
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding: 20px 15px 0;
|
||||
}
|
||||
|
||||
.demo-sub-title {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
padding: 0 15px;
|
||||
margin: 30px 0 10px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
|
||||
@ -40,7 +40,7 @@ module.exports = {
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Vant组件",
|
||||
"name": "组件列表",
|
||||
"showInMobile": true,
|
||||
"groups": [
|
||||
{
|
||||
@ -64,7 +64,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
"path": "/cell-swipe",
|
||||
"title": "Cell Swipe 滑动单元格"
|
||||
"title": "CellSwipe 滑动单元格"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
@ -170,7 +170,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "Datetime Picker 时间选择"
|
||||
"title": "DatetimePicker 时间选择"
|
||||
},
|
||||
{
|
||||
"path": "/dialog",
|
||||
|
||||
@ -2,7 +2,7 @@ import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesApp';
|
||||
import routes from './router.config';
|
||||
import ZanUI from 'src/index';
|
||||
import ZanUI from 'packages/index';
|
||||
import ZanDoc from 'zan-doc';
|
||||
import 'packages/vant-css/src/index.css';
|
||||
|
||||
|
||||
@ -6,11 +6,11 @@ import ZanDoc from 'zan-doc';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import 'packages/vant-css/src/index.css';
|
||||
|
||||
function isMobile() {
|
||||
const isMobile = (function() {
|
||||
var platform = navigator.userAgent.toLowerCase();
|
||||
return (/(android|bb\d+|meego).+mobile|kdtunion|weibo|m2oapp|micromessenger|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i).test(platform) ||
|
||||
(/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i).test(platform.substr(0, 4));
|
||||
}
|
||||
})();
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanDoc);
|
||||
@ -29,19 +29,20 @@ const router = new VueRouter({
|
||||
});
|
||||
|
||||
router.beforeEach((route, redirect, next) => {
|
||||
if (route.path !== '/') {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
const pathname = '/zanui/vue/examples';
|
||||
if (isMobile()) {
|
||||
window.location.replace(pathname);
|
||||
if (isMobile) {
|
||||
window.location.replace('/zanui/vue/examples');
|
||||
return;
|
||||
}
|
||||
document.title = route.meta.title || document.title;
|
||||
next();
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
if (!isMobile) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
})
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App),
|
||||
router
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
{
|
||||
"lerna": "2.0.0-beta.31",
|
||||
"version": "independent"
|
||||
}
|
||||
39
package.json
39
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "0.7.9",
|
||||
"version": "0.8.5",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/vant.js",
|
||||
"style": "lib/vant-css/index.css",
|
||||
@ -11,12 +11,11 @@
|
||||
"packages"
|
||||
],
|
||||
"scripts": {
|
||||
"bootstrap": "yarn || npm i",
|
||||
"bootstrap": "yarn || npm i && cd ./packages/vant-css/ && yarn || npm i && cd ../../",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --config build/webpack.config.dev.js --content-base ./",
|
||||
"build:file": "node build/bin/build-entry.js",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js --presets=es2015",
|
||||
"build:components": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.components.js --color",
|
||||
"build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color && cp -R packages/vant-css/lib/ lib/vant-css",
|
||||
"build:components": "node build/bin/build-components.js --color",
|
||||
"build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color && mkdir lib/vant-css && cp -R packages/vant-css/lib/ lib/vant-css",
|
||||
"build:vant": "cross-env NODE_ENV=production webpack --progress --hide-modules --color --config build/webpack.build.js && cross-env NODE_ENV=production webpack -p --progress --hide-modules --color --config build/webpack.build.js",
|
||||
"deploy": "npm run deploy:docs && npm run deploy:cdn && gh-pages -d docs/dist --remote youzan && rimraf docs/dist",
|
||||
"deploy:cdn": "superman cdn /zanui/vue docs/dist/*.js docs/dist/*.css",
|
||||
@ -41,7 +40,7 @@
|
||||
"author": "youzanfe",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"raf.js": "0.0.4",
|
||||
"babel-runtime": "6.x",
|
||||
"vue-lazyload": "^1.0.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@ -50,28 +49,32 @@
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
"avoriaz": "2.0.0",
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-cli": "^6.26.0",
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.2",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-plugin-module-resolver": "^2.7.1",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
"babel-runtime": "^6.25.0",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"chai": "^4.1.1",
|
||||
"cheerio": "^0.22.0",
|
||||
"codecov": "^2.2.0",
|
||||
"cross-env": "^5.0.5",
|
||||
"css-loader": "^0.28.4",
|
||||
"css-loader": "^0.28.5",
|
||||
"eslint-plugin-vue": "^2.1.0",
|
||||
"extract-text-webpack-plugin": "2.1.2",
|
||||
"felint": "^0.5.0-alpha.3",
|
||||
"file-loader": "^0.11.2",
|
||||
"file-save": "^0.2.0",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"gh-pages": "^1.0.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-cssmin": "^0.2.0",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
"gulp-util": "^3.0.8",
|
||||
"highlight.js": "^9.12.0",
|
||||
"html-webpack-plugin": "^2.29.0",
|
||||
@ -86,11 +89,10 @@
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "^0.0.31",
|
||||
"karma-webpack": "^2.0.4",
|
||||
"lerna": "^2.0.0",
|
||||
"markdown-it": "^8.3.2",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"mocha": "^3.4.2",
|
||||
"optimize-css-assets-webpack-plugin": "^3.0.0",
|
||||
"optimize-css-assets-webpack-plugin": "^3.1.1",
|
||||
"postcss": "^6.0.8",
|
||||
"postcss-easy-import": "^2.1.0",
|
||||
"postcss-loader": "^2.0.6",
|
||||
@ -104,17 +106,16 @@
|
||||
"uppercamelcase": "^3.0.0",
|
||||
"url-loader": "^0.5.9",
|
||||
"vue": "^2.4.2",
|
||||
"vue-hot-reload-api": "^2.1.0",
|
||||
"vue-html-loader": "^1.2.4",
|
||||
"vue-loader": "^13.0.4",
|
||||
"vue-markdown-loader": "^2.0.0",
|
||||
"vue-router": "^2.7.0",
|
||||
"vue-sfc-compiler": "^0.0.2",
|
||||
"vue-style-loader": "^3.0.0",
|
||||
"vue-template-compiler": "^2.4.2",
|
||||
"vue-template-es2015-compiler": "^1.5.3",
|
||||
"webpack": "^3.5.1",
|
||||
"webpack": "^3.5.5",
|
||||
"webpack-dev-server": "^2.7.1",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"zan-doc": "0.1.12"
|
||||
"zan-doc": "^0.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@ -1,3 +0,0 @@
|
||||
import ActionSheet from './src/actionsheet';
|
||||
|
||||
export default ActionSheet;
|
||||
74
packages/actionsheet/index.vue
Normal file
74
packages/actionsheet/index.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<transition name="van-actionsheet-float">
|
||||
<div :class="['van-actionsheet', { 'van-actionsheet--withtitle': title }]" v-show="value">
|
||||
<div class="van-actionsheet__header" v-if="title">
|
||||
<h3 v-text="title" />
|
||||
<van-icon name="close" @click.stop="$emit('input', false)" />
|
||||
</div>
|
||||
<ul v-if="!title" class="van-actionsheet__list">
|
||||
<li
|
||||
v-for="(item, index) in actions"
|
||||
:key="index"
|
||||
:class="['van-actionsheet__item', item.className, { 'van-actionsheet__item--loading': item.loading }]"
|
||||
@click.stop="onClickItem(item)">
|
||||
<template v-if="!item.loading">
|
||||
<span class="van-actionsheet__name">{{ item.name }}</span>
|
||||
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
|
||||
</template>
|
||||
<van-loading v-else class="van-actionsheet__loading" type="circle" color="black" />
|
||||
</li>
|
||||
</ul>
|
||||
<div class="van-actionsheet__item van-actionsheet__cancel" @click.stop="$emit('input', false)" v-if="cancelText">{{ cancelText }}</div>
|
||||
<div class="van-actionsheet__content" v-else>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from '../mixins/popup';
|
||||
import VanIcon from '../icon';
|
||||
import VanLoading from '../loading';
|
||||
|
||||
export default {
|
||||
name: 'van-actionsheet',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
components: {
|
||||
[VanIcon.name]: VanIcon,
|
||||
[VanLoading.name]: VanLoading
|
||||
},
|
||||
|
||||
props: {
|
||||
value: Boolean,
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
title: String,
|
||||
cancelText: String,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.value && this.open();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClickItem(item) {
|
||||
if (typeof item.callback === 'function') {
|
||||
item.callback(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<transition name="actionsheet-float">
|
||||
<div class="van-actionsheet" :class="[ title ? 'van-actionsheet--withtitle' : '' ]" v-show="currentValue">
|
||||
<div class="van-actionsheet__header" v-if="title">
|
||||
<h3 v-text="title"></h3>
|
||||
<van-icon name="close" @click.stop="currentValue = false"></van-icon>
|
||||
</div>
|
||||
<template v-if="!title">
|
||||
<ul class="van-actionsheet__list">
|
||||
<li
|
||||
v-for="(item, index) in actions"
|
||||
:key="index"
|
||||
class="van-actionsheet__item"
|
||||
:class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
|
||||
@click.stop="handleItemClick(item)">
|
||||
<template v-if="!item.loading">
|
||||
<span class="van-actionsheet__name">{{ item.name }}</span>
|
||||
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<van-loading class="van-actionsheet__loading" type="circle" color="black"></van-loading>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="van-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="van-actionsheet__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'src/mixins/popup';
|
||||
import VanLoading from 'packages/loading';
|
||||
import VanIcon from 'packages/icon';
|
||||
|
||||
export default {
|
||||
name: 'van-actionsheet',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
components: {
|
||||
VanLoading,
|
||||
VanIcon
|
||||
},
|
||||
|
||||
props: {
|
||||
value: {},
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
title: String,
|
||||
cancelText: String,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentValue(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.value) {
|
||||
this.currentValue = true;
|
||||
this.open();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleItemClick(item) {
|
||||
if (item.callback && typeof item.callback === 'function') {
|
||||
item.callback(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,3 +0,0 @@
|
||||
import BadgeGroup from '../badge/src/badge-group';
|
||||
|
||||
export default BadgeGroup;
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@ -1,3 +0,0 @@
|
||||
import Badge from './src/badge';
|
||||
|
||||
export default Badge;
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<a
|
||||
class="van-badge"
|
||||
:class="{ 'van-badge--select': isSelect }"
|
||||
:href="url"
|
||||
@click="handleClick">
|
||||
<div class="van-badge__active"></div>
|
||||
<div v-if="info" class="van-badge__info">{{info}}</div>
|
||||
{{title}}
|
||||
</a>
|
||||
<a
|
||||
class="van-badge"
|
||||
:class="{ 'van-badge--select': isSelect }"
|
||||
:href="url"
|
||||
@click="handleClick">
|
||||
<div class="van-badge__active"></div>
|
||||
<div v-if="info" class="van-badge__info">{{info}}</div>
|
||||
{{title}}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@ -1,3 +1,76 @@
|
||||
import Button from './src/button';
|
||||
import Loading from '../loading';
|
||||
|
||||
export default Button;
|
||||
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
|
||||
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'van-button',
|
||||
|
||||
components: {
|
||||
[Loading.name]: Loading
|
||||
},
|
||||
|
||||
props: {
|
||||
block: Boolean,
|
||||
loading: Boolean,
|
||||
disabled: Boolean,
|
||||
nativeType: String,
|
||||
bottomAction: Boolean,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: value => ALLOWED_TYPE.indexOf(value) > -1
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
validator: value => ALLOWED_SIZE.indexOf(value) > -1
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
if (!this.loading && !this.disabled) {
|
||||
this.$emit('click', event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { type, loading, disabled, tag: Tag } = this;
|
||||
|
||||
return (
|
||||
<Tag
|
||||
type={this.nativeType}
|
||||
disabled={disabled}
|
||||
class={[
|
||||
'van-button',
|
||||
'van-button--' + type,
|
||||
'van-button--' + this.size,
|
||||
{
|
||||
'van-button--disabled': disabled,
|
||||
'van-button--loading': loading,
|
||||
'van-button--block': this.block,
|
||||
'van-button--bottom-action': this.bottomAction
|
||||
}
|
||||
]}
|
||||
onClick={this.onClick}
|
||||
>
|
||||
{loading
|
||||
? <van-loading
|
||||
class="van-button__icon-loading"
|
||||
type="circle"
|
||||
color={type === 'default' ? 'black' : 'white'}
|
||||
/>
|
||||
: null}
|
||||
<span class="van-button__text">
|
||||
{this.$slots.default}
|
||||
</span>
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "@youzan/van-button",
|
||||
"version": "0.0.1",
|
||||
"description": "button component",
|
||||
"main": "./index.js",
|
||||
"author": "niunai",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,93 +0,0 @@
|
||||
/**
|
||||
* @module components/button
|
||||
* @desc 按钮
|
||||
* @param {string} [type=default] - 显示类型，接受 default, primary, danger
|
||||
* @param {boolean} [disabled=false] - 禁用
|
||||
* @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
|
||||
* @param {string} [native-type] - 原生 type 属性
|
||||
* @param {slot} - 显示文本
|
||||
*
|
||||
* @example
|
||||
* <van-button size="large" type="primary">按钮</van-button>
|
||||
*/
|
||||
|
||||
import VanLoading from 'packages/loading';
|
||||
|
||||
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
|
||||
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'van-button',
|
||||
|
||||
components: {
|
||||
'van-loading': VanLoading
|
||||
},
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
loading: Boolean,
|
||||
block: Boolean,
|
||||
bottomAction: Boolean,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
},
|
||||
nativeType: String,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator(value) {
|
||||
return ALLOWED_TYPE.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
validator(value) {
|
||||
return ALLOWED_SIZE.indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
if (this.loading || this.disabled) return;
|
||||
this.$emit('click', e);
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
|
||||
const Tag = this.tag;
|
||||
|
||||
return (
|
||||
<Tag
|
||||
type={nativeType}
|
||||
disabled={disabled}
|
||||
class={[
|
||||
'van-button',
|
||||
'van-button--' + type,
|
||||
'van-button--' + size,
|
||||
{
|
||||
'van-button--disabled': disabled,
|
||||
'van-button--loading': loading,
|
||||
'van-button--block': block,
|
||||
'van-button--bottom-action': bottomAction
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{
|
||||
loading
|
||||
? <van-loading
|
||||
class="van-button__icon-loading"
|
||||
type="circle"
|
||||
color={type === 'default' ? 'black' : 'white'}>
|
||||
</van-loading>
|
||||
: null
|
||||
}
|
||||
<span class="van-button__text">{this.$slots.default}</span>
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@ -1,3 +0,0 @@
|
||||
import Card from './src/card';
|
||||
|
||||
export default Card;
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "@youzan/van-card",
|
||||
"version": "0.0.1",
|
||||
"description": "card component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
import CellGroup from '../cell/src/cell-group';
|
||||
|
||||
export default CellGroup;
|
||||
@ -1,3 +0,0 @@
|
||||
import CellSwipe from './src/cell-swipe';
|
||||
|
||||
export default CellSwipe;
|
||||
129
packages/cell-swipe/index.vue
Normal file
129
packages/cell-swipe/index.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div v-clickoutside:touchstart="swipeMove" @click="swipeMove()" @touchstart="startDrag" @touchmove="onDrag" @touchend="endDrag" class="van-cell-swipe" ref="cell">
|
||||
<div class="van-cell-wrapper">
|
||||
<slot>单元格内容</slot>
|
||||
</div>
|
||||
<div class="van-cell-left">
|
||||
<div ref="left">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell-right">
|
||||
<div ref="right">
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { once } from '../utils/dom';
|
||||
import Clickoutside from '../utils/clickoutside';
|
||||
|
||||
export default {
|
||||
name: 'van-cell-swipe',
|
||||
props: {
|
||||
'leftWidth': { type: Number, default: 0 },
|
||||
'rightWidth': { type: Number, default: 0 }
|
||||
},
|
||||
directives: { Clickoutside },
|
||||
data() {
|
||||
return {
|
||||
start: { x: 0, y: 0 }
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
leftDefaultTransform() {
|
||||
return this.translate3d(-this.leftWidth - 1);
|
||||
},
|
||||
rightDefaultTransform() {
|
||||
return this.translate3d(this.rightWidth);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
|
||||
this.leftElm = this.$refs.left;
|
||||
this.leftWrapElm = this.leftElm.parentNode;
|
||||
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
|
||||
|
||||
this.rightElm = this.$refs.right;
|
||||
this.rightWrapElm = this.rightElm.parentNode;
|
||||
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
|
||||
},
|
||||
methods: {
|
||||
resetSwipeStatus() {
|
||||
this.swiping = false; // 是否正在拖动
|
||||
this.opened = true; // 记录是否滑动左右 或者 注册
|
||||
this.offsetLeft = 0; // 记录单次拖动的拖动距离
|
||||
},
|
||||
translate3d(offset) {
|
||||
return `translate3d(${offset}px, 0, 0)`;
|
||||
},
|
||||
swipeMove(offset = 0) {
|
||||
this.wrap.style.webkitTransform = this.translate3d(offset);
|
||||
this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
|
||||
this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
|
||||
offset && (this.swiping = true);
|
||||
},
|
||||
swipeLeaveTransition(direction) {
|
||||
setTimeout(() => {
|
||||
this.swipeLeave = true;
|
||||
// left
|
||||
if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
|
||||
this.swipeMove(-this.rightWidth);
|
||||
this.resetSwipeStatus();
|
||||
return;
|
||||
// right
|
||||
} else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
|
||||
this.swipeMove(this.leftWidth);
|
||||
this.resetSwipeStatus();
|
||||
return;
|
||||
} else {
|
||||
this.swipeMove(0);
|
||||
once(this.wrap, 'webkitTransitionEnd', () => {
|
||||
this.wrap.style.webkitTransform = '';
|
||||
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
|
||||
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
|
||||
this.swipeLeave = false;
|
||||
this.swiping = false;
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
},
|
||||
startDrag(evt) {
|
||||
evt = evt.changedTouches ? evt.changedTouches[0] : evt;
|
||||
this.dragging = true;
|
||||
this.start.x = evt.pageX;
|
||||
this.start.y = evt.pageY;
|
||||
},
|
||||
onDrag(evt) {
|
||||
if (this.opened) {
|
||||
!this.swiping && this.swipeMove(0);
|
||||
this.opened = false;
|
||||
return;
|
||||
}
|
||||
if (!this.dragging) return;
|
||||
let swiping;
|
||||
const e = evt.changedTouches ? evt.changedTouches[0] : evt;
|
||||
const offsetTop = e.pageY - this.start.y;
|
||||
const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
|
||||
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
|
||||
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
|
||||
(offsetLeft > 0 && !this.leftWidth) ||
|
||||
(offsetLeft < 0 && !this.rightWidth)) {
|
||||
return;
|
||||
}
|
||||
const y = Math.abs(offsetTop);
|
||||
const x = Math.abs(offsetLeft);
|
||||
swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
|
||||
if (!swiping) return;
|
||||
evt.preventDefault();
|
||||
this.swipeMove(offsetLeft);
|
||||
},
|
||||
endDrag() {
|
||||
if (!this.swiping) return;
|
||||
this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,142 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
v-clickoutside:touchstart="swipeMove"
|
||||
@click="swipeMove()"
|
||||
@touchstart="startDrag"
|
||||
@touchmove="onDrag"
|
||||
@touchend="endDrag"
|
||||
class="van-cell-swipe"
|
||||
ref="cell">
|
||||
<div class="van-cell-wrapper">
|
||||
<slot>单元格内容</slot>
|
||||
</div>
|
||||
<div class="van-cell-left">
|
||||
<div ref="left">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell-right">
|
||||
<div ref="right">
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {once} from 'src/utils/dom';
|
||||
import Clickoutside from 'src/utils/clickoutside';
|
||||
|
||||
export default {
|
||||
name: 'van-cell-swipe',
|
||||
props: {
|
||||
'leftWidth': {type: Number, default: 0},
|
||||
'rightWidth': {type: Number, default: 0}
|
||||
},
|
||||
directives: {Clickoutside},
|
||||
data() {
|
||||
return {
|
||||
start: {x: 0, y: 0}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
leftDefaultTransform(){
|
||||
return this.translate3d(-this.leftWidth - 1);
|
||||
},
|
||||
rightDefaultTransform(){
|
||||
return this.translate3d(this.rightWidth);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.wrap = this.$refs.cell.querySelector('.van-cell-wrapper');
|
||||
this.leftElm = this.$refs.left;
|
||||
this.leftWrapElm = this.leftElm.parentNode;
|
||||
this.leftDefaultTransform = this.translate3d(-this.leftWidth - 1);
|
||||
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
|
||||
|
||||
this.rightElm = this.$refs.right;
|
||||
this.rightWrapElm = this.rightElm.parentNode;
|
||||
this.rightDefaultTransform = this.translate3d(this.rightWidth);
|
||||
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
|
||||
},
|
||||
methods: {
|
||||
resetSwipeStatus() {
|
||||
this.swiping = false; // 是否正在拖动
|
||||
this.opened = true; // 记录是否滑动左右 或者 注册
|
||||
this.offsetLeft = 0; // 记录单次拖动的拖动距离
|
||||
},
|
||||
translate3d(offset) {
|
||||
return `translate3d(${offset}px, 0, 0)`;
|
||||
},
|
||||
swipeMove(offset = 0) {
|
||||
this.wrap.style.webkitTransform = this.translate3d(offset);
|
||||
this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
|
||||
this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
|
||||
offset && (this.swiping = true);
|
||||
},
|
||||
swipeLeaveTransition(direction) {
|
||||
setTimeout(() => {
|
||||
this.swipeLeave = true;
|
||||
// left
|
||||
if (direction > 0 && -this.offsetLeft > this.rightWidth * 0.4 && this.rightWidth > 0) {
|
||||
this.swipeMove(-this.rightWidth);
|
||||
this.resetSwipeStatus();
|
||||
return;
|
||||
// right
|
||||
} else if (direction < 0 && this.offsetLeft > this.leftWidth * 0.4 && this.leftWidth > 0) {
|
||||
this.swipeMove(this.leftWidth);
|
||||
this.resetSwipeStatus();
|
||||
return;
|
||||
} else {
|
||||
this.swipeMove(0);
|
||||
once(this.wrap, 'webkitTransitionEnd', _ => {
|
||||
this.wrap.style.webkitTransform = '';
|
||||
this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
|
||||
this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
|
||||
this.swipeLeave = false;
|
||||
this.swiping = false;
|
||||
});
|
||||
}
|
||||
}, 0);
|
||||
},
|
||||
startDrag(evt) {
|
||||
console.log('startDrag')
|
||||
evt = evt.changedTouches ? evt.changedTouches[0] : evt;
|
||||
this.dragging = true;
|
||||
this.start.x = evt.pageX;
|
||||
this.start.y = evt.pageY;
|
||||
},
|
||||
onDrag(evt) {
|
||||
console.log('onDrag')
|
||||
if (this.opened) {
|
||||
!this.swiping && this.swipeMove(0);
|
||||
this.opened = false;
|
||||
return;
|
||||
}
|
||||
if (!this.dragging) return;
|
||||
let swiping;
|
||||
const e = evt.changedTouches ? evt.changedTouches[0] : evt;
|
||||
const offsetTop = e.pageY - this.start.y;
|
||||
const offsetLeft = this.offsetLeft = e.pageX - this.start.x;
|
||||
if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
|
||||
(offsetLeft > 0 && offsetLeft > this.leftWidth) ||
|
||||
(offsetLeft > 0 && !this.leftWidth) ||
|
||||
(offsetLeft < 0 && !this.rightWidth)) {
|
||||
return;
|
||||
}
|
||||
const y = Math.abs(offsetTop);
|
||||
const x = Math.abs(offsetLeft);
|
||||
swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
|
||||
if (!swiping) return;
|
||||
evt.preventDefault();
|
||||
this.swipeMove(offsetLeft);
|
||||
},
|
||||
endDrag() {
|
||||
console.log('endDrag')
|
||||
if (!this.swiping) return;
|
||||
this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@ -1,3 +0,0 @@
|
||||
import Cell from './src/cell';
|
||||
|
||||
export default Cell;
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="handleClick">
|
||||
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="$emit('click')">
|
||||
<div
|
||||
class="van-cell__title"
|
||||
v-if="this.$slots.title || title"
|
||||
@ -42,12 +42,6 @@ export default {
|
||||
label: String,
|
||||
isLink: Boolean,
|
||||
required: Boolean
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "@youzan/van-cell",
|
||||
"version": "0.0.1",
|
||||
"description": "cell component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
import CheckboxGroup from 'packages/checkbox/src/checkbox-group';
|
||||
|
||||
export default CheckboxGroup;
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@ -1,3 +0,0 @@
|
||||
import Checkbox from './src/checkbox';
|
||||
|
||||
export default Checkbox;
|
||||
@ -23,7 +23,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import findParent from 'src/mixins/findParent';
|
||||
import findParent from '../mixins/findParent';
|
||||
|
||||
export default {
|
||||
name: 'van-checkbox',
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "@youzan/van-checkbox",
|
||||
"version": "0.0.1",
|
||||
"description": "checkbox component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@ -1,3 +0,0 @@
|
||||
import Col from './src/col';
|
||||
|
||||
export default Col;
|
||||
40
packages/col/index.vue
Normal file
40
packages/col/index.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
`${prefix}-col`,
|
||||
{
|
||||
[`${prefix}-col-${span}`]: span,
|
||||
[`${prefix}-col-offset-${offset}`]: offset,
|
||||
}
|
||||
]"
|
||||
:style="style">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-col',
|
||||
|
||||
props: {
|
||||
span: [Number, String],
|
||||
offset: [Number, String],
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'van'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
gutter() {
|
||||
return (this.$parent && Number(this.$parent.gutter)) || 0;
|
||||
},
|
||||
style() {
|
||||
const padding = `${this.gutter / 2}px`;
|
||||
return this.gutter
|
||||
? { paddingLeft: padding, paddingRight: padding }
|
||||
: {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
`${prefix}-col`,
|
||||
{
|
||||
[`${prefix}-col-${span}`]: span,
|
||||
[`${prefix}-col-offset-${offset}`]: offset,
|
||||
}
|
||||
]"
|
||||
:style="style">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-col',
|
||||
props: {
|
||||
span: [Number, String],
|
||||
offset: [Number, String],
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'van'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
gutter() {
|
||||
if (!this.$parent) return 0;
|
||||
return Number(this.$parent.gutter) || 0;
|
||||
},
|
||||
style() {
|
||||
const padding = `${this.gutter / 2}px`;
|
||||
return this.gutter
|
||||
? { paddingLeft: padding, paddingRight: padding }
|
||||
: null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@ -1,3 +0,0 @@
|
||||
import DateTimePicker from './src/datetime-picker';
|
||||
|
||||
export default DateTimePicker;
|
||||
@ -11,7 +11,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Picker from 'packages/picker';
|
||||
import Picker from '../picker';
|
||||
|
||||
const allowedType = ['time', 'date', 'datetime'];
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"name": "@youzan/van-datetime-picker",
|
||||
"version": "0.0.1",
|
||||
"description": "datetime picker component",
|
||||
"main": "./index.js",
|
||||
"author": "niunai <niunai@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
61
packages/dialog/dialog.vue
Normal file
61
packages/dialog/dialog.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<transition name="van-dialog-bounce">
|
||||
<div class="van-dialog" v-show="value">
|
||||
<div class="van-dialog__header" v-if="title" v-text="title" />
|
||||
<div class="van-dialog__content" v-if="message">
|
||||
<div class="van-dialog__message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
|
||||
</div>
|
||||
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<van-button size="large" class="van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</van-button>
|
||||
<van-button size="large" class="van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '../button';
|
||||
import Popup from '../mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'van-dialog',
|
||||
|
||||
components: {
|
||||
[Button.name]: Button
|
||||
},
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
},
|
||||
lockOnScroll: {
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
message: '',
|
||||
type: '',
|
||||
showConfirmButton: true,
|
||||
showCancelButton: false,
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
callback: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleAction(action) {
|
||||
this.$emit('input', false);
|
||||
this.callback && this.callback(action);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,3 +1,97 @@
|
||||
import Dialog from './src/dialog.js';
|
||||
import Vue from 'vue';
|
||||
import Dialog from './dialog';
|
||||
|
||||
export default Dialog;
|
||||
const DialogConstructor = Vue.extend(Dialog);
|
||||
|
||||
let currentDialog;
|
||||
let instance;
|
||||
let dialogQueue = [];
|
||||
|
||||
const defaultCallback = action => {
|
||||
/* istanbul ignore else */
|
||||
if (currentDialog) {
|
||||
if (currentDialog.resolve && action === 'confirm') {
|
||||
currentDialog.resolve(action);
|
||||
} else if (currentDialog.reject && action === 'cancel') {
|
||||
currentDialog.reject(action);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initInstance = () => {
|
||||
instance = new DialogConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
|
||||
instance.$on('input', value => {
|
||||
instance.value = value;
|
||||
})
|
||||
instance.callback = defaultCallback;
|
||||
};
|
||||
|
||||
const showNextDialog = () => {
|
||||
if (!instance) {
|
||||
initInstance();
|
||||
}
|
||||
|
||||
/* istanbul ignore else */
|
||||
if (!instance.value && dialogQueue.length > 0) {
|
||||
currentDialog = dialogQueue.shift();
|
||||
|
||||
const { options } = currentDialog;
|
||||
|
||||
for (const prop in options) {
|
||||
/* istanbul ignore else */
|
||||
if (options.hasOwnProperty(prop)) {
|
||||
instance[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
|
||||
instance.callback = options.callback || defaultCallback;
|
||||
instance.value = true;
|
||||
document.body.appendChild(instance.$el);
|
||||
}
|
||||
};
|
||||
|
||||
const DialogBox = options => {
|
||||
return new Promise((resolve, reject) => { // eslint-disable-line
|
||||
dialogQueue.push({
|
||||
options: { ...options },
|
||||
callback: options.callback,
|
||||
resolve: resolve,
|
||||
reject: reject
|
||||
});
|
||||
|
||||
showNextDialog();
|
||||
});
|
||||
};
|
||||
|
||||
DialogBox.alert = function(options) {
|
||||
return DialogBox({
|
||||
type: 'alert',
|
||||
title: '',
|
||||
message: '',
|
||||
closeOnClickOverlay: false,
|
||||
showCancelButton: false,
|
||||
...options
|
||||
});
|
||||
};
|
||||
|
||||
DialogBox.confirm = function(options) {
|
||||
return DialogBox({
|
||||
type: 'confirm',
|
||||
title: '',
|
||||
message: '',
|
||||
closeOnClickOverlay: true,
|
||||
showCancelButton: true,
|
||||
...options
|
||||
});
|
||||
};
|
||||
|
||||
DialogBox.close = function() {
|
||||
instance.value = false;
|
||||
dialogQueue = [];
|
||||
currentDialog = null;
|
||||
};
|
||||
|
||||
export default DialogBox;
|
||||
|
||||
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