# cover-view

覆盖在原生组件上的文本视图。

部分组件如 map、video、canvas 通过原生控件实现，原生组件层级高于前端组件（类似 flash 层级高于 div）。为了能正常覆盖原生组件，设计了 cover-view。

注意：

cover-view 嵌套使用时，内部不可直接写文本节点，需要使用 cover-view 包裹
cover-view、cover-image 中不支持嵌套其它组件
建议在安卓、iOS 场景使用

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-title">cover-view 覆盖在原生组件上的元素</view>
    <view class="demo-title">cover-image 支持嵌套在 cover-view 里</view>
    <demo-cell title="建议在移动端场景使用">
      <video
        style="width: 100%"
        id="demoVideo"
        :controls="false"
        :enable-progress-gesture="false"
        :show-center-play-btn="true"
        src="https://histatic.zhipin.com/front/files/9hdB3UbpDU6RGawJw2gedo.mp4"
      >
        <cover-view style="color: #ccc">简单的自定义 controls</cover-view>
        <cover-image
          style="width: 50px;height:50px"
          class="controls-play img"
          src="../../../static/image/手机.png"
        ></cover-image>
        <view style="color: #ccc;margin-top:15px">普通视图</view>
      </video>
      <cover-view style="color: #ccc">
        <cover-view>cover-view嵌套</cover-view>
        <cover-image
          style="width: 50px;height:50px"
          class="controls-pause img"
          src="../../../static/image/手机1.png"
        ></cover-image>
      </cover-view>
    </demo-cell>
  </view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

支持的事件：click

属性名	类型	说明
scroll-top	number/string	设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效

← movable-view cover-image →