UNPKG

2.58 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps, CommonEventFunction } from './common'
3
4interface CoverImageProps extends StandardProps {
5 /** 图标路径,支持临时路径、网络地址、云文件ID。暂不支持base64格式。
6 * @supported weapp, h5
7 */
8 src: string
9
10 /** 图片加载成功时触发
11 * @supported weapp, h5
12 */
13 onLoad?: CommonEventFunction
14
15 /** 图片加载失败时触发
16 * @supported weapp, h5
17 */
18 onError?: CommonEventFunction
19}
20
21/** 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view,支持嵌套在cover-view里。
22 * @classification viewContainer
23 * @supported weapp, swan, alipay, h5
24 * @example_react
25 * ```tsx
26 * // js
27 * class App extends Components {
28 * render () {
29 * return (
30 * <View className='container'>
31 * <Video id='myVideo' src='src'>
32 * <CoverView className='controls'>
33 * <CoverView className='play' onClick='play'>
34 * <CoverImage className='img' src='src' />
35 * </CoverView>
36 * </CoverView>
37 * </Video>
38 * )
39 * }
40 * }
41 * // css
42 * .container {
43 * position: relative;
44 * }
45 * .controls {
46 * position: absolute;
47 * top: 50%;
48 * left: 50%;
49 * width: 300px;
50 * height: 225px;
51 * transform: translate(-50%, -50%);
52 * }
53 * ```
54 * @example_vue
55 * ```html
56 * <template>
57 * <view class="container">
58 * <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
59 * </video>
60 * <cover-view class='controls'>
61 * <cover-view class='play' `@tap='play'>
62 * <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
63 * </cover-view>
64 * </cover-view>
65 * </view>
66 * </template>
67 *
68 * <style>
69 * .container {
70 * position: relative;
71 * }
72 * .controls {
73 * position: absolute;
74 * top: 50%;
75 * left: 50%;
76 * width: 300px;
77 * height: 225px;
78 * transform: translate(-50%, -50%);
79 * }
80 * </style>
81 * ```
82 * @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
83 */
84declare const CoverImage: ComponentType<CoverImageProps>
85
86export { CoverImage, CoverImageProps }