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

packages/address-edit/test/__snapshots__/demo.spec.js.snap

@@ -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>
             <!---->

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -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>
         <!---->

packages/field/en-US.md

@@ -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` |

packages/field/index.vue

@@ -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() {

packages/field/zh-CN.md

@@ -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` |