fix filed and step
This commit is contained in:
@@ -86,3 +86,24 @@ export default {
|
||||
</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状态 |
|
||||
|
||||
@@ -1,3 +1,13 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: 'zhangmin'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Field组件
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
@@ -9,7 +19,7 @@
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<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="textarea" label="个人介绍:" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
@@ -28,14 +38,26 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 监听change事件
|
||||
### 禁用的输入框
|
||||
|
||||
监听组件的`change`事件。
|
||||
传入`disabled`属性即可。
|
||||
|
||||
:::demo 监听change事件
|
||||
:::demo 禁用的输入框
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
@@ -49,6 +71,7 @@
|
||||
| value | 输入框的值 | string | '' | |
|
||||
| label | 输入框标签 | string | '' | |
|
||||
| disabled | 是否禁用输入框 | boolean | false | |
|
||||
| error | 输入框是否有错误 | boolean | false | |
|
||||
| readonly | 输入框是否只读 | boolean | false | |
|
||||
| maxlength | 输入框maxlength | [String, Number] | '' | |
|
||||
|
||||
|
||||
@@ -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 | '' | |
|
||||
Reference in New Issue
Block a user