Overlay 蒙层组件

Overlay 蒙层组件

#介绍

用于弹窗出现时，遮罩底部文字，避免干扰。

#引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Overlay } from '@dolphin-iot/ui'

Vue.use(Overlay);

#代码演示

#基础用法

show 属性用于控制蒙层的显示或者隐藏

<template>
  <div class="demo-list">
    <mx-overlay :show="show" @click.native="show = !show"></mx-overlay>
    <mx-button @click="onToggle">back toggle</mx-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    onToggle() {
      this.show = !this.show;
    }
  }
};
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;
}
.demo-list{
  padding-top: 10px;
}
</style>

#自定义样式

customStyle 属性用于用户自定义样式

<template>
  <div class="demo-list">
    <mx-overlay :customStyle="customStyle" :show="show" @click.native="show = !show"></mx-overlay>
    <mx-button @click="onToggle">自定义样式</mx-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      customStyle: { backgroundColor: 'rgba(0,0,0,0.6)' }
    };
  },
  methods: {
    onToggle() {
      this.show = !this.show;
    },
  }
};
</script>
<style lang="scss" scoped>
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;
}
.demo-list{
  padding-top: 10px;
}
</style>

#Prop

字段	说明	类型	默认值object
show	是否显示Overlay蒙层	boolean	false
z-index	尺寸，可选值为：small base large	number	1030
lock-scroll	是否禁止Overlay滚动	boolean	false
duration	蒙层动画显示时长	number	0.36
custom-style	自定义蒙层样式	object	-