diff --git a/docs/markdown/migrate-from-v2.zh-CN.md b/docs/markdown/migrate-from-v2.zh-CN.md index 440047fc1..6e49a748a 100644 --- a/docs/markdown/migrate-from-v2.zh-CN.md +++ b/docs/markdown/migrate-from-v2.zh-CN.md @@ -170,6 +170,7 @@ Vue 3.0 中增加了 `Teleport` 组件,提供将组件渲染到任意 DOM 位 - 蓝色按钮对应的类型由 `info` 调整为 `primary` - 绿色按钮对应的类型由 `primary` 调整为 `success` +- `native-type` 的默认值由 `submit` 调整为 `button` #### Dialog diff --git a/src/button/README.md b/src/button/README.md index a0d4a8fc5..800ddefdf 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -114,7 +114,7 @@ app.use(Button); | icon-prefix `v2.6.0` | Icon className prefix | _string_ | `van-icon` | | icon-position `v2.10.7` | Icon position, can be set to `right` | `left` | | tag | HTML Tag | _string_ | `button` | -| native-type | Native Type Attribute | _string_ | `''` | +| native-type | Native Type Attribute | _string_ | `button` | | plain | Whether to be plain button | _boolean_ | `false` | | block | Whether to set display block | _boolean_ | `false` | | round | Whether to be round button | _boolean_ | `false` | diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index ee8b54f60..b3ba50924 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -136,7 +136,7 @@ app.use(Button); | icon-prefix `v2.6.0` | 图标类名前缀,同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | | icon-position `v2.10.7` | 图标展示位置,可选值为 `right` | `left` | | tag | 按钮根节点的 HTML 标签 | _string_ | `button` | -| native-type | 原生 button 标签的 type 属性 | _string_ | - | +| native-type | 原生 button 标签的 type 属性 | _string_ | `button` | | block | 是否为块级元素 | _boolean_ | `false` | | plain | 是否为朴素按钮 | _boolean_ | `false` | | square | 是否为方形按钮 | _boolean_ | `false` | diff --git a/src/button/index.js b/src/button/index.js index 34080750d..79fc043c5 100644 --- a/src/button/index.js +++ b/src/button/index.js @@ -23,7 +23,6 @@ export default createComponent({ hairline: Boolean, disabled: Boolean, iconPrefix: String, - nativeType: String, loadingText: String, loadingType: String, tag: { @@ -38,6 +37,10 @@ export default createComponent({ type: String, default: 'normal', }, + nativeType: { + type: String, + default: 'button', + }, loadingSize: { type: String, default: '20px', diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md index dc7d79cca..24c331f4b 100644 --- a/src/form/README.zh-CN.md +++ b/src/form/README.zh-CN.md @@ -509,17 +509,3 @@ export default { | 名称 | 说明 | | ------- | -------- | | default | 表单内容 | - -## 常见问题 - -### 点击表单中的普通按钮为什么会触发表单提交? - -在表单中,除了提交按钮外,可能还有一些其他的功能性按钮,如发送验证码按钮。在使用这些按钮时,要注意将`native-type`设置为`button`,否则会触发表单提交。 - -```html - - 发送验证码 - -``` - -这个问题的原因是浏览器中 button 标签 type 属性的默认值为`submit`,导致触发表单提交。我们会在下个大版本中将 type 的默认值调整为`button`来避免这个问题。