@tarojs/components/types/CoverImage.d.ts

Taro 组件库

import { ComponentType } from 'react'
import { StandardProps, CommonEventFunction } from './common'
interface CoverImageProps extends StandardProps {
  /** 图标路径，支持临时路径、网络地址、云文件ID。暂不支持base64格式。
   * @supported weapp, alipay, swan, qq, jd, h5, harmony_hybrid, ascf
   */
  src: string
  /** 图片裁剪、缩放的模式
   * @default "scaleToFill"
   * @supported ascf
   */
  mode?: keyof CoverImageProps.Mode
  /** 格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
   * @supported weapp
   */
  referrerPolicy?: 'origin' | 'no-referrer'
  /** 设置与容器顶部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 top 值，该属性优先级高于 fixed-bottom，CSS 设置的 position、top、bottom 值
   * @supported swan
   */
  fixedTop?: string
  /** 设置与容器右侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 right 值，该属性优先级高于 CSS 设置的 position、left、right 值
   * @supported swan
   */
  fixedRight?: string
  /** 设置与容器底部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 bottom 值，该属性优先级高于 CSS 设置的 position、top、bottom 值
   * @supported swan
   */
  fixedBottom?: string
  /** 设置与容器左侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 left 值，该属性优先级高于 fixed-right，CSS 设置的 position、left、right 值
   * @supported swan
   */
  fixedLeft?: string
  /** 无障碍访问，（角色）标识元素的作用
   * @supported qq
   */
  ariaRole?: string
  /** 无障碍访问，（属性）元素的额外描述
   * @supported qq
   */
  ariaLabel?: string
  /** 图片加载成功时触发
   * @supported weapp, swan, qq, jd, h5, harmony_hybrid, ascf
   */
  onLoad?: CommonEventFunction
  /** 图片加载失败时触发
   * @supported weapp, swan, qq, jd, h5, harmony_hybrid, ascf
   */
  onError?: CommonEventFunction
  /** 点击事件回调。
   * @supported alipay
   */
  onTap?: CommonEventFunction
}
declare namespace CoverImageProps {
  /** mode 的合法值 */
  interface Mode {
    /** 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 */
    scaleToFill
    /** 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 */
    aspectFit
    /** 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 */
    aspectFill
    /** 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 */
    widthFix
    /** 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 */
    heightFix
    /** 裁剪模式，不缩放图片，只显示图片的顶部区域 */
    top
    /** 裁剪模式，不缩放图片，只显示图片的底部区域 */
    bottom
    /** 裁剪模式，不缩放图片，只显示图片的中间区域 */
    center
    /** 裁剪模式，不缩放图片，只显示图片的左边区域 */
    left
    /** 裁剪模式，不缩放图片，只显示图片的右边区域 */
    right
    /** 裁剪模式，不缩放图片，只显示图片的左上边区域 */
    'top left'
    /** 裁剪模式，不缩放图片，只显示图片的右上边区域 */
    'top right'
    /** 裁剪模式，不缩放图片，只显示图片的左下边区域 */
    'bottom left'
    /** 裁剪模式，不缩放图片，只显示图片的右下边区域 */
    'bottom right'
  }
}
/** 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
 * @classification viewContainer
 * @supported weapp, alipay, swan, qq, jd, h5, harmony_hybrid, ascf
 * @example_react
 * ```tsx
 * // js
 * class App extends Components {
 *   render () {
 *     return (
 *       <View className='container'>
 *       <Video id='myVideo' src='src'>
 *         <CoverView className='controls'>
 *           <CoverView className='play' onClick='play'>
 *             <CoverImage className='img' src='src' />
 *           </CoverView>
 *         </CoverView>
 *       </Video>
 *     )
 *   }
 * }
 * // css
 * .container {
 *   position: relative;
 * }
 * .controls {
 *   position: absolute;
 *   top: 50%;
 *   left: 50%;
 *   width: 300px;
 *   height: 225px;
 *   transform: translate(-50%, -50%);
 * }
 * ```
 * @example_vue
 * ```html
 * <template>
 *   <view class="container">
 *     <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
 *     </video>
 *     <cover-view class='controls'>
 *       <cover-view class='play' `@tap='play'>
 *         <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
 *       </cover-view>
 *     </cover-view>
 *   </view>
 * </template>
 *
 * <style>
 * .container {
 *   position: relative;
 * }
 * .controls {
 *   position: absolute;
 *   top: 50%;
 *   left: 50%;
 *   width: 300px;
 *   height: 225px;
 *   transform: translate(-50%, -50%);
 * }
 * </style>
 * ```
 * @see https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
 */
declare const CoverImage: ComponentType<CoverImageProps>
export { CoverImage, CoverImageProps }