mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[bugfix] Field: hide clear icon when readonly (#1395)
This commit is contained in:
parent
60fcfd4d46
commit
64a9b423eb
@ -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>
|
||||
<!---->
|
||||
|
@ -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>
|
||||
<!---->
|
||||
|
@ -111,7 +111,7 @@ Use button slot to insert button
|
||||
|
||||
### API
|
||||
|
||||
Field support all native properties of input tag,such as `maxlength`、`placeholder`、`readonly`、`autofocus`
|
||||
Field support all native properties of input tag,such as `maxlength`、`placeholder`、`autofocus`
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
@ -120,6 +120,7 @@ Field support all native properties of input tag,such 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` |
|
||||
|
@ -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() {
|
||||
|
@ -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` |
|
||||
|
Loading…
x
Reference in New Issue
Block a user