mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
merge: merge master
This commit is contained in:
jiangruowei
commit
befabdcad1
@ -29,7 +29,7 @@ module.exports = {
|
||||
},
|
||||
output: {
|
||||
path: './docs/build/',
|
||||
publicPath: 'docs/build/',
|
||||
publicPath: '/docs/build/',
|
||||
filename: '[name].js'
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -34,5 +34,6 @@
|
||||
"toast": "./packages/toast/index.js",
|
||||
"uploader": "./packages/uploader/index.js",
|
||||
"swipe": "./packages/swipe/index.js",
|
||||
"swipe-item": "./packages/swipe-item/index.js"
|
||||
"swipe-item": "./packages/swipe-item/index.js",
|
||||
"datetime-picker": "./packages/datetime-picker/index.js"
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -22,93 +23,4 @@ export default {
|
||||
|
||||
<style lang="css">
|
||||
@import './assets/docs.css';
|
||||
|
||||
.page-container {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #1f2d3d;
|
||||
margin: 20px 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
section > h3 {
|
||||
font-size: 22px;
|
||||
margin: 23px 0;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5 {
|
||||
font-weight: normal;
|
||||
color: #1f2f3d;
|
||||
|
||||
&:hover a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
margin-left: 320px;
|
||||
padding: 0 20px;
|
||||
|
||||
section > p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
p > code {
|
||||
background-color: #eee;
|
||||
padding: 2px 4px;
|
||||
color: #26a2ff;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-page {
|
||||
width: 100%;
|
||||
border: 5px solid #f5f5f5;
|
||||
height: 580px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #5e6d82;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
border-top: 1px solid #eaeefb;
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
background-color: #eff2f7;
|
||||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,16 +18,10 @@ time, mark, audio, video {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -42,7 +36,7 @@ button, input, select, textarea {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -71,3 +65,115 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
margin-left: 220px;
|
||||
padding: 0 20px;
|
||||
border-left: 1px solid #E5E5E5;
|
||||
|
||||
section {
|
||||
> h2 {
|
||||
font-size: 36px;
|
||||
color: #333;
|
||||
margin: 20px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
margin: 23px 0;
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
> ul li,
|
||||
> ol li {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin: 10px 0 10px 20px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #999;
|
||||
border-radius: 50%;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2, h3, h4, h5 {
|
||||
font-weight: normal;
|
||||
color: #1f2f3d;
|
||||
|
||||
&:hover a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p > code,
|
||||
.table code,
|
||||
li > code {
|
||||
background-color: #F2F2F2;
|
||||
display: inline-block;
|
||||
border: 1px solid #E5E5E5;
|
||||
padding: 2px 4px;
|
||||
color: #333;
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
border: 1px solid #E5E5E5;
|
||||
background-color: #F2F2F2;
|
||||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #E5E5E5;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
130
docs/components/footer-nav.vue
Normal file
130
docs/components/footer-nav.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="footer-nav">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
v-if="leftNav"
|
||||
class="footer-nav__link footer-nav__left"
|
||||
@click="handleNavClick('prev')">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
{{ leftNav.title }}
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
v-if="rightNav"
|
||||
class="footer-nav__link footer-nav__right"
|
||||
@click="handleNavClick('next')">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
{{ rightNav.title }}
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPath: null,
|
||||
nav: [],
|
||||
leftNav: null,
|
||||
rightNav: null
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setNav() {
|
||||
let nav = navConfig['zh-CN'];
|
||||
for (let i = 0; i < nav.length; i++) {
|
||||
let navItem = nav[i];
|
||||
if (!navItem.groups) {
|
||||
this.nav.push(nav[i]);
|
||||
} else {
|
||||
for (let j = 0; j < navItem.groups.length; j++) {
|
||||
this.nav = this.nav.concat(navItem.groups[j].list);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateNav() {
|
||||
let baseUrl = '/component';
|
||||
let currentIndex;
|
||||
|
||||
this.currentPath = this.$route.path.slice(baseUrl.length);
|
||||
|
||||
for (let i = 0, len = this.nav.length; i < len; i++) {
|
||||
if (this.nav[i].path === this.currentPath) {
|
||||
currentIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.leftNav = this.nav[currentIndex - 1];
|
||||
this.rightNav = this.nav[currentIndex + 1];
|
||||
},
|
||||
|
||||
handleNavClick(direction) {
|
||||
this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace footer {
|
||||
@b nav {
|
||||
padding: 24px 0;
|
||||
font-size: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
@e link {
|
||||
color: #3388FF;
|
||||
overflow: hidden;
|
||||
padding-top: 35px;
|
||||
position: relative;
|
||||
|
||||
.zan-icon {
|
||||
width: 20px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
border: 2px solid #3388FF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e left {
|
||||
float: left;
|
||||
|
||||
.zan-icon {
|
||||
transform: rotate(180deg);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e right {
|
||||
float: right;
|
||||
|
||||
.zan-icon {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -43,32 +43,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: []
|
||||
};
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
width: 320px;
|
||||
width: 220px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 20px;
|
||||
padding: 40px 0;
|
||||
float: left;
|
||||
background: #f9fafb;
|
||||
height: inherit;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
@ -82,7 +74,7 @@
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #5e6d82;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
@ -91,9 +83,11 @@
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
padding: 0 20px;
|
||||
|
||||
&.active {
|
||||
color: #20a0ff;
|
||||
color: #3388FF;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
@ -101,20 +95,19 @@
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 13px;
|
||||
padding-left: 24px;
|
||||
|
||||
font-size: 14px;
|
||||
padding-left: 44px;
|
||||
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
color: #3388FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #99a9bf;
|
||||
padding-left: 8px;
|
||||
color: #666;
|
||||
padding-left: 28px;
|
||||
line-height: 26px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@ -100,11 +100,11 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| actions | 行动按钮数组 | Array | [] | |
|
||||
| title | 标题 | String | | |
|
||||
| cancelText | 取消按钮文案 | String | | |
|
||||
| overlay | 是否显示遮罩 | Boolean | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭ActionSheet | Boolean | | |
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | |
|
||||
| title | 标题 | `String` | | |
|
||||
| cancelText | 取消按钮文案 | `String` | | |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`ActionSheet` | `Boolean` | | |
|
||||
|
||||
### actions
|
||||
|
||||
@ -115,4 +115,4 @@ export default {
|
||||
| name | 标题 |
|
||||
| subname | 二级标题 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
| loading | 是否是loading状态 |
|
||||
| loading | 是否是`loading`状态 |
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
## Badge 组件
|
||||
## Badge
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -17,13 +17,13 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | |
|
||||
| active-key | 激活的`badge`的索引 | `string` | `0`但必须子badge里的mark是有`0`位索引 | |
|
||||
|
||||
|
||||
### z-badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| mark | badge的唯一key值 | string | '' | required |
|
||||
| title | badge的文案标题 | string | '' | required |
|
||||
| info | 当前badge的提示消息数量 | string | '' | |
|
||||
| url | 跳转链接 | string | 全连接直接跳转或者hash | |
|
||||
| mark | badge的唯一key值 | `string` | `''` | `required` |
|
||||
| title | badge的文案标题 | `string` | `''` | `required` |
|
||||
| info | 当前badge的提示消息数量 | `string` | `''` | |
|
||||
| url | 跳转链接 | `string` | 全连接直接跳转或者hash | |
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button组件
|
||||
## Button 按钮
|
||||
|
||||
### 按钮功能
|
||||
|
||||
只接受primary, default, danger三种类型，默认default。
|
||||
只接受`primary`, `default`, `danger`三种类型，默认`default`。
|
||||
|
||||
:::demo 按钮功能
|
||||
```html
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
@ -90,7 +90,7 @@
|
||||
|
||||
### loading按钮
|
||||
|
||||
表示loading状态
|
||||
表示`loading`状态
|
||||
|
||||
:::demo loading按钮
|
||||
```html
|
||||
@ -123,9 +123,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 按钮类型 | string | 'default' | 'primary', 'danger' |
|
||||
| size | 按钮尺寸 | string | 'normal' | 'large', 'small', 'mini' |
|
||||
| tag | 按钮标签 | string | 'button' | 'a', 'span', ... |
|
||||
| diabled | 按钮是否禁用 | Boolean | | |
|
||||
| block | 按钮是否显示为块级元素 | Boolean | | |
|
||||
| type | 按钮类型 | `string` | `default` | `primary`, `danger` |
|
||||
| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` |
|
||||
| tag | 按钮标签 | `string` | `button` | `a`, `span`, ... |
|
||||
| diabled | 按钮是否禁用 | `boolean` | | |
|
||||
| block | 按钮是否显示为块级元素 | `boolean` | | |
|
||||
|
||||
|
||||
@ -41,9 +41,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| thumb | 左侧图片 | string | '' | '' |
|
||||
| title | 标题 | string | '' | '' |
|
||||
| desc | 描述 | string | '' | '' |
|
||||
| thumb | 左侧图片 | `string` | | |
|
||||
| title | 标题 | `string` | | |
|
||||
| desc | 描述 | `string` | | |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
@ -16,7 +16,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Cell 组件
|
||||
## Cell
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -102,17 +102,17 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 左侧图标 | string | '' | '' |
|
||||
| title | 左侧标题 | string | '' | '' |
|
||||
| value | 右侧内容 | string | '' | '' |
|
||||
| isLink | 是否为链接，链接会在右侧出现箭头 | boolean | '' | '' |
|
||||
| url | 跳转链接 | string | '' | '' |
|
||||
| label | 描述信息，显示在标题下方 | string | '' | '' |
|
||||
| icon | 左侧图标 | `string` | | |
|
||||
| title | 左侧标题 | `string` | | |
|
||||
| value | 右侧内容 | `string` | | |
|
||||
| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean` | | |
|
||||
| url | 跳转链接 | `string` | | |
|
||||
| label | 描述信息，显示在标题下方 | `string` | | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| icon | 自定义icon |
|
||||
| title | 自定义title |
|
||||
| icon | 自定义`icon` |
|
||||
| title | 自定义`title` |
|
||||
|
||||
@ -170,14 +170,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
| name | 根据这个来判断radio是否选中 | Boolean | false | |
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `boolean` | `false` | |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
|
||||
94
docs/examples-docs/datetime-picker.md
Normal file
94
docs/examples-docs/datetime-picker.md
Normal file
@ -0,0 +1,94 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
// picker.setColumnValues(1, citys[values[0]]);
|
||||
console.log(values);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
alert('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
alert('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Picker组件
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-datetime-picker
|
||||
type="time"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</zan-datetime-picker>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| itemHeight | 选中元素区高度 | Number | 44 | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | Array | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | |
|
||||
|
||||
### columns
|
||||
|
||||
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| values | 列中对应的备选值 |
|
||||
| defaultIndex | 初始选中值的索引，默认为0 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
|
||||
### change事件
|
||||
|
||||
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
|
||||
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getColumnValue(index) | 获取对应列中选中的值 |
|
||||
| setColumnValue(index, value) | 设置对应列中选中的值 |
|
||||
| getColumnValues(index) | 获取对应列中所有的备选值 |
|
||||
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
|
||||
| getValues() | 获取所有列中被选中的值，返回一个数组 |
|
||||
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
|
||||
@ -89,5 +89,5 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | String | '' | |
|
||||
| message | 内容 | String | '' | |
|
||||
| title | 标题 | `string` | | |
|
||||
| message | 内容 | `string` | | |
|
||||
|
||||
@ -84,16 +84,32 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Autosize的输入框(仅支持textarea)
|
||||
|
||||
传入`autosize`属性, 且将`rows`设为1。
|
||||
|
||||
:::demo 错误的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | string | text | text, number, email, url, tel, date, datetime, password, textarea |
|
||||
| placeholder | 输入框placeholder | string | '' | |
|
||||
| value | 输入框的值 | string | '' | |
|
||||
| label | 输入框标签 | string | '' | |
|
||||
| disabled | 是否禁用输入框 | boolean | false | |
|
||||
| error | 输入框是否有错误 | boolean | false | |
|
||||
| readonly | 输入框是否只读 | boolean | false | |
|
||||
| maxlength | 输入框maxlength | [String, Number] | '' | |
|
||||
| type | 输入框类型 | `string` | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea` |
|
||||
| placeholder | 输入框placeholder | `string` | | |
|
||||
| value | 输入框的值 | `string` | | |
|
||||
| label | 输入框标签 | `string` | | |
|
||||
| disabled | 是否禁用输入框 | `boolean` | `false` | |
|
||||
| error | 输入框是否有错误 | `boolean` | `false` | |
|
||||
| readonly | 输入框是否只读 | `boolean` | `false` | |
|
||||
| maxlength | 输入框maxlength | `string`, `number` | | |
|
||||
| rows | textarea rows | `string`, `number` | | |
|
||||
| cols | textarea cols | `string`, `number` | | |
|
||||
| autosize | 自动调整高度(仅支持textarea) | `boolean` | `false` | `true`, `false` |
|
||||
|
||||
|
||||
@ -49,4 +49,4 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | icon名称 | string | '' | |
|
||||
| name | icon名称 | `string` | `''` | |
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading
|
||||
## Loading 加载中
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -43,3 +43,10 @@
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | `loading`颜色 | `string` | `black` | `black`, `white` |
|
||||
| type | `loading`类型 | `string` | `gradient-circle` | `gradient-circle`, `circle` |
|
||||
|
||||
@ -84,9 +84,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | string | '' | '' |
|
||||
| desc | 描述 | string | '' | '' |
|
||||
| status | 状态 | string | '' | '' |
|
||||
| title | 标题 | `string` | | |
|
||||
| desc | 描述 | `string` | | |
|
||||
| status | 状态 | `string` | | |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
@ -127,10 +127,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| itemHeight | 选中元素区高度 | Number | 44 | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | Array | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | |
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `number` | `5` | |
|
||||
| itemHeight | 选中元素区高度 | `number` | `44` | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
|
||||
|
||||
### columns
|
||||
|
||||
|
||||
@ -145,4 +145,4 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | Boolean | '' | |
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | | |
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</style>
|
||||
|
||||
|
||||
## Switch组件
|
||||
## Progress
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -64,9 +64,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否只会 | boolean | false | true, false |
|
||||
| percentage | 进度百分比 | number | false | 0-100 |
|
||||
| pivotText | 文字显示 | string | 百分比文字 | - |
|
||||
| color | 进度条颜色 | string | #38f | hexvalue |
|
||||
| textColor | 进度条文字颜色 | string | #fff | hexvalue |
|
||||
| inactive | 是否只会 | `boolean` | `false` | `true`, `false` |
|
||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
|
||||
|
||||
|
||||
@ -57,9 +57,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| min | 最小值 | string/number | 1 | '' |
|
||||
| max | 最大值 | string/number | '' | '' |
|
||||
| step | 步数 | string/number | 1 | '' |
|
||||
| disabled | 是否被禁用了 | boolean | false | '' |
|
||||
| defaultValue | 默认值 | string/number | 1 | '' |
|
||||
| min | 最小值 | `string`, `number` | `1` | |
|
||||
| max | 最大值 | `string`, `number` | | |
|
||||
| step | 步数 | `string`, `number` | `1` | |
|
||||
| disabled | 是否被禁用了 | `boolean` | `false` | |
|
||||
| defaultValue | 默认值 | `string`, `number` | `1` | |
|
||||
|
||||
|
||||
@ -119,14 +119,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
| name | 根据这个来判断radio是否选中 | Boolean | false | |
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `boolean` | `false` | |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
|
||||
@ -31,4 +31,4 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| placeholder | input的placeholder文案 | string | | |
|
||||
| placeholder | `input`的`placeholder`文案 | `string` | | |
|
||||
@ -79,11 +79,11 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前激活的步骤，从0开始 | Number | '' | '' |
|
||||
| icon | 当前步骤的icon | string | '' | '' |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | string | '' | '' |
|
||||
| title | 当前步骤从标题 | string | '' | '' |
|
||||
| description | 当前步骤描述 | string | '' | '' |
|
||||
| active | 当前激活的步骤，从0开始 | `number` | | |
|
||||
| icon | 当前步骤的icon | `string` | | |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `string` | | |
|
||||
| title | 当前步骤从标题 | `string` | | |
|
||||
| description | 当前步骤描述 | `string` | | |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
|
||||
@ -89,6 +89,6 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| checked | 开关状态 | boolean | false | true, false |
|
||||
| loading | loading状态 | boolean | false | true, false |
|
||||
| disabled | 禁用状态 | boolean | false | true, false |
|
||||
| checked | 开关状态 | `boolean` | `false` | `true`, `false` |
|
||||
| loading | loading状态 | `boolean` | `false` | `true`, `false` |
|
||||
| disabled | 禁用状态 | `boolean` | `false` | `true`, `false` |
|
||||
|
||||
@ -124,14 +124,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | string | line | card |
|
||||
| active | 默认激活的tab | string || number | 0 | |
|
||||
| navclass | tabs的内部nav上的自定义classname | string | '' | |
|
||||
| classtype | 两种UI | `string` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `string`, `number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `string` | | |
|
||||
|
||||
|
||||
### zan-tab API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | string | '' | required |
|
||||
| disable | 是否禁用这个tab | Boolean | false | |
|
||||
| title | tab的标题 | `string` | | |
|
||||
| disable | 是否禁用这个tab | `boolean` | `false` | |
|
||||
|
||||
|
||||
@ -52,9 +52,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| plain | 是否是空心tag | boolean | false | '' |
|
||||
| mark | 是否是标记 | boolean | false | '' |
|
||||
| type | tag类型 | string | '' | 'primary', 'success', 'danger' |
|
||||
| plain | 是否是空心tag | `boolean` | `false` | |
|
||||
| mark | 是否是标记 | `boolean` | `false` | |
|
||||
| type | tag类型 | `string` | `''` | `primary`, `success`, `danger` |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -52,6 +52,12 @@ export default {
|
||||
},
|
||||
closeToast() {
|
||||
this.toast.clear();
|
||||
},
|
||||
showHtmlToast() {
|
||||
Toast({
|
||||
type: 'html',
|
||||
message: '<em>HTML<em>'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -140,28 +146,55 @@ export default {
|
||||
:::
|
||||
|
||||
|
||||
### 传入html
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
<zan-button @click="showHtmlToast">打开</zan-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showHtmlToast() {
|
||||
Toast({
|
||||
type: 'html',
|
||||
message: '<em>HTML<em>'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 基础用法
|
||||
### Toast(options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' |
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'fail', 'html' |
|
||||
| message | 内容 | String | '' | - |\| message | 内容 | String | '' | -
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### 快速用法
|
||||
### Toast(message)
|
||||
### Toast(message) || Toast(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| message | 内容 | String | '' | - |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.loading() || Toast.loading(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.success(message) || Toast.success(message, options)
|
||||
|
||||
@ -169,6 +202,7 @@ export default {
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.fail(message) || Toast.fail(message, options)
|
||||
|
||||
@ -176,6 +210,7 @@ export default {
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### instanceOfToast.clear()
|
||||
关闭toast。
|
||||
|
||||
@ -42,10 +42,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | String | 'dataUrl' | 'dataUrl','text' |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | boolean | false | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | Function | | |
|
||||
| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | Function | | |
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string` | `dataUrl` | `dataUrl`, `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean` | `false` | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function` | | |
|
||||
| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function` | | |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -76,6 +76,6 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | String | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | Number | 300 | |
|
||||
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string` | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `number` | `300` | |
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import navConfig from './nav.config.json';
|
||||
import routes from './router.config';
|
||||
import SideNav from './components/side-nav';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import FooterNav from './components/footer-nav';
|
||||
import ZanUI from 'src/index.js';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
@ -19,6 +20,7 @@ Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('footer-nav', FooterNav);
|
||||
|
||||
let routesConfig = routes(navConfig);
|
||||
routesConfig.push({
|
||||
@ -27,15 +29,14 @@ routesConfig.push({
|
||||
});
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
mode: 'history',
|
||||
base: __dirname,
|
||||
routes: routesConfig
|
||||
});
|
||||
|
||||
let indexScrollTop = 0;
|
||||
router.beforeEach((route, redirect, next) => {
|
||||
if (route.path !== '/') {
|
||||
indexScrollTop = document.body.scrollTop;
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
if (isMobile()) {
|
||||
window.location.replace(location.pathname + 'examples.html#' + route.path);
|
||||
@ -45,13 +46,11 @@ router.beforeEach((route, redirect, next) => {
|
||||
next();
|
||||
});
|
||||
|
||||
router.afterEach(route => {
|
||||
router.afterEach((route) => {
|
||||
if (route.path !== '/') {
|
||||
document.body.scrollTop = 0;
|
||||
} else {
|
||||
Vue.nextTick(() => {
|
||||
document.body.scrollTop = indexScrollTop;
|
||||
});
|
||||
const sideNavBox = document.querySelector('.side-nav');
|
||||
const pageContentBox = document.querySelector('.page-content');
|
||||
pageContentBox.style.height = Math.max(sideNavBox && sideNavBox.clientHeight, pageContentBox && pageContentBox.clientHeight) + 'px';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -11,6 +11,6 @@
|
||||
<app></app>
|
||||
</div>
|
||||
|
||||
<script src="docs/build/zanui-examples.js"></script>
|
||||
<script src="/docs/build/zanui-examples.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -11,6 +11,6 @@
|
||||
<app></app>
|
||||
</div>
|
||||
|
||||
<script src="docs/build/zanui-docs.js"></script>
|
||||
<script src="/docs/build/zanui-docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-vue",
|
||||
"version": "0.0.38",
|
||||
"version": "0.0.39",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/zanui.js",
|
||||
"style": "lib/zanui-css/index.css",
|
||||
@ -11,7 +11,7 @@
|
||||
],
|
||||
"scripts": {
|
||||
"bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --history-api-fallback --hot --config build/webpack.config.js",
|
||||
"build:file": "node build/bin/build-entry.js",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
|
||||
"build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
|
||||
@ -141,7 +141,7 @@
|
||||
"vue-template-compiler": "2.1.8",
|
||||
"vue-template-es2015-compiler": "^1.4.2",
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-dev-server": "^1.16.0",
|
||||
"webpack-dev-server": "^1.16.3",
|
||||
"webpack-merge": "^2.0.0",
|
||||
"webpack-node-externals": "^1.5.4",
|
||||
"webpack-vendor-chunk-plugin": "^1.0.0"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a class="zan-cell" :href="url" @click="handleClick">
|
||||
<div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }">
|
||||
<div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }" v-if="this.$slots.title || title || label">
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
|
||||
</slot>
|
||||
|
||||
8
packages/datetime-picker/CHANGELOG.md
Normal file
8
packages/datetime-picker/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
26
packages/datetime-picker/README.md
Normal file
26
packages/datetime-picker/README.md
Normal file
@ -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)
|
||||
3
packages/datetime-picker/index.js
Normal file
3
packages/datetime-picker/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import DateTimePicker from './src/datetime-picker';
|
||||
|
||||
export default DateTimePicker;
|
||||
10
packages/datetime-picker/package.json
Normal file
10
packages/datetime-picker/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@youzan/zan-datetime-picker",
|
||||
"version": "0.0.1",
|
||||
"description": "datetime picker component",
|
||||
"main": "./index.js",
|
||||
"author": "niunai <niunai@youzan.com>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
221
packages/datetime-picker/src/datetime-picker.vue
Normal file
221
packages/datetime-picker/src/datetime-picker.vue
Normal file
@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<zan-picker
|
||||
:columns="columns"
|
||||
:visible-item-count="visibleItemCount"
|
||||
@change="handlePickerChange"
|
||||
@confirm="handlePickerConfirm"
|
||||
showToolbar>
|
||||
</zan-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Picker from 'packages/picker';
|
||||
|
||||
const allowedType = ['time', 'date', 'datetime'];
|
||||
|
||||
export default {
|
||||
name: 'zan-datetime-picker',
|
||||
|
||||
components: {
|
||||
Picker
|
||||
},
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'datetime',
|
||||
validator(value) {
|
||||
return allowedType.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
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() {
|
||||
return {
|
||||
innerValue: this.val
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.innerValue = val;
|
||||
},
|
||||
innerValue(val) {
|
||||
console.log(val + '!!!');
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
ranges() {
|
||||
console.log(this.innerValue + '!!');
|
||||
// return this.innerValue + '!!';
|
||||
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() {
|
||||
return 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
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
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 = value.getDate();
|
||||
if (value.getDate() === date) {
|
||||
hour = value.getHours();
|
||||
if (value.getHours() === hour) {
|
||||
minute = value.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, values, index) {
|
||||
console.log(this.innerValue);
|
||||
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);
|
||||
}
|
||||
this.innerValue = value;
|
||||
console.log(value, this.innerValue);
|
||||
// this.$emit('input', value);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.innerValue = this.value;
|
||||
if (!this.innerValue) {
|
||||
if (this.type.indexOf('date') > -1) {
|
||||
this.innerValue = this.minDate;
|
||||
} else {
|
||||
const minHour = this.minHour;
|
||||
this.innerValue = `${minHour > 10 ? minHour : '0' + minHour}:00`;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -8,22 +8,28 @@
|
||||
'zan-field--nolabel': !label,
|
||||
'zan-field--disabled': disabled,
|
||||
'zan-field--error': error,
|
||||
'zan-field--border': border
|
||||
'zan-field--border': border,
|
||||
'zan-field--autosize': autosize
|
||||
}">
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
ref="textareaElement"
|
||||
class="zan-field__control"
|
||||
v-model="currentValue"
|
||||
@focus="handleInputFocus"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly">
|
||||
:readonly="readonly"
|
||||
:rows="rows"
|
||||
:cols="cols">
|
||||
</textarea>
|
||||
<input
|
||||
v-else
|
||||
class="zan-field__control"
|
||||
:value="currentValue"
|
||||
@input="handleInput"
|
||||
@focus="handleInputFocus"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
@ -33,6 +39,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime', 'password', 'textarea'];
|
||||
import zanCell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
@ -45,7 +52,10 @@ export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
default: 'text',
|
||||
validate(value) {
|
||||
return VALID_TYPES.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
placeholder: String,
|
||||
value: {},
|
||||
@ -55,7 +65,16 @@ export default {
|
||||
readonly: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: [String, Number],
|
||||
border: Boolean
|
||||
border: Boolean,
|
||||
rows: [String, Number],
|
||||
cols: [String, Number],
|
||||
autosize: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
validate(value) {
|
||||
if (value && this.type !== 'textarea') return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -70,6 +89,7 @@ export default {
|
||||
},
|
||||
|
||||
currentValue(val) {
|
||||
if (this.autosize && this.type === 'textarea') this.sizeAdjust();
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
@ -77,6 +97,19 @@ export default {
|
||||
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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -65,6 +65,9 @@ export default {
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
values(val) {
|
||||
this.currentValues = val;
|
||||
},
|
||||
|
||||
@ -15,6 +15,10 @@
|
||||
<zan-icon class="zan-toast__icon" :name="type"></zan-icon>
|
||||
<div class="zan-toast__text">{{message}}</div>
|
||||
</template>
|
||||
<!-- 传入html -->
|
||||
<template v-if="displayStyle === 'html'">
|
||||
<div class="zan-toast__text" v-html="message"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="zan-toast__overlay" v-if="forbidClick"></div>
|
||||
</div>
|
||||
@ -25,7 +29,8 @@
|
||||
import zanLoading from 'packages/loading';
|
||||
import zanIcon from 'packages/icon';
|
||||
|
||||
const TOAST_TYPES = ['text', 'loading', 'success', 'fail'];
|
||||
const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
|
||||
const DEFAULT_STYLE_LIST = ['success', 'fail'];
|
||||
/**
|
||||
* zan-toast
|
||||
* @module components/toast
|
||||
@ -70,14 +75,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
displayStyle() {
|
||||
switch (this.type) {
|
||||
case 'text':
|
||||
return 'text';
|
||||
case 'loading':
|
||||
return 'loading';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
return DEFAULT_STYLE_LIST.indexOf(this.type) > -1 ? 'default' : this.type;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-css",
|
||||
"version": "0.0.38",
|
||||
"version": "0.0.39",
|
||||
"description": "zanui css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
}
|
||||
|
||||
@when alone {
|
||||
float: left;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -50,6 +50,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@m autosize {
|
||||
.zan-field__control {
|
||||
min-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-cell__title,
|
||||
.zan-cell__value {
|
||||
float: none;
|
||||
|
||||
@ -48,6 +48,18 @@
|
||||
width: 33.333%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 4 {
|
||||
.zan-picker-column {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@m 5 {
|
||||
.zan-picker-column {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
@m text {
|
||||
@m text, html {
|
||||
padding: 12px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
@ -34,6 +34,7 @@ import Toast from '../packages/toast/index.js';
|
||||
import Uploader from '../packages/uploader/index.js';
|
||||
import Swipe from '../packages/swipe/index.js';
|
||||
import SwipeItem from '../packages/swipe-item/index.js';
|
||||
import DatetimePicker from '../packages/datetime-picker/index.js';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
@ -69,6 +70,7 @@ const install = function(Vue) {
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
Vue.component(Swipe.name, Swipe);
|
||||
Vue.component(SwipeItem.name, SwipeItem);
|
||||
Vue.component(DatetimePicker.name, DatetimePicker);
|
||||
};
|
||||
|
||||
// auto install
|
||||
@ -78,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||
|
||||
module.exports = {
|
||||
install,
|
||||
version: '0.0.38',
|
||||
version: '0.0.39',
|
||||
Button,
|
||||
Switch,
|
||||
Field,
|
||||
@ -114,5 +116,6 @@ module.exports = {
|
||||
Toast,
|
||||
Uploader,
|
||||
Swipe,
|
||||
SwipeItem
|
||||
SwipeItem,
|
||||
DatetimePicker
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user