UNPKG

2.65 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { ViewProps } from './View'
3
4interface CoverViewProps extends ViewProps {
5 /** 设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效
6 * @supported weapp
7 */
8 scrollTop?: number
9
10 /**
11 * 适用于地图组件 map 的自定义气泡 customCallout
12 * @supported weapp
13 */
14 markerId?: string
15
16 /**
17 * @supported weapp
18 */
19 slot?: string
20}
21
22/** 覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。
23 * @classification viewContainer
24 * @supported weapp, swan, alipay, h5
25 * @example_react
26 * ```tsx
27 * // js
28 * class App extends Components {
29 * render () {
30 * return (
31 * <View className='container'>
32 * <Video id='myVideo' src='src'>
33 * <CoverView className='controls'>
34 * <CoverView className='play' onClick='play'>
35 * <CoverImage className='img' src='src' />
36 * </CoverView>
37 * </CoverView>
38 * </Video>
39 * </View>
40 * )
41 * }
42 * }
43 * // css
44 * .container {
45 * position: relative;
46 * }
47 * .controls {
48 * position: absolute;
49 * top: 50%;
50 * left: 50%;
51 * width: 300px;
52 * height: 225px;
53 * transform: translate(-50%, -50%);
54 * }
55 * ```
56 * @example_vue
57 * ```html
58 * <template>
59 * <view class="container">
60 * <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
61 * </video>
62 * <cover-view class='controls'>
63 * <cover-view class='play' `@tap='play'>
64 * <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
65 * </cover-view>
66 * </cover-view>
67 * </view>
68 * </template>
69 *
70 * <style>
71 * .container {
72 * position: relative;
73 * }
74 * .controls {
75 * position: absolute;
76 * top: 50%;
77 * left: 50%;
78 * width: 300px;
79 * height: 225px;
80 * transform: translate(-50%, -50%);
81 * }
82 * </style>
83 * ```
84 * @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
85 */
86declare const CoverView: ComponentType<CoverViewProps>
87
88export { CoverView, CoverViewProps }