cover-view

# cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image

# 兼容性

Web	Android	iOS
4.0	x	x

# 示例

hello uni-app x

Template

Script

<template>
  <view>
    <page-head title="cover-view用于覆盖map、video等原生组件"></page-head>
    <view class="uni-padding-wrap uni-common-mb">
      <text class="uni-subtitle-text">注意：需要正确配置地图服务商的Key才能正常显示地图组件</text>
    </view>
    <view class="cover-content">
      <map :latitude="latitude" :longitude="longitude"></map>
      <cover-view class="cover-view">简单的cover-view</cover-view>
      <cover-image class="cover-image" src="/static/uni.png"></cover-image>
    </view>
  </view>
</template>



<style>
  map {
    width: 100%;
    height: 600px;
  }

  .cover-content {
    position: relative;
  }

  .cover-view {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 375rpx;
    text-align: center;
    background-color: #DDDDDD;
  }

  .cover-image {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 96px;
    height: 96px;
  }

  .tips {
    font-size: 12px;
    margin-top: 15px;
    opacity: .8;
  }
</style>