1 | import { ComponentType } from 'react'
|
2 | import { StandardProps, CommonEventFunction } from './common'
|
3 |
|
4 | interface 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 | */
|
84 | declare const CoverImage: ComponentType<CoverImageProps>
|
85 |
|
86 | export { CoverImage, CoverImageProps }
|