# Half Screen-Dialog 半屏弹窗

[toc]

**这是一个半屏弹窗组件，可以用于订单提交等场景。**

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-half-screen-dialog": "../dist/half-screen-dialog/index"
  }
}

```

## 用法

### 基本用法

```html
<tea-button
  bind:tap="openDialog1"
>打开半屏弹窗</tea-button>

<tea-half-screen-dialog
  title="标题"
  closabled
  button="{{ button }}"
  show="{{ show }}"
  offsetY="{{ offsetY }}"
>
  <view slot="body">
    这是内容区
  </view>
  <view slot="footer">
    这是底部
  </view>
</tea-half-screen-dialog>
```

```js
Page({
  data: {
    show: false,
    button: {
      text: '确定',
      variant: 'warning',
      width: '125px',
      height: '56px',
		},

		offsetY: 0
  },

  openDialog1() {
    this.setData({
			show: true,
			offsetY: 0,
    });
	},
});
```

### Y轴方向偏移

```js
Page({
  // ...
	openDialog2() {
		this.setData({
			show: true,
			offsetY: -60
		});
	},
});

```

## Props

| 参数               | 描述             | 类型              | 默认值     |
| ---------------- | -------------- | --------------- | ------- |
| show             | 是否显示弹窗         | `Boolean`       | `false` |
| title            | 弹窗的标题          | `String`        | ``      |
| backdropClosable | 点击遮罩层是否关闭弹窗    | `Boolean`       | `true`  |
| closabled        | 是否显示关闭按钮       | `Boolean`       | `false` |
| button           | 传入的确认button 按钮 | `Object`        | -       |
| offsetY          | 弹出层在Y轴上的偏移量    | `String,Number` | `0`     |
| maxHeight        | 弹出层的最大高度，请自带单位 | `String`        | -       |

## Props Button 参数

| 参数      | 描述          | 类型       | 默认值 |
| ------- | ----------- | -------- | --- |
| text    | 按钮里的文字      | `String` | -   |
| variant | 按钮的样式类型     | `String` | -   |
| width   | 按钮的宽度，需自带单位 | `String` | -   |
| height  | 按钮的高度，需自带单位 | `String` | -   |

## 事件

| 事件名    | 描述     | 回调参数 |
| ------ | ------ | ---- |
| close  | 关闭弹窗   | -    |
| submit | 点击按钮触发 | -    |

## Slots

| 名称     | 描述                                           |
| ------ | -------------------------------------------- |
| header | 自定义弹窗的头部，若传入了`title`或`closabled`为`true`，则不生效 |
| body   | 自定义弹窗的内容区域                                   |
| footer | 自定义弹窗的底部内容                                   |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |