| 1 | import { ComponentType } from 'react'
|
| 2 | import { StandardProps, CommonEventFunction } from './common'
|
| 3 | interface CoverImageProps extends StandardProps {
|
| 4 | /** 图标路径，支持临时路径、网络地址、云文件ID。暂不支持base64格式。
|
| 5 | * @supported weapp, alipay, swan, qq, h5
|
| 6 | */
|
| 7 | src: string
|
| 8 |
|
| 9 | /** 格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
|
| 10 | * @supported weapp
|
| 11 | */
|
| 12 | referrerPolicy?: 'origin' | 'no-referrer'
|
| 13 |
|
| 14 | /** 设置与容器顶部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 top 值，该属性优先级高于 fixed-bottom，CSS 设置的 position、top、bottom 值
|
| 15 | * @supported swan
|
| 16 | */
|
| 17 | fixedTop?: string
|
| 18 |
|
| 19 | /** 设置与容器右侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 right 值，该属性优先级高于 CSS 设置的 position、left、right 值
|
| 20 | * @supported swan
|
| 21 | */
|
| 22 | fixedRight?: string
|
| 23 |
|
| 24 | /** 设置与容器底部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 bottom 值，该属性优先级高于 CSS 设置的 position、top、bottom 值
|
| 25 | * @supported swan
|
| 26 | */
|
| 27 | fixedBottom?: string
|
| 28 |
|
| 29 | /** 设置与容器左侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 left 值，该属性优先级高于 fixed-right，CSS 设置的 position、left、right 值
|
| 30 | * @supported swan
|
| 31 | */
|
| 32 | fixedLeft?: string
|
| 33 |
|
| 34 | /** 无障碍访问，（角色）标识元素的作用
|
| 35 | * @supported qq
|
| 36 | */
|
| 37 | ariaRole?: string
|
| 38 |
|
| 39 | /** 无障碍访问，（属性）元素的额外描述
|
| 40 | * @supported qq
|
| 41 | */
|
| 42 | ariaLabel?: string
|
| 43 |
|
| 44 | /** 图片加载成功时触发
|
| 45 | * @supported weapp, swan, qq, h5
|
| 46 | */
|
| 47 | onLoad?: CommonEventFunction
|
| 48 |
|
| 49 | /** 图片加载失败时触发
|
| 50 | * @supported weapp, swan, qq, h5
|
| 51 | */
|
| 52 | onError?: CommonEventFunction
|
| 53 |
|
| 54 | /** 点击事件回调。
|
| 55 | * @supported alipay
|
| 56 | */
|
| 57 | onTap?: CommonEventFunction
|
| 58 | }
|
| 59 |
|
| 60 | /** 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
|
| 61 | * @classification viewContainer
|
| 62 | * @supported weapp, alipay, swan, qq, h5, harmony
|
| 63 | * @example_react
|
| 64 | * ```tsx
|
| 65 | * // js
|
| 66 | * class App extends Components {
|
| 67 | * render () {
|
| 68 | * return (
|
| 69 | * <View className='container'>
|
| 70 | * <Video id='myVideo' src='src'>
|
| 71 | * <CoverView className='controls'>
|
| 72 | * <CoverView className='play' onClick='play'>
|
| 73 | * <CoverImage className='img' src='src' />
|
| 74 | * </CoverView>
|
| 75 | * </CoverView>
|
| 76 | * </Video>
|
| 77 | * )
|
| 78 | * }
|
| 79 | * }
|
| 80 | * // css
|
| 81 | * .container {
|
| 82 | * position: relative;
|
| 83 | * }
|
| 84 | * .controls {
|
| 85 | * position: absolute;
|
| 86 | * top: 50%;
|
| 87 | * left: 50%;
|
| 88 | * width: 300px;
|
| 89 | * height: 225px;
|
| 90 | * transform: translate(-50%, -50%);
|
| 91 | * }
|
| 92 | * ```
|
| 93 | * @example_vue
|
| 94 | * ```html
|
| 95 | * <template>
|
| 96 | * <view class="container">
|
| 97 | * <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
|
| 98 | * </video>
|
| 99 | * <cover-view class='controls'>
|
| 100 | * <cover-view class='play' `@tap='play'>
|
| 101 | * <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
|
| 102 | * </cover-view>
|
| 103 | * </cover-view>
|
| 104 | * </view>
|
| 105 | * </template>
|
| 106 | *
|
| 107 | * <style>
|
| 108 | * .container {
|
| 109 | * position: relative;
|
| 110 | * }
|
| 111 | * .controls {
|
| 112 | * position: absolute;
|
| 113 | * top: 50%;
|
| 114 | * left: 50%;
|
| 115 | * width: 300px;
|
| 116 | * height: 225px;
|
| 117 | * transform: translate(-50%, -50%);
|
| 118 | * }
|
| 119 | * </style>
|
| 120 | * ```
|
| 121 | * @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
|
| 122 | */
|
| 123 | declare const CoverImage: ComponentType<CoverImageProps>
|
| 124 | export { CoverImage, CoverImageProps }
|