mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-07 21:19:45 +08:00
fix filed and step
This commit is contained in:
parent
c17a4261ec
commit
5387aaae29
@ -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状态 |
|
||||||
|
@ -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] | '' | |
|
||||||
|
|
||||||
|
43
docs/examples-docs/icon.md
Normal file
43
docs/examples-docs/icon.md
Normal 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 | '' | |
|
@ -27,6 +27,10 @@
|
|||||||
"path": "/button",
|
"path": "/button",
|
||||||
"title": "Button"
|
"title": "Button"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "/icon",
|
||||||
|
"title": "Icon"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "/cell",
|
"path": "/cell",
|
||||||
"title": "Cell"
|
"title": "Cell"
|
||||||
|
@ -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);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user