未验证 提交 e081c259 编写于 作者: 折腾笔记 提交者: GitHub

Merge pull request #1648 from blackbox079/patch-3

Update docs
......@@ -94,66 +94,66 @@
```
![uniapp](https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/img/form.png?t=201857)
**小程序端注意事项**
小程序端在`from`内的自定义组件内有`input`等表单控件时,无法在`form``submit`事件内获取组件内表单控件值,此时可以使用`behaviors`,示例如下:
```html
<!-- /pages/index/index.vue -->
<template>
<view class="content">
<form @submit="onSubmit">
<comp-input name="test" v-model="testValue"></comp-input>
<button form-type="submit">Submit</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
testValue: 'Hello'
}
},
methods: {
onSubmit(e) {
console.log(e)
}
}
}
</script>
<style>
</style>
```
```html
<!-- /components/compInput/compInput.vue -->
<template>
<view>
<input name="test" style="border: solid 1px #999999;height: 80px;" type="text" @input="onInput" :value="value" />
</view>
</template>
<script>
export default {
name: 'compInput',
behaviors: ['uni://form-field'],
methods: {
onInput(e) {
this.$emit('input', e.detail.value)
}
}
}
</script>
<style>
</style>
```
**小程序端注意事项**
小程序端在`form`内的自定义组件内有`input`等表单控件时,无法在`form``submit`事件内获取组件内表单控件值,此时可以使用`behaviors`,示例如下:
```html
<!-- /pages/index/index.vue -->
<template>
<view class="content">
<form @submit="onSubmit">
<comp-input name="test" v-model="testValue"></comp-input>
<button form-type="submit">Submit</button>
</form>
</view>
</template>
<script>
export default {
data() {
return {
testValue: 'Hello'
}
},
methods: {
onSubmit(e) {
console.log(e)
}
}
}
</script>
<style>
</style>
```
```html
<!-- /components/compInput/compInput.vue -->
<template>
<view>
<input name="test" style="border: solid 1px #999999;height: 80px;" type="text" @input="onInput" :value="value" />
</view>
</template>
<script>
export default {
name: 'compInput',
behaviors: ['uni://form-field'],
methods: {
onInput(e) {
this.$emit('input', e.detail.value)
}
}
}
</script>
<style>
</style>
```
**tips**
- [插件市场](http://ext.dcloud.net.cn/search?q=%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C)有表单校验插件
......@@ -29,7 +29,7 @@
|show-center-play-btn|Boolean|true|是否显示视频中间的播放按钮|字节跳动小程序不支持|
|enable-progress-gesture|Boolean|true|是否开启控制进度的手势|字节跳动小程序不支持|
|object-fit|String|contain|当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖|微信小程序、字节跳动小程序、H5|
|poster|String||视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效||
|poster|String||视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效||
|show-mute-btn|Boolean|false|是否显示静音按钮|微信小程序|
|title|String||视频的标题,全屏时在顶部展示|微信小程序|
|play-btn-position|String|bottom|播放按钮的位置|微信小程序、字节跳动小程序|
......@@ -183,7 +183,7 @@ export default {
- 如何实现抖音、映客等全屏视频垂直滑动切换效果?
* 微信基础库 2.4.0 和 app端nvue 2.1.5 以上,可通过在垂直的swiper中内嵌video来实现。原生导航栏设置为custom,视频长宽设为手机屏幕大小,通过cover-view覆盖视频内容。插件市场有相关[示例](https://ext.dcloud.net.cn/search?q=%E6%8A%96%E9%9F%B3)
- `<video/>` 组件在非H5端是原生组件,层级高于普通前端组件,覆盖其需要使用[cover-view](https://uniapp.dcloud.io/component/cover-view?id=cover-view)组件或plus.nativeObj.view、subNVue。微信基础库 2.4.0 起已支持 video 组件的同层渲染,也就是video在非全屏时,可以被前端元素通过调节zindex来遮挡,但video全屏时,仍需要cover-view覆盖。
- `<video/>` 组件在非H5端是原生组件,层级高于普通前端组件,覆盖其需要使用[cover-view](https://uniapp.dcloud.io/component/cover-view?id=cover-view)组件或plus.nativeObj.view、subNVue。微信基础库 2.4.0 起已支持 video 组件的同层渲染,也就是video在非全屏时,可以被前端元素通过调节z-index来遮挡,但video全屏时,仍需要cover-view覆盖。
- 除微信基础库 2.4.0 和app端nvue页面 2.1.5 以上,其他情况下非H5的video不能放入scroll-view和swiper。注意参考 [原生组件使用限制](/component/native-component)
- App平台:使用 `<video/>` 组件,打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。
......
#### web-view
`web-view` 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指宽高)。
`web-view` 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指宽高)。
> 各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册