Mask
通用遮罩层,通常被其他组件依赖,亦可单独使用。
示例
<nut-mask
:visible.sync="maskShow"
@open-mask="maskOpen"
@close-mask="maskClose"
></nut-mask>
export default {
data(){
return{
maskShow:false
}
},
methods:{
maskOpen(){
console.log('maskOpen方法执行了');
},
maskClose(){
console.log('maskClose方法执行了');
}
}
}
Props
参数 | 说明 | 类型 | 默认值 | 备注 |
---|
visible.sync | 显示/隐藏 | Boolean | false | ".sync"不可省略 |
color | 颜色 | String | 'rgba(0,0,0,.5)' | 支持HEX、RGBA |
fade | 是否开启渐显渐隐动效 | Boolean | false | |
closeOnClickModal | 点击遮罩层是否关闭 | Boolean | true | 若为false,点击不关闭,但仍会触发'close-mask'事件 |
Events
事件名 | 说明 | 备注 |
---|
open-mask | 遮罩层显示时触发 | — |
close-mask | 遮罩层隐藏时触发 | 即便在closeOnClickModal为true,不允许点击关闭的时候依然会触发此事件 |