Vue组件开发系列之Model遮罩层组件

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/model

20181030_111804.gif
组件结构：

<template>
    <div class="wt-model" :style="{background:'rgba(0,0,0,'+ opacity +')', 'z-index': zIndex}">
        <slot></slot>
    </div>
</template>

代码分析：

props参数：

props: {
    opacity: { // 组件透明度
      type: Number,
      default: () => {
        return 0.3;
      }
    },
    zIndex: { // 组件层级
      type: Number | String,
      default: () => {
        return 102;
      }
    }
  }

css代码：

.wt-model {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}