vant components
This commit is contained in:
cookfront
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import ActionSheet from './src/actionsheet';
|
||||
|
||||
export default ActionSheet;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
<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 in actions"
|
||||
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 ZanLoading from 'packages/loading';
|
||||
import ZanIcon from 'packages/icon';
|
||||
|
||||
export default {
|
||||
name: 'van-actionsheet',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
components: {
|
||||
ZanLoading,
|
||||
ZanIcon
|
||||
},
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,3 @@
|
||||
import BadgeGroup from '../badge/src/badge-group';
|
||||
|
||||
export default BadgeGroup;
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Badge from './src/badge';
|
||||
|
||||
export default Badge;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="van-badge-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-badge-group',
|
||||
|
||||
props: {
|
||||
// 当前激活 tab 面板的 key
|
||||
activeKey: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
badges: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<a class="van-badge" :href="url" @click="handleClick" :class="{
|
||||
'van-badge--select': isSelect
|
||||
}">
|
||||
<div class="van-badge__active"></div>
|
||||
<div v-if="info" class="van-badge__info">{{info}}</div>
|
||||
{{title}}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-badge',
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
default: 'javascript:;'
|
||||
},
|
||||
info: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.$parent.badges.push(this);
|
||||
},
|
||||
|
||||
computed: {
|
||||
isSelect() {
|
||||
const parent = this.$parent;
|
||||
return parent.badges.indexOf(this) === parent.activeKey;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.$emit('click', e, {
|
||||
title: this.title,
|
||||
url: this.url,
|
||||
info: this.info
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Button from './src/button';
|
||||
|
||||
export default Button;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-button",
|
||||
"version": "0.0.1",
|
||||
"description": "button component",
|
||||
"main": "./index.js",
|
||||
"author": "niunai",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
/**
|
||||
* @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 ZanLoading from 'packages/loading';
|
||||
|
||||
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
|
||||
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'van-button',
|
||||
|
||||
components: {
|
||||
'van-loading': ZanLoading
|
||||
},
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Card from './src/card';
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-card",
|
||||
"version": "0.0.1",
|
||||
"description": "card component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div class="van-card">
|
||||
<img :src="thumb" alt="" class="van-card__img">
|
||||
<div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}">
|
||||
<div class="van-card__info">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="van-card__title"></h4>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<p v-if="desc" v-text="desc" class="van-card__desc"></p>
|
||||
</slot>
|
||||
<slot name="tags"></slot>
|
||||
</div>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-card',
|
||||
props: {
|
||||
thumb: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
title: String,
|
||||
desc: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
import CellGroup from '../cell/src/cell-group';
|
||||
|
||||
export default CellGroup;
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Cell from './src/cell';
|
||||
|
||||
export default Cell;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-cell",
|
||||
"version": "0.0.1",
|
||||
"description": "cell component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div class="van-cell-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-cell-group'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="handleClick">
|
||||
<div
|
||||
class="van-cell__title"
|
||||
v-if="this.$slots.title || title"
|
||||
>
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="van-cell__text" v-text="title"></span>
|
||||
<span class="van-cell__label" v-if="label" v-text="label"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div
|
||||
class="van-cell__value"
|
||||
v-if="value || this.$slots.default"
|
||||
:class="{
|
||||
'van-cell__value--link': isLink,
|
||||
'van-cell__value--alone': !this.$slots.title && !title && !label
|
||||
}"
|
||||
>
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<i class="van-icon van-icon-arrow" v-if="isLink"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-cell',
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
title: String,
|
||||
value: [String, Number],
|
||||
url: String,
|
||||
label: String,
|
||||
isLink: Boolean,
|
||||
required: Boolean
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
import CheckboxGroup from 'packages/checkbox/src/checkbox-group';
|
||||
|
||||
export default CheckboxGroup;
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Checkbox from './src/checkbox';
|
||||
|
||||
export default Checkbox;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-checkbox",
|
||||
"version": "0.0.1",
|
||||
"description": "checkbox component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="van-checkbox-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-checkbox-group',
|
||||
|
||||
props: {
|
||||
value: {},
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.$emit('change', val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div
|
||||
class="van-checkbox"
|
||||
:class="{
|
||||
'van-checkbox--disabled': isDisabled
|
||||
}">
|
||||
<span class="van-checkbox__input">
|
||||
<input
|
||||
v-model="currentValue"
|
||||
type="checkbox"
|
||||
class="van-checkbox__control"
|
||||
:disabled="isDisabled">
|
||||
<span class="van-icon" :class="{
|
||||
'van-icon-checked': isChecked,
|
||||
'van-icon-check': !isChecked
|
||||
}">
|
||||
</span>
|
||||
</span>
|
||||
<span class="van-checkbox__label" @click="handleLabelClick">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import findParent from 'src/mixins/findParent';
|
||||
|
||||
export default {
|
||||
name: 'van-checkbox',
|
||||
|
||||
mixins: [findParent],
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
value: {},
|
||||
name: [String, Number]
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* `checkbox`是否在`van-checkbox-group`中
|
||||
*/
|
||||
isGroup() {
|
||||
return !!this.findParentByComponentName('van-checkbox-group');
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`当前值
|
||||
*/
|
||||
currentValue: {
|
||||
get() {
|
||||
return this.isGroup && this.parentGroup ? this.parentGroup.value.indexOf(this.name) !== -1 : this.value;
|
||||
},
|
||||
|
||||
set(val) {
|
||||
if (this.isGroup && this.parentGroup) {
|
||||
const parentValue = this.parentGroup.value.slice();
|
||||
if (val) {
|
||||
if (parentValue.indexOf(this.name) === -1) {
|
||||
parentValue.push(this.name);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
}
|
||||
} else {
|
||||
const index = parentValue.indexOf(this.name);
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$emit('input', val);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`是否被选中
|
||||
*/
|
||||
isChecked() {
|
||||
if ({}.toString.call(this.currentValue) === '[object Boolean]') {
|
||||
return this.currentValue;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* `checkbox`是否被禁用
|
||||
*/
|
||||
isDisabled() {
|
||||
return this.isGroup && this.parentGroup
|
||||
? this.parentGroup.disabled
|
||||
: this.disabled;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleLabelClick() {
|
||||
if (this.isDisabled) {
|
||||
return;
|
||||
}
|
||||
this.currentValue = !this.currentValue;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Col from './src/col';
|
||||
|
||||
export default Col;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
<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 Number(this.$parent.gutter);
|
||||
},
|
||||
style() {
|
||||
const padding = `${this.gutter / 2}px`;
|
||||
return this.gutter
|
||||
? { paddingLeft: padding, paddingRight: padding }
|
||||
: null;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import DateTimePicker from './src/datetime-picker';
|
||||
|
||||
export default DateTimePicker;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"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": {}
|
||||
}
|
||||
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<van-picker
|
||||
ref="picker"
|
||||
:columns="columns"
|
||||
:visible-item-count="visibleItemCount"
|
||||
@change="handlePickerChange"
|
||||
@confirm="handlePickerConfirm"
|
||||
showToolbar>
|
||||
</van-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Picker from 'packages/picker';
|
||||
|
||||
const allowedType = ['time', 'date', 'datetime'];
|
||||
|
||||
export default {
|
||||
name: 'van-datetime-picker',
|
||||
|
||||
components: {
|
||||
Picker
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'datetime',
|
||||
validator(value) {
|
||||
return allowedType.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'yyyy.mm.dd hh时 mm分'
|
||||
},
|
||||
visibleItemCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
minDate: {
|
||||
type: Date,
|
||||
default() {
|
||||
return new Date(new Date().getFullYear() - 10, 0, 1);
|
||||
}
|
||||
},
|
||||
maxDate: {
|
||||
type: Date,
|
||||
default() {
|
||||
return new Date(new Date().getFullYear() + 10, 11, 31);
|
||||
}
|
||||
},
|
||||
minHour: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
maxHour: {
|
||||
type: Number,
|
||||
default: 23
|
||||
},
|
||||
value: null
|
||||
},
|
||||
|
||||
data() {
|
||||
let value = this.value;
|
||||
if (!value) {
|
||||
if (this.type.indexOf('date') > -1) {
|
||||
value = this.minDate;
|
||||
} else {
|
||||
const minHour = this.minHour;
|
||||
value = `${minHour > 10 ? minHour : '0' + minHour}:00`;
|
||||
}
|
||||
} else {
|
||||
value = this.correctValue(value);
|
||||
}
|
||||
|
||||
return {
|
||||
innerValue: value
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
val = this.correctValue(val);
|
||||
const isEqual = this.type === 'time' ? val === this.innerValue : val.valueOf() === this.innerValue.valueOf();
|
||||
if (!isEqual) this.innerValue = val;
|
||||
},
|
||||
innerValue(val) {
|
||||
console.log(val + '!!!');
|
||||
this.updateColumnValue(val);
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
ranges() {
|
||||
if (this.type === 'time') {
|
||||
return [
|
||||
[this.minHour, this.maxHour],
|
||||
[0, 59]
|
||||
];
|
||||
}
|
||||
|
||||
const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue);
|
||||
const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue);
|
||||
|
||||
const result = [
|
||||
[minYear, maxYear],
|
||||
[minMonth, maxMonth],
|
||||
[minDate, maxDate],
|
||||
[minHour, maxHour],
|
||||
[minMinute, maxMinute]
|
||||
];
|
||||
|
||||
if (this.type === 'date') result.splice(3, 2);
|
||||
return result;
|
||||
},
|
||||
columns() {
|
||||
const results = this.ranges.map(range => {
|
||||
const values = this.times(range[1] - range[0] + 1, index => {
|
||||
const value = range[0] + index;
|
||||
return value < 10 ? `0${value}` : `${value}`;
|
||||
});
|
||||
|
||||
return {
|
||||
values
|
||||
};
|
||||
});
|
||||
return results;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
correctValue(value) {
|
||||
// 仅时间
|
||||
if (this.type === 'time') {
|
||||
const [hour, minute] = value.split(':');
|
||||
let correctedHour = Math.max(hour, this.minHour);
|
||||
correctedHour = Math.min(correctedHour, this.maxHour);
|
||||
|
||||
return `${correctedHour}:${minute}`;
|
||||
}
|
||||
|
||||
// 含有日期的情况
|
||||
const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', value);
|
||||
const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', value);
|
||||
const minDay = new Date(minYear, minMonth - 1, minDate, minHour, minMinute);
|
||||
const maxDay = new Date(maxYear, maxMonth - 1, maxDate, maxHour, maxMinute);
|
||||
value = Math.max(value, minDay);
|
||||
value = Math.min(value, maxDay);
|
||||
|
||||
return new Date(value);
|
||||
},
|
||||
times(n, iteratee) {
|
||||
let index = -1;
|
||||
const result = Array(n);
|
||||
|
||||
while (++index < n) {
|
||||
result[index] = iteratee(index);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
getBoundary(type, value) {
|
||||
const boundary = this[`${type}Date`];
|
||||
const year = boundary.getFullYear();
|
||||
let month = 1;
|
||||
let date = 1;
|
||||
let hour = 0;
|
||||
let minute = 0;
|
||||
|
||||
if (type === 'max') {
|
||||
month = 12;
|
||||
date = this.getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
|
||||
hour = 23;
|
||||
minute = 59;
|
||||
}
|
||||
|
||||
if (value.getFullYear() === year) {
|
||||
month = boundary.getMonth() + 1;
|
||||
if (value.getMonth() + 1 === month) {
|
||||
date = boundary.getDate();
|
||||
if (value.getDate() === date) {
|
||||
hour = boundary.getHours();
|
||||
if (value.getHours() === hour) {
|
||||
minute = boundary.getMinutes();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
[`${type}Year`]: year,
|
||||
[`${type}Month`]: month,
|
||||
[`${type}Date`]: date,
|
||||
[`${type}Hour`]: hour,
|
||||
[`${type}Minute`]: minute
|
||||
};
|
||||
},
|
||||
getTrueValue(formattedValue) {
|
||||
if (!formattedValue) return;
|
||||
while (isNaN(parseInt(formattedValue, 10))) {
|
||||
formattedValue = formattedValue.slice(1);
|
||||
}
|
||||
return parseInt(formattedValue, 10);
|
||||
},
|
||||
getMonthEndDay(year, month) {
|
||||
if (this.isShortMonth(month)) {
|
||||
return 30;
|
||||
} else if (month === 2) {
|
||||
return this.isLeapYear(year) ? 29 : 28;
|
||||
} else {
|
||||
return 31;
|
||||
}
|
||||
},
|
||||
isLeapYear(year) {
|
||||
return (year % 400 === 0) || (year % 100 !== 0 && year % 4 === 0);
|
||||
},
|
||||
isShortMonth(month) {
|
||||
return [4, 6, 9, 11].indexOf(month) > -1;
|
||||
},
|
||||
handlePickerConfirm(values) {
|
||||
this.$emit('confirm', this.innerValue);
|
||||
},
|
||||
handlePickerChange(picker) {
|
||||
const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue);
|
||||
console.log(values);
|
||||
let value;
|
||||
|
||||
if (this.type === 'time') {
|
||||
value = values.join(':');
|
||||
} else {
|
||||
const year = this.getTrueValue(values[0]);
|
||||
const month = this.getTrueValue(values[1]);
|
||||
const maxDate = this.getMonthEndDay(year, month);
|
||||
let date = this.getTrueValue(values[2]);
|
||||
date = date > maxDate ? maxDate : date;
|
||||
let hour = 0;
|
||||
let minute = 0;
|
||||
if (this.type === 'datetime') {
|
||||
hour = this.getTrueValue(values[3]);
|
||||
minute = this.getTrueValue(values[4]);
|
||||
}
|
||||
value = new Date(year, month - 1, date, hour, minute);
|
||||
}
|
||||
value = this.correctValue(value);
|
||||
this.innerValue = value;
|
||||
console.log(value, this.innerValue);
|
||||
},
|
||||
updateColumnValue(value) {
|
||||
let values = [];
|
||||
if (this.type === 'time') {
|
||||
const currentValue = value.split(':');
|
||||
values = [
|
||||
currentValue[0],
|
||||
currentValue[1]
|
||||
];
|
||||
} else {
|
||||
values = [
|
||||
`${value.getFullYear()}`,
|
||||
`0${value.getMonth() + 1}`.slice(-2),
|
||||
`0${value.getDate()}`.slice(-2)
|
||||
];
|
||||
if (this.type === 'datetime') {
|
||||
values.push(
|
||||
`0${value.getHours()}`.slice(-2),
|
||||
`0${value.getMinutes()}`.slice(-2)
|
||||
);
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.setColumnByValues(values);
|
||||
});
|
||||
},
|
||||
setColumnByValues(values) {
|
||||
const setColumnValue = this.$refs.picker.setColumnValue;
|
||||
if (this.type === 'time') {
|
||||
setColumnValue(0, values[0]);
|
||||
setColumnValue(1, values[1]);
|
||||
} else {
|
||||
setColumnValue(0, values[0]);
|
||||
setColumnValue(1, values[1]);
|
||||
setColumnValue(2, values[2]);
|
||||
if (this.type === 'datetime') {
|
||||
setColumnValue(3, values[3]);
|
||||
setColumnValue(4, values[4]);
|
||||
}
|
||||
}
|
||||
[].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange());
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Dialog from './src/dialog.js';
|
||||
|
||||
export default Dialog;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-dialog",
|
||||
"version": "0.0.1",
|
||||
"description": "dialog component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import Vue from 'vue';
|
||||
import Dialog from './dialog.vue';
|
||||
import merge from 'src/utils/merge';
|
||||
|
||||
const DialogConstructor = Vue.extend(Dialog);
|
||||
|
||||
let currentDialog;
|
||||
let instance;
|
||||
let dialogQueue = [];
|
||||
|
||||
const defaultCallback = action => {
|
||||
if (currentDialog) {
|
||||
const callback = currentDialog.callback;
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback(action);
|
||||
}
|
||||
|
||||
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.callback = defaultCallback;
|
||||
};
|
||||
|
||||
const showNextDialog = () => {
|
||||
if (!instance) {
|
||||
initInstance();
|
||||
}
|
||||
|
||||
if (!instance.value && dialogQueue.length > 0) {
|
||||
currentDialog = dialogQueue.shift();
|
||||
|
||||
const options = currentDialog.options;
|
||||
|
||||
for (const prop in options) {
|
||||
if (options.hasOwnProperty(prop)) {
|
||||
instance[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
|
||||
if (options.callback === undefined) {
|
||||
instance.callback = defaultCallback;
|
||||
}
|
||||
|
||||
document.body.appendChild(instance.$el);
|
||||
|
||||
Vue.nextTick(() => {
|
||||
instance.value = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var DialogBox = options => {
|
||||
return new Promise((resolve, reject) => { // eslint-disable-line
|
||||
dialogQueue.push({
|
||||
options: merge({}, options),
|
||||
callback: options.callback,
|
||||
resolve: resolve,
|
||||
reject: reject
|
||||
});
|
||||
|
||||
showNextDialog();
|
||||
});
|
||||
};
|
||||
|
||||
DialogBox.alert = function(options) {
|
||||
return DialogBox(merge({
|
||||
type: 'alert',
|
||||
title: '',
|
||||
message: '',
|
||||
closeOnClickOverlay: false,
|
||||
showCancelButton: false
|
||||
}, options));
|
||||
};
|
||||
|
||||
DialogBox.confirm = function(options) {
|
||||
return DialogBox(merge({
|
||||
type: 'confirm',
|
||||
title: '',
|
||||
message: '',
|
||||
closeOnClickOverlay: true,
|
||||
showCancelButton: true
|
||||
}, options));
|
||||
};
|
||||
|
||||
DialogBox.close = function() {
|
||||
instance.value = false;
|
||||
dialogQueue = [];
|
||||
currentDialog = null;
|
||||
};
|
||||
|
||||
export default DialogBox;
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<transition name="dialog-bounce">
|
||||
<div class="van-dialog-wrapper">
|
||||
<div class="van-dialog" v-show="value">
|
||||
<div class="van-dialog__header" v-if="title">
|
||||
<div class="van-dialog__title" v-text="title"></div>
|
||||
</div>
|
||||
<div class="van-dialog__content" v-if="message">
|
||||
<div class="van-dialog__message" :class="{ 'van-dialog__message--notitle': !title }" v-html="message"></div>
|
||||
</div>
|
||||
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="van-dialog__btn van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="van-dialog__btn van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
const CANCEL_TEXT = '取消';
|
||||
const CONFIRM_TEXT = '确认';
|
||||
|
||||
export default {
|
||||
name: 'van-dialog',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
},
|
||||
lockOnScroll: {
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
message: '',
|
||||
type: '',
|
||||
showConfirmButton: true,
|
||||
showCancelButton: false,
|
||||
confirmButtonText: CONFIRM_TEXT,
|
||||
cancelButtonText: CANCEL_TEXT,
|
||||
callback: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleAction(action) {
|
||||
this.value = false;
|
||||
this.callback && this.callback(action);
|
||||
},
|
||||
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.value = false;
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.overlay && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Field from './src/field';
|
||||
|
||||
export default Field;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-field",
|
||||
"version": "0.0.1",
|
||||
"description": "form field component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<van-cell
|
||||
class="van-field"
|
||||
:title="label"
|
||||
:required="required"
|
||||
:class="{
|
||||
'van-field--hastextarea': type === 'textarea',
|
||||
'van-field--nolabel': !label,
|
||||
'van-field--disabled': disabled,
|
||||
'van-field--error': error,
|
||||
'van-field--border': border,
|
||||
'van-field--autosize': autosize
|
||||
}">
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
ref="textareaElement"
|
||||
class="van-field__control"
|
||||
v-model="currentValue"
|
||||
@focus="handleInputFocus"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly"
|
||||
:rows="rows"
|
||||
:cols="cols">
|
||||
</textarea>
|
||||
<input
|
||||
v-else
|
||||
class="van-field__control"
|
||||
:value="currentValue"
|
||||
@input="handleInput"
|
||||
@focus="handleInputFocus"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly">
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime', 'password', 'textarea'];
|
||||
import zanCell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'van-field',
|
||||
|
||||
components: {
|
||||
zanCell
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
validator(value) {
|
||||
return VALID_TYPES.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
placeholder: String,
|
||||
value: {},
|
||||
label: String,
|
||||
disabled: Boolean,
|
||||
error: Boolean,
|
||||
readonly: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: [String, Number],
|
||||
border: Boolean,
|
||||
rows: [String, Number],
|
||||
cols: [String, Number],
|
||||
autosize: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
|
||||
currentValue(val) {
|
||||
if (this.autosize && this.type === 'textarea') this.sizeAdjust();
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleInput(event) {
|
||||
this.currentValue = event.target.value;
|
||||
},
|
||||
|
||||
sizeAdjust() {
|
||||
const textareaElement = this.$refs.textareaElement;
|
||||
const textAreaDiff = (parseInt(textareaElement.style.paddingBottom, 10) +
|
||||
parseInt(textareaElement.style.paddingTop, 10)) || 0;
|
||||
// 需要先设为0， 才可以让scrollHeight正确计算。
|
||||
textareaElement.style.height = 0 + 'px';
|
||||
textareaElement.style.height = (textareaElement.scrollHeight - textAreaDiff) + 'px';
|
||||
},
|
||||
|
||||
handleInputFocus() {
|
||||
this.$emit('focus');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Icon from './src/icon';
|
||||
|
||||
export default Icon;
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "@youzan/van-icon",
|
||||
"version": "0.0.1",
|
||||
"description": "van-icon",
|
||||
"main": "index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<i class="van-icon" :class="'van-icon-' + name" @click="handleIconClick"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-icon',
|
||||
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleIconClick(event) {
|
||||
this.$emit('click', event);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import ImagePreview from './src/image-preview.js';
|
||||
|
||||
export default ImagePreview;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-image-pewview",
|
||||
"version": "0.0.1",
|
||||
"description": "image preview component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import Vue from 'vue';
|
||||
import ImagePreview from './image-preview.vue';
|
||||
|
||||
let instance;
|
||||
|
||||
const ImagePreviewConstructor = Vue.extend(ImagePreview);
|
||||
|
||||
const initInstance = () => {
|
||||
instance = new ImagePreviewConstructor({
|
||||
el: document.createElement('div')
|
||||
});
|
||||
};
|
||||
|
||||
var ImagePreviewBox = images => {
|
||||
if (!instance) {
|
||||
initInstance();
|
||||
}
|
||||
|
||||
if (!instance.value) {
|
||||
instance.images = images;
|
||||
|
||||
document.body.appendChild(instance.$el);
|
||||
|
||||
Vue.nextTick(() => {
|
||||
instance.value = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default ImagePreviewBox;
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<transition name="image-fade">
|
||||
<div class="van-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="item in images">
|
||||
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'src/mixins/popup';
|
||||
import ZanSwipe from 'packages/swipe';
|
||||
import ZanSwipeItem from 'packages/swipe-item';
|
||||
|
||||
export default {
|
||||
name: 'van-image-preview',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
components: {
|
||||
ZanSwipe,
|
||||
ZanSwipeItem
|
||||
},
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
lockOnScroll: {
|
||||
default: true
|
||||
},
|
||||
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
images: [],
|
||||
viewportSize: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePreviewClick() {
|
||||
this.value = false;
|
||||
},
|
||||
|
||||
handleLoad(event) {
|
||||
const containerSize = this.$refs.previewContainer.getBoundingClientRect();
|
||||
const ratio = containerSize.width / containerSize.height;
|
||||
const target = event.currentTarget;
|
||||
const targetRatio = target.width / target.height;
|
||||
|
||||
const centerClass = 'van-image-preview__image--center';
|
||||
const bigClass = 'van-image-preview__image--big';
|
||||
|
||||
if (targetRatio > ratio) {
|
||||
target.className += (' ' + centerClass);
|
||||
} else {
|
||||
target.className += (' ' + bigClass);
|
||||
}
|
||||
},
|
||||
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
this.closing = true;
|
||||
|
||||
this.value = false;
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.modal && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
}, 200);
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this.doAfterClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Lazyload from 'vue-lazyload';
|
||||
|
||||
export default Lazyload;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import ZanLoading from './src/loading';
|
||||
|
||||
export default ZanLoading;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-loading",
|
||||
"version": "0.0.1",
|
||||
"description": "loading component",
|
||||
"main": "./lib/index.js",
|
||||
"author": "jiangruowei",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="van-loading">
|
||||
<span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const VALID_TYPES = ['gradient-circle', 'circle'];
|
||||
const VALID_COLORS = ['black', 'white'];
|
||||
export default {
|
||||
name: 'van-loading',
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'gradient-circle',
|
||||
validator(value) {
|
||||
return VALID_TYPES.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'black',
|
||||
validator(value) {
|
||||
return VALID_COLORS.indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Panel from './src/panel';
|
||||
|
||||
export default Panel;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-panel",
|
||||
"version": "0.0.1",
|
||||
"description": "panel component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="van-panel">
|
||||
<div class="van-panel__header">
|
||||
<slot name="header">
|
||||
<h4 class="van-panel__title" v-text="title"></h4>
|
||||
<span class="van-panel__desc" v-if="desc" v-text="desc"></span>
|
||||
<span class="van-panel__status" v-if="status" v-text="status"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-panel__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="van-panel__footer" v-if="this.$slots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'van-panel',
|
||||
props: {
|
||||
title: String,
|
||||
desc: String,
|
||||
status: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Picker from './src/picker';
|
||||
|
||||
export default Picker;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-picker",
|
||||
"version": "0.0.1",
|
||||
"description": "picker component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
let isDragging = false;
|
||||
|
||||
const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
|
||||
|
||||
export default function(element, options) {
|
||||
const moveFn = function(event) {
|
||||
if (options.drag) {
|
||||
options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
};
|
||||
|
||||
const endFn = function(event) {
|
||||
if (!supportTouch) {
|
||||
document.removeEventListener('mousemove', moveFn);
|
||||
document.removeEventListener('mouseup', endFn);
|
||||
}
|
||||
document.onselectstart = null;
|
||||
document.ondragstart = null;
|
||||
|
||||
isDragging = false;
|
||||
|
||||
if (options.end) {
|
||||
options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
};
|
||||
|
||||
element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
|
||||
if (isDragging) return;
|
||||
document.onselectstart = function() { return false; };
|
||||
document.ondragstart = function() { return false; };
|
||||
|
||||
if (!supportTouch) {
|
||||
document.addEventListener('mousemove', moveFn);
|
||||
document.addEventListener('mouseup', endFn);
|
||||
}
|
||||
isDragging = true;
|
||||
|
||||
if (options.start) {
|
||||
event.preventDefault();
|
||||
options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
|
||||
}
|
||||
});
|
||||
|
||||
if (supportTouch) {
|
||||
element.addEventListener('touchmove', moveFn);
|
||||
element.addEventListener('touchend', endFn);
|
||||
element.addEventListener('touchcancel', endFn);
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="van-picker-column" :class="classNames">
|
||||
<div class="van-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
|
||||
<div
|
||||
v-for="item in currentValues"
|
||||
class="van-picker-column__item"
|
||||
:class="{ 'van-picker-column__item--selected': item === currentValue }"
|
||||
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
|
||||
{{ typeof item === 'object' && item[valueKey] ? item[valueKey] : item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import translateUtil from 'src/utils/transition';
|
||||
import draggable from './draggable';
|
||||
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'van-picker-column',
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 每一列可见备选元素的个数
|
||||
*/
|
||||
visibileColumnCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
/**
|
||||
* 该列所有的可选值
|
||||
*/
|
||||
values: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 每列添加额外的`className`
|
||||
*/
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 行高
|
||||
*/
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
default: DEFAULT_ITEM_HEIGHT
|
||||
},
|
||||
value: {},
|
||||
valueKey: String
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value,
|
||||
currentValues: this.values,
|
||||
isDragging: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
values(val) {
|
||||
this.currentValues = val;
|
||||
},
|
||||
currentValues(val) {
|
||||
if (this.valueIndex === -1) {
|
||||
this.currentValue = (val || [])[0];
|
||||
}
|
||||
},
|
||||
currentValue(val) {
|
||||
this.doOnValueChange();
|
||||
|
||||
this.$emit('input', val);
|
||||
this.$emit('columnChange', this);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* picker可见备选元素总高度
|
||||
*/
|
||||
visibleContentHeight() {
|
||||
return this.itemHeight * this.visibileColumnCount;
|
||||
},
|
||||
|
||||
/**
|
||||
* 当前选中值在`values`中的索引
|
||||
*/
|
||||
valueIndex() {
|
||||
return this.currentValues.indexOf(this.currentValue);
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算picker的拖动范围
|
||||
*/
|
||||
dragRange() {
|
||||
var values = this.currentValues;
|
||||
var visibileColumnCount = this.visibileColumnCount;
|
||||
var itemHeight = this.itemHeight;
|
||||
|
||||
return [-itemHeight * (values.length - Math.ceil(visibileColumnCount / 2)), itemHeight * Math.floor(visibileColumnCount / 2)];
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算`classNames`
|
||||
*/
|
||||
classNames() {
|
||||
return this.className.split(' ');
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initEvents();
|
||||
this.doOnValueChange();
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 将当前`value`值转换成需要垂直方向需要`translate`的值
|
||||
*/
|
||||
value2Translate(value) {
|
||||
const values = this.currentValues;
|
||||
const valueIndex = values.indexOf(value);
|
||||
const offset = Math.floor(this.visibileColumnCount / 2);
|
||||
const itemHeight = this.itemHeight;
|
||||
|
||||
if (valueIndex !== -1) {
|
||||
return (valueIndex - offset) * (-itemHeight);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据当前`translate`的值转换成当前选中的`value`
|
||||
*/
|
||||
translate2Value(translate) {
|
||||
const itemHeight = this.itemHeight;
|
||||
translate = Math.round(translate / itemHeight) * itemHeight;
|
||||
|
||||
const index = -(translate - Math.floor(this.visibileColumnCount / 2) * itemHeight) / itemHeight;
|
||||
|
||||
return this.currentValues[index];
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化拖动事件
|
||||
*/
|
||||
initEvents() {
|
||||
var el = this.$refs.wrapper;
|
||||
var dragState = {};
|
||||
|
||||
var velocityTranslate;
|
||||
var prevTranslate;
|
||||
var pickerItems; // eslint-disable-line
|
||||
|
||||
draggable(el, {
|
||||
start: (event) => {
|
||||
// 存储当前状态
|
||||
dragState = {
|
||||
range: this.dragRange,
|
||||
start: new Date(),
|
||||
startLeft: event.pageX,
|
||||
startTop: event.pageY,
|
||||
startTranslateTop: translateUtil.getElementTranslate(el).top
|
||||
};
|
||||
pickerItems = el.querySelectorAll('.van-picker-item'); // eslint-disable-line
|
||||
},
|
||||
|
||||
drag: (event) => {
|
||||
this.isDragging = true;
|
||||
|
||||
dragState.left = event.pageX;
|
||||
dragState.top = event.pageY;
|
||||
|
||||
const deltaY = dragState.top - dragState.startTop;
|
||||
const translate = dragState.startTranslateTop + deltaY;
|
||||
|
||||
translateUtil.translateElement(el, null, translate);
|
||||
|
||||
velocityTranslate = translate - prevTranslate || translate;
|
||||
|
||||
prevTranslate = translate;
|
||||
},
|
||||
|
||||
end: () => {
|
||||
if (this.isDragging) {
|
||||
this.isDragging = false;
|
||||
|
||||
var momentumRatio = 7;
|
||||
var currentTranslate = translateUtil.getElementTranslate(el).top;
|
||||
var duration = new Date() - dragState.start;
|
||||
|
||||
var momentumTranslate;
|
||||
if (duration < 300) {
|
||||
momentumTranslate = currentTranslate + velocityTranslate * momentumRatio;
|
||||
}
|
||||
|
||||
var dragRange = dragState.range;
|
||||
|
||||
this.$nextTick(() => {
|
||||
var translate;
|
||||
var itemHeight = this.itemHeight;
|
||||
|
||||
if (momentumTranslate) {
|
||||
translate = Math.round(momentumTranslate / itemHeight) * itemHeight;
|
||||
} else {
|
||||
translate = Math.round(currentTranslate / itemHeight) * itemHeight;
|
||||
}
|
||||
|
||||
translate = Math.max(Math.min(translate, dragRange[1]), dragRange[0]);
|
||||
|
||||
translateUtil.translateElement(el, null, translate);
|
||||
|
||||
this.currentValue = this.translate2Value(translate);
|
||||
});
|
||||
}
|
||||
|
||||
dragState = {};
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* `value`改变时调用
|
||||
*/
|
||||
doOnValueChange() {
|
||||
const value = this.currentValue;
|
||||
const wrapper = this.$refs.wrapper;
|
||||
|
||||
translateUtil.translateElement(wrapper, null, this.value2Translate(value));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar" v-show="showToolbar">
|
||||
<slot>
|
||||
<a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
|
||||
<a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
|
||||
<picker-column
|
||||
v-for="(item, index) in columns"
|
||||
v-model="values[index]"
|
||||
:values="item.values"
|
||||
:class-name="item.className"
|
||||
:itemHeight="itemHeight"
|
||||
:visible-item-count="visibleItemCount"
|
||||
:value-key="valueKey"
|
||||
@columnChange="columnValueChange(index)">
|
||||
</picker-column>
|
||||
<div class="van-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PickerColumn from './picker-column';
|
||||
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'van-picker',
|
||||
|
||||
components: {
|
||||
PickerColumn
|
||||
},
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 每一列可见备选元素的个数
|
||||
*/
|
||||
visibileColumnCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
/**
|
||||
* 选中元素区高度
|
||||
*/
|
||||
itemHeight: {
|
||||
type: Number,
|
||||
default: DEFAULT_ITEM_HEIGHT
|
||||
},
|
||||
/**
|
||||
* 对象数组，配置每一列显示的数据
|
||||
*/
|
||||
columns: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 否在组件顶部显示一个toolbar
|
||||
*/
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
valueKey: String
|
||||
},
|
||||
|
||||
computed: {
|
||||
values() {
|
||||
const columns = this.columns || [];
|
||||
const values = [];
|
||||
|
||||
columns.forEach(column => {
|
||||
values.push(column.value || column.values[column.defaultIndex || 0]);
|
||||
});
|
||||
|
||||
return values;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerCancel() {
|
||||
this.$emit('cancel', this.values);
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
this.$emit('confirm', this.values);
|
||||
},
|
||||
/**
|
||||
* 处理列`change`事件
|
||||
*/
|
||||
columnValueChange(index) {
|
||||
this.$emit('change', this, this.values, index);
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应索引的列的实例
|
||||
*/
|
||||
getColumn(index) {
|
||||
const children = this.$children.filter(child => child.$options.name === 'van-picker-column');
|
||||
return children[index];
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应列中选中的值
|
||||
*/
|
||||
getColumnValue(index) {
|
||||
const column = this.getColumn(index);
|
||||
return column && column.values[column.valueIndex];
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置对应列中选中的值
|
||||
*/
|
||||
setColumnValue(index, value) {
|
||||
const column = this.getColumn(index);
|
||||
if (column) {
|
||||
column.currentValue = value;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取对应列中所有的备选值
|
||||
*/
|
||||
getColumnValues(index) {
|
||||
const column = this.getColumn(index);
|
||||
return column && column.currentValues;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置对应列中所有的备选值
|
||||
*/
|
||||
setColumnValues(index, values) {
|
||||
const column = this.getColumn(index);
|
||||
if (column) {
|
||||
column.currentValues = values;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取所有列中被选中的值，返回一个数组
|
||||
*/
|
||||
getValues() {
|
||||
return this.values;
|
||||
},
|
||||
|
||||
/**
|
||||
* `values`为一个数组，设置所有列中被选中的值
|
||||
*/
|
||||
setValues(values) {
|
||||
values.forEach((value, index) => {
|
||||
this.setColumnValue(index, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Popup from './src/popup';
|
||||
|
||||
export default Popup;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-popup",
|
||||
"version": "0.0.1",
|
||||
"description": "popup component",
|
||||
"main": "./index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<transition :name="currentTransition">
|
||||
<div v-show="currentValue" class="van-popup" :class="[position ? 'van-popup--' + position : '']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'van-popup',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
lockOnScroll: {
|
||||
default: false
|
||||
},
|
||||
|
||||
closeOnClickOverlay: {
|
||||
default: true
|
||||
},
|
||||
|
||||
transition: {
|
||||
type: String,
|
||||
default: 'popup-slide'
|
||||
},
|
||||
|
||||
position: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: false,
|
||||
currentTransition: this.transition
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentValue(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
if (this.transition !== 'popup-fade') {
|
||||
this.currentTransition = `popup-slide-${this.position}`;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.value) {
|
||||
this.currentValue = true;
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
@@ -0,0 +1,3 @@
|
||||
import Progress from './src/progress';
|
||||
|
||||
export default Progress;
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/van-progress",
|
||||
"version": "0.0.1",
|
||||
"description": "progress component",
|
||||
"main": "./index.js",
|
||||
"author": "jiangruowei",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="van-progress">
|
||||
<div class="van-progress__bar">
|
||||
<span class="van-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
|
||||
<span class="van-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* van-progress
|
||||
* @module components/progress
|
||||
* @desc 开关
|
||||
* @param {boolean} [inactive=false] - 是否置灰
|
||||
* @param {number} [percentage=0] - 进度百分比
|
||||
* @param {string} [pivotText=percentage] - 进度条显示文字
|
||||
* @param {string} [color='#38f'] - 进度条颜色
|
||||
* @param {string} [textColor='#fff'] - 进度条文字颜色
|
||||
*
|
||||
* @example
|
||||
* <van-switch checked="true" disabled="false"></van-switch>
|
||||
*/
|
||||
|
||||
const DEFAULT_COLOR = '#38f';
|
||||
const DEFAULT_TEXT_COLOR = '#fff';
|
||||
const INACTIVE_COLOR = '#cacaca';
|
||||
|
||||
export default {
|
||||
name: 'van-progress',
|
||||
|
||||
props: {
|
||||
percentage: {
|
||||
type: Number,
|
||||
required: true,
|
||||
validator(value) {
|
||||
return value <= 100 && value >= 0;
|
||||
}
|
||||
},
|
||||
inactive: Boolean,
|
||||
pivotText: {
|
||||
type: String,
|
||||
default: function() {
|
||||
return this.percentage + '%';
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: DEFAULT_COLOR
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: DEFAULT_TEXT_COLOR
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
componentColor() {
|
||||
return this.inactive ? INACTIVE_COLOR : this.color;
|
||||
},
|
||||
pivotStyle() {
|
||||
const pivotStyle = {
|
||||
backgroundColor: this.componentColor,
|
||||
color: this.textColor,
|
||||
left: this.percentage + '%',
|
||||
marginLeft: '-14px'
|
||||
};
|
||||
if (this.percentage <= 5) {
|
||||
pivotStyle.left = '0%';
|
||||
pivotStyle.marginLeft = '0';
|
||||
} else if (this.percentage >= 95) {
|
||||
pivotStyle.left = '100%';
|
||||
pivotStyle.marginLeft = '-28px';
|
||||
} else {
|
||||
pivotStyle.left = this.percentage + '%';
|
||||
pivotStyle.marginLeft = '-14px';
|
||||
}
|
||||
|
||||
return pivotStyle;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
@@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user