Mask


通用遮罩层,通常被其他组件依赖,亦可单独使用。

示例
  1. <nut-mask
  2. :visible.sync="maskShow"
  3. @open-mask="maskOpen"
  4. @close-mask="maskClose"
  5. ></nut-mask>

  1. export default {
  2. data(){
  3. return{
  4. maskShow:false
  5. }
  6. },
  7. methods:{
  8. maskOpen(){
  9. console.log('maskOpen方法执行了');
  10. },
  11. maskClose(){
  12. console.log('maskClose方法执行了');
  13. }
  14. }
  15. }

Props
参数说明类型默认值备注
visible.sync显示/隐藏Booleanfalse".sync"不可省略
color颜色String'rgba(0,0,0,.5)'支持HEX、RGBA
fade是否开启渐显渐隐动效Booleanfalse
closeOnClickModal点击遮罩层是否关闭Booleantrue若为false,点击不关闭,但仍会触发'close-mask'事件
Events
事件名说明备注
open-mask遮罩层显示时触发
close-mask遮罩层隐藏时触发即便在closeOnClickModal为true,不允许点击关闭的时候依然会触发此事件