---
name: "cover-view"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "cover-view - 覆盖在原生组件之上的文本视图"
---

## cover-view

> [VERSION] 基础库 >= 2.10.0

### 描述

覆盖在原生组件之上的视图容器，可覆盖在 map、video、canvas 等原生组件上。


### 示例代码

#### 基础用法

*index.tyml*

```xml
<map longitude="{{120.15}}" latitude="{{30.28}}" class="map">
  <cover-view class="cover">
    <text>覆盖层内容</text>
  </cover-view>
</map>
```

*index.tyss*

```css
.map {
  width: 100%;
  height: 400rpx;
}
.cover {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  padding: 10rpx 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 8rpx;
}
```

*index.js*

```javascript
Page({});
```

#### 覆盖在 video 上

*index.tyml*

```xml
<video src="{{videoSrc}}" class="video">
  <cover-view class="cover-btn">
    <text>自定义按钮</text>
  </cover-view>
</video>
```

*index.tyss*

```css
.video {
  width: 100%;
  height: 400rpx;
}
.cover-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  padding: 10rpx 30rpx;
  background-color: rgba(0, 122, 255, 0.8);
  color: #fff;
  border-radius: 8rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    videoSrc: 'https://images.tuyacn.com/rms-static/602542e0-48f8-11f1-95db-cfd3b8132c07-1778036702734.mp4',
  },
});
```


### 常见问题

1. 需在原生组件上覆盖其它组件, 且该组件不作为原生组件子节点时, 必须在最外层使用 `cover-view` 包裹住, 其它场景不建议使用`cover-view`
2. 不要嵌套使用 `cover-view` , `cover-view` 只作为覆盖在原生组件之上的包裹标签使用
3. 不要作为原生组件子节点使用
4. 建议`cover-view` 子节点不要溢出父节点