fix filed and step

This commit is contained in:
cookfront 2017-03-09 17:32:44 +08:00
parent c17a4261ec
commit 5387aaae29
7 changed files with 118 additions and 14 deletions

View File

@ -86,3 +86,24 @@ export default {
</zan-actionsheet> </zan-actionsheet>
``` ```
::: :::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| actions | 行动按钮数组 | Array | [] | |
| title | 标题 | String | | |
| cancelText | 取消按钮文案 | String | | |
| overlay | 是否显示遮罩 | Boolean | | |
| closeOnClickOverlay | 点击遮罩是否关闭ActionSheet | Boolean | | |
### actions
`API`中的`actions`为一个对象数组,数组中的每一个对象配置每一列,每一列有以下`key`
| key | 说明 |
|-----------|-----------|
| name | 标题 |
| subname | 二级标题 |
| className | 为对应列添加特殊的`class` |
| loading | 是否是loading状态 |

View File

@ -1,3 +1,13 @@
<script>
export default {
data() {
return {
username: 'zhangmin'
};
}
};
</script>
## Field组件 ## Field组件
表单中`input``textarea`的输入框。 表单中`input``textarea`的输入框。
@ -9,7 +19,7 @@
:::demo 基础用法 :::demo 基础用法
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-field type="text" label="用户名:" placeholder="请输入用户名"></zan-field> <zan-field type="text" label="用户名:" placeholder="请输入用户名" v-model="username"></zan-field>
<zan-field type="password" label="密码:" placeholder="请输入密码"></zan-field> <zan-field type="password" label="密码:" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍:" placeholder="请输入个人介绍"></zan-field> <zan-field type="textarea" label="个人介绍:" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group> </zan-cell-group>
@ -28,14 +38,26 @@
``` ```
::: :::
### 监听change事件 ### 禁用的输入框
监听组件的`change`事件 传入`disabled`属性即可
:::demo 监听change事件 :::demo 禁用的输入框
```html ```html
<zan-cell-group> <zan-cell-group>
<zan-field type="text" label="用户名:" placeholder="请输入用户名" @change="handleChange"></zan-field> <zan-field label="用户名:" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
</zan-cell-group>
```
:::
### 错误的输入框
传入`error`属性即可。
:::demo 禁用的输入框
```html
<zan-cell-group>
<zan-field label="用户名:" type="text" placeholder="请输入用户名" error></zan-field>
</zan-cell-group> </zan-cell-group>
``` ```
::: :::
@ -49,6 +71,7 @@
| value | 输入框的值 | string | '' | | | value | 输入框的值 | string | '' | |
| label | 输入框标签 | string | '' | | | label | 输入框标签 | string | '' | |
| disabled | 是否禁用输入框 | boolean | false | | | disabled | 是否禁用输入框 | boolean | false | |
| error | 输入框是否有错误 | boolean | false | |
| readonly | 输入框是否只读 | boolean | false | | | readonly | 输入框是否只读 | boolean | false | |
| maxlength | 输入框maxlength | [String, Number] | '' | | | maxlength | 输入框maxlength | [String, Number] | '' | |

View File

@ -0,0 +1,43 @@
<style>
@component-namespace demo {
@b icon {
.zan-icon {
margin: 10px;
font-size: 45px;
}
}
}
</style>
## Icon
### 所有Icon
:::demo 所有Icon
```html
<zan-icon name="album"></zan-icon>
<zan-icon name="arrow"></zan-icon>
<zan-icon name="camera"></zan-icon>
<zan-icon name="certificate"></zan-icon>
<zan-icon name="check"></zan-icon>
<zan-icon name="checked"></zan-icon>
<zan-icon name="close"></zan-icon>
<zan-icon name="gift"></zan-icon>
<zan-icon name="home"></zan-icon>
<zan-icon name="location"></zan-icon>
<zan-icon name="message"></zan-icon>
<zan-icon name="send"></zan-icon>
<zan-icon name="shopping-cart"></zan-icon>
<zan-icon name="sign"></zan-icon>
<zan-icon name="store"></zan-icon>
<zan-icon name="topay"></zan-icon>
<zan-icon name="tosend"></zan-icon>
```
:::
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| name | icon名称 | string | '' | |

View File

@ -27,6 +27,10 @@
"path": "/button", "path": "/button",
"title": "Button" "title": "Button"
}, },
{
"path": "/icon",
"title": "Icon"
},
{ {
"path": "/cell", "path": "/cell",
"title": "Cell" "title": "Cell"

View File

@ -3,14 +3,15 @@
class="zan-field" class="zan-field"
:title="label" :title="label"
:class="{ :class="{
'is-textarea': type === 'textarea', 'zan-field--hastextarea': type === 'textarea',
'is-nolabel': !label 'zan-field--nolabel': !label,
'zan-field--disabled': disabled,
'zan-field--error': error
}"> }">
<textarea <textarea
v-if="type === 'textarea'" v-if="type === 'textarea'"
class="zan-field__control" class="zan-field__control"
v-model="currentValue" v-model="currentValue"
@change="$emit('change', currentValue)"
:placeholder="placeholder" :placeholder="placeholder"
:maxlength="maxlength" :maxlength="maxlength"
:disabled="disabled" :disabled="disabled"
@ -20,7 +21,6 @@
v-else v-else
class="zan-field__control" class="zan-field__control"
:value="currentValue" :value="currentValue"
@change="$emit('change', currentValue)"
@input="handleInput" @input="handleInput"
:type="type" :type="type"
:placeholder="placeholder" :placeholder="placeholder"
@ -46,9 +46,10 @@ export default {
default: 'text' default: 'text'
}, },
placeholder: String, placeholder: String,
value: String, value: {},
label: String, label: String,
disabled: Boolean, disabled: Boolean,
error: Boolean,
readonly: Boolean, readonly: Boolean,
maxlength: [String, Number] maxlength: [String, Number]
}, },
@ -66,7 +67,6 @@ export default {
currentValue(val) { currentValue(val) {
this.$emit('input', val); this.$emit('input', val);
console.log(val);
} }
}, },

View File

@ -6,13 +6,13 @@
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@when textarea { @m hastextarea {
.zan-field__control { .zan-field__control {
min-height: 60px; min-height: 60px;
} }
} }
@when nolabel { @m nolabel {
.zan-cell__title { .zan-cell__title {
display: none; display: none;
} }
@ -23,6 +23,19 @@
} }
} }
@m disabled {
.zan-field__control {
color: $c-gray-dark;
}
}
@m error {
.zan-field__control,
.zan-cell__title {
color: $c-red;
}
}
.zan-cell__title, .zan-cell__title,
.zan-cell__value { .zan-cell__value {
float: none; float: none;

View File

@ -106,7 +106,7 @@
.zan-step__circle-container { .zan-step__circle-container {
left: auto; left: auto;
right: -8px; right: -9px;
} }
.zan-step__line { .zan-step__line {