您的当前位置:首页正文

Vue组件开发系列之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;
}