weex-ui-demo/packages/i-alert/README.md

A rich interaction, lightweight, high performance UI library based on Weex

# i-alert 

> Weex 二次确认弹窗组件，可以设置标题、内容、按钮定制等

### 规则
- 尽可能少用，Dialog 会打断用户操作，只用在重要的时候
- 标题不要超过一行，按钮最多两个
- 取消按钮在左侧，确定按钮在右侧
 

## [Demo](https://h5.m.taobao.com/trip/wxc-dialog/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwxc-dialog%2Fdemo%2Findex.native-min.js)
<img src="https://gw.alipayobjects.com/zos/rmsportal/qastXqTFLQMoCDjYoeRc.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1Oa09SpXXXXbiXVXXXXXXXXXX-200-200.png" width="160"/>

## 使用方法

```vue
<template>
  <div class="container">
    <div class="demo">
      <div class="btn" @click="openDialog">
        <text class="btn-txt">对话消息Dialog</text>
      </div>
    </div>
    <i-alert title="标题"
      content="这里是内容"
      :show="show"
      :buttons='buttons'
      @btnClick="btnClicked">
    </i-alert>
  </div>
</template>

<script>
  import { iDialog } from 'weex-ui';
  export default {
    components: { iDialog },
    data: function () {
      return {
        show: false,
        buttons:[{'text':'确定',type: 'default' }]
      };
    },
    methods: {
      openDialog () {
        this.show = true;
      },
      btnClicked (e) {
        if(e.txt==='确定'){
          this.show = false;
        }
      }
    }
  };
</script>

```

更详细代码可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/dialog/index.vue)

### 可配置参数

| Prop | Type | Required | Default | Description |
|-------------|------------|--------|-----|-----|
| title | `String` | `Y` | `-` | 标题 |
| content | `String` | `N` | `-`| 内容说明描述 |
| buttons | `Arrary` | `Y` |`[{'text':'确定'，type:'default'}]` |  按钮文案定制 |
| show | `Boolean` | `Y` |`true` |  是否展示 |
| opacity | `String` | `N` |`0~1` |  背景透明度 |
| contentStyle | `Object` | `N` |`{'color':'red'}` |  内容说明样式 |
| styleEx | `Object` | `N` |`{'color':'red'}` |  外层样式 |
| height | `String` |`N` | `200px` |  内容说明高度 |


### 事件回调

```
@btnClick  按钮点击事件、
@close 蒙层点击事件、
```

### slot卡槽
1. `<slot name="header"></slot>`：头部卡槽
2. `<slot name="footer"></slot>`：底部卡槽
3. `<slot></slot>`：卡槽