# Mask

- category: Components
- chinese: 遮罩层
- type: 基本

---
<a href="http://nuke.alibaba-inc.com/" target="_blank"> Nuke UI </a>


![nuke-mask@ALINPM](http://web.npm.alibaba-inc.com/badge/v/nuke-mask.svg?style=flat-square)  ![nuke-mask@ALINPM](http://web.npm.alibaba-inc.com/badge/d/nuke-mask.svg?style=flat-square)

## 何时使用

Mask 是一个简单的遮罩层，常用于展示上层的对话框、提示等

## 设计思路

**新增 web 端支持**

**注意 weex < 0.15 的安卓客户端，mask 可能存在兼容性问题，请慎用**

Mask 在 native 端封装了 `mask` 组件，在 web 端使用 View 封装，因此如果要实现遮挡全屏的效果，对组件层级和样式书写有如下要求：

- 页面根节点不能有任何 padding、margin、border 样式 （确保边缘不漏出来）
- Mask 组件必须是根节点的最后一个子元素 （确保 View 堆叠顺序）


## API

参数 | 说明 | 类型 | 默认值
-----|-----|-----|-----
style | 样式object |obj |
animate| 显示时是否开启动画|boolean|true
effect | 显示的动画效果，animate = true 时生效，枚举值可选：ease-in,ease-in-out,ease-out,linear,cubic-bezier|string|'ease-in-out'
maskClosable| 能否点击空白区域关闭|boolean|false
duration | 动画时长，默认 200（单位是 ms）|number|200
contentStyle| 内容 style, 如果 Mask 的Children 数量超过1个，可能需要使用。参见如下解释| obj|

### 关于 contentStyle

如果 Mask 标签内部不止 1 个子组件，默认我们会在 children 外面再包一层 View，contentStyle 为了控制这层 View 的样式。

<img src="https://img.alicdn.com/tfs/TB1LYU0kPihSKJjy0FlXXadEXXa-1100-750.png" width="600" />



### 实例方法：

- this.refs.myMask.show() : 显示浮层
- this.refs.myMask.hide() : 关闭浮层

## demo 参考

<img src="https://img.alicdn.com/tfs/TB1AlB.SFXXXXarXVXXXXXXXXXX-1242-2208.png" width="240" />

扫码预览(手淘、千牛、天猫等)

<img src="https://img.alicdn.com/tfs/TB1lpKqSFXXXXcvXpXXXXXXXXXX-280-280.png" width="160" /> 

## 使用方法

- 安装

```bash
// 切换到你的 rax 项目中
tnpm i nuke-mask --save
// 参考如下 demo 您可能还需要安装
// tnpm i nuke-view nuke-text nuke-checkbox nuke-button nuke-page --save
```

- 调用示例

```js
/** @jsx createElement */
import {createElement, Component,render} from 'rax';
import Input from 'nuke-input';
import View from 'nuke-view';
import Text from 'nuke-text';
import Env from 'nuke-env';
import Checkbox from 'nuke-checkbox';
import Button from 'nuke-button';
import Mask from 'nuke-mask';
import Page from 'nuke-page';
const {isWeb} =Env;
let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
        this.GroupFruit = [
            {value: 'zj', label: '浙江'},
            {value: 'ah', label: '安徽'},
            {value: 'sh', label: '上海'}
        ];
        this.state = {
            fruitChecked:['ah'],
        }
    }
    showMask(){
        this.refs.myMask.show();
    }
    hideMask(){
        this.refs.myMask.hide();
    }
    
    onChange =(value) =>{

        this.setState({
            fruitChecked:value
        })
    }
    render() {
        return (
            <Page title="Mask">
                <Page.Intro main="浮层中嵌入简易表单操作"></Page.Intro>
                <View style={styles.result}>
                    {this.state.fruitChecked ? <Text style={styles.resultText}>已选择： {this.state.fruitChecked.join(',')}</Text> :null}
                </View>
                <Button type="primary" onPress={(e)=>this.showMask()}>打开浮层(空白区域不能关闭)</Button>
                <Mask defaultVisible={false} ref="myMask" animate={true} style={styles.mask} contentStyle={styles.body}>
                    
                        <View style={styles.head}><Text style={styles.textHead}>选择区域</Text></View>
                        <View style={styles.topicsWrap}>
                            <Checkbox.Group value={this.state.fruitChecked} onChange={ this.onChange } size="small" dataSource={ this.GroupFruit }  style={{marginRight:10}}></Checkbox.Group>
                        </View>
                         <View style={styles.footer}>
                            <Button rect block style={styles.dlgBtn} type="primary" size="large" onPress={()=>this.hideMask()}>确定</Button>
                           
                        </View>
                   
                </Mask>
                
                
            </Page>
        );
    }
}
const styles={
    textarea:{
        // position:'absolute'
        width: '600rem',
        height: '200rem',
        borderWidth:'1rem',
        borderStyle:'solid',
        borderColor:'#cccccc'
    },
    mask:{
        flex:1,
        backgroundColor:'rgba(0,0,0,0.7)',
        justifyContent: 'flex-end',
    },

    body: {
        width: '750rem',
        height: '468rem',
        borderRadius:'8rem',
        
        paddingTop:30,
        borderRadius:'8rem',
        backgroundColor: '#ffffff',
      },
      head:{
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomColor:'#eeeeee',
        borderBottomStyle:'solid',
        borderBottomWidth:'1rem',
      },
      textHead:{
        color:'#3d4145',
        fontSize:32,
      },
      topics:{
        paddingLeft:40,
        paddingRight:40,
        flexDirection:'row',
      },
      text:{
        fontSize:'28rem',
        padding:'10rem',
        color:'#3089dc',
        borderColor:'#3089dc',
        borderStyle:'solid',
        borderWidth:'1rem',
        marginRight:'20rem'
      },
      footer: {
        borderTopColor:'#dddddd',
        flexDirection:'row',
        borderTopStyle:'solid',
        borderTopWidth:1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        height: '94rem'
      },
      dlgBtn:{
        flex:1,
      },
      result : {
        height:'480rem',
        margin:'30rem',
        padding:'10rem',
        backgroundColor:'#ffffff',
        justifyContent:'center',
        alignItems:'center'
    },
    resultText : {
        fontSize:'28rem'
    },
}
render(<App/>);
```

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />