未验证 提交 f62a1373 编写于 作者: 卷尾松鼠 提交者: GitHub

Update form.md

小程序端在`from`内的自定义组件内有`input`等表单控件时 -> 小程序端在`form`内的自定义组件内有`input`等表单控件时
上级 cd91de30
...@@ -94,66 +94,66 @@ ...@@ -94,66 +94,66 @@
``` ```
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/form.png?t=201857) ![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/form.png?t=201857)
**小程序端注意事项** **小程序端注意事项**
小程序端在`from`内的自定义组件内有`input`等表单控件时,无法在`form``submit`事件内获取组件内表单控件值,此时可以使用`behaviors`,示例如下: 小程序端在`form`内的自定义组件内有`input`等表单控件时,无法在`form``submit`事件内获取组件内表单控件值,此时可以使用`behaviors`,示例如下:
```html ```html
<!-- /pages/index/index.vue --> <!-- /pages/index/index.vue -->
<template> <template>
<view class="content"> <view class="content">
<form @submit="onSubmit"> <form @submit="onSubmit">
<comp-input name="test" v-model="testValue"></comp-input> <comp-input name="test" v-model="testValue"></comp-input>
<button form-type="submit">Submit</button> <button form-type="submit">Submit</button>
</form> </form>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
testValue: 'Hello' testValue: 'Hello'
} }
}, },
methods: { methods: {
onSubmit(e) { onSubmit(e) {
console.log(e) console.log(e)
} }
} }
} }
</script> </script>
<style> <style>
</style> </style>
``` ```
```html ```html
<!-- /components/compInput/compInput.vue --> <!-- /components/compInput/compInput.vue -->
<template> <template>
<view> <view>
<input name="test" style="border: solid 1px #999999;height: 80px;" type="text" @input="onInput" :value="value" /> <input name="test" style="border: solid 1px #999999;height: 80px;" type="text" @input="onInput" :value="value" />
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'compInput', name: 'compInput',
behaviors: ['uni://form-field'], behaviors: ['uni://form-field'],
methods: { methods: {
onInput(e) { onInput(e) {
this.$emit('input', e.detail.value) this.$emit('input', e.detail.value)
} }
} }
} }
</script> </script>
<style> <style>
</style> </style>
``` ```
**tips** **tips**
- [插件市场](http://ext.dcloud.net.cn/search?q=%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C)有表单校验插件 - [插件市场](http://ext.dcloud.net.cn/search?q=%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C)有表单校验插件
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册