[bugfix] Field: hide clear icon when readonly (#1395)

This commit is contained in:
neverland 2018-07-04 01:01:48 +08:00 committed by GitHub
parent 60fcfd4d46
commit 64a9b423eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 11 additions and 6 deletions

View File

@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
</div>
<!---->
</div>
<div readonly="readonly" placeholder="收件地区" class="van-cell van-hairline van-field">
<div placeholder="收件地区" class="van-cell van-hairline van-field">
<!---->
<div class="van-cell__title"><span>收件地区</span>
<!---->

View File

@ -35,7 +35,7 @@ exports[`create a AddressEdit 1`] = `
</div>
<!---->
</div>
<div readonly="readonly" placeholder="收件地区" class="van-cell van-hairline van-field">
<div placeholder="收件地区" class="van-cell van-hairline van-field">
<!---->
<div class="van-cell__title"><span>收件地区</span>
<!---->
@ -141,7 +141,7 @@ exports[`create a AddressEdit with props 1`] = `
</div>
<!---->
</div>
<div readonly="readonly" placeholder="收件地区" class="van-cell van-hairline van-field">
<div placeholder="收件地区" class="van-cell van-hairline van-field">
<!---->
<div class="van-cell__title"><span>收件地区</span>
<!---->

View File

@ -111,7 +111,7 @@ Use button slot to insert button
### API
Field support all native properties of input tagsuch as `maxlength``placeholder``readonly`、`autofocus`
Field support all native properties of input tagsuch as `maxlength``placeholder``autofocus`
| Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------|
@ -120,6 +120,7 @@ Field support all native properties of input tagsuch as `maxlength`、`placeh
| type | Input type | `String` | `text` |
| border | Whether to show inner border | `Boolean` | `true` |
| disabled | Whether to disable field | `Boolean` | `false` |
| readonly | Whether to be readonly | `Boolean` | `false` |
| clearable | Whether to be clearable | `Boolean` | `false` |
| required | Whether to show required mark | `Boolean` | `false`
| is-link | Whether to show link icon | `Boolean` | `false` |

View File

@ -22,6 +22,7 @@
ref="input"
:class="b('control', inputAlign)"
:value="value"
:readonly="readonly"
/>
<input
v-else
@ -31,6 +32,7 @@
:class="b('control', inputAlign)"
:type="type"
:value="value"
:readonly="readonly"
>
<icon
v-if="showClear"
@ -72,6 +74,7 @@ export default create({
center: Boolean,
isLink: Boolean,
leftIcon: String,
readonly: Boolean,
required: Boolean,
clearable: Boolean,
labelAlign: String,
@ -107,7 +110,7 @@ export default create({
computed: {
showClear() {
return this.clearable && this.focused && this.value !== '' && this.isDef(this.value);
return this.clearable && this.focused && this.value !== '' && this.isDef(this.value) && !this.readonly;
},
listeners() {

View File

@ -113,7 +113,7 @@ Vue.use(Field);
### API
Field 默认支持 Input 标签所有的原生属性,比如 `maxlength``placeholder``readonly`、`autofocus` 等
Field 默认支持 Input 标签所有的原生属性,比如 `maxlength``placeholder``autofocus` 等
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|-------------|
@ -122,6 +122,7 @@ Field 默认支持 Input 标签所有的原生属性,比如 `maxlength`、`pla
| type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` |
| border | 是否显示内边框 | `Boolean` | `true` |
| disabled | 是否禁用输入框 | `Boolean` | `false` |
| readonly | 是否只读 | `Boolean` | `false` |
| clearable | 是否启用清除控件 | `Boolean` | `false` |
| required | 是否显示表单必填星号 | `Boolean` | `false` |
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` |