# fade 淡入淡出

> fade是一个淡入淡出组件，支持normal，slow，fast及自定义过渡时间

## 使用方法

```
<!--引入组件-->
<import name="qui-dialog" src="../../components/qui-dialog/index"></import>
<import name="qui-toast" src="../../components/qui-toast/index"></import>

<template>
  <div class="page">
    <input type="button" value="常规对话框" @click="normal">
    <input type="button" value="无标题的对话框" @click="noTitle">
    <input type="button" value="只有确定按钮的对话框" @click="noCancel">
    <input type="button" value="无按钮的对话框" @click="noBtn">
    <qui-dialog option="{{dialog}}" @qui-btn-click="btnClick">
      <!--自定义正文内容-->
      <text>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</text>
    </qui-dialog>
    <qui-toast id="qui-toast"></qui-toast>
  </div>
</template>

<style>
  .page {
    flex-direction: column;
    align-items: center;
  }

  input {
    margin: 50px;
    padding: 20px;
    width: 450px;
    color: #fff;
    background-color: #535088;
  }

  text {
    color: #666666;
    font-size: 45px;
    line-height: 60px;
  }
</style>

<script>
  export default {
    private: {
      option: {
        show: true,
        title: '对话框',
        btns: [{
          text: '确定',
          color: '#0090ff'
        }, {
          text: '取消',
          color: '#999999'
        }]
      },
      dialog: {}
    },
    onReady() {
      this.toast = this.$child('qui-toast')
    },
    onBackPress() {
      if (this.dialog.show) {
        //要延迟才有过渡动画
        setTimeout(() => {
          this.dialog.show = false
        })

        return true
      }
    },
    normal() {
      this.dialog = Object.assign({}, this.option)
    },
    noTitle() {
      this.dialog = Object.assign({}, this.option, {
        title: ''
      })
    },
    noCancel() {
      this.dialog = Object.assign({}, this.option, {
        autoClose: true,
        btns: [{
          text: '确定'
        }]
      })
    },
    noBtn() {
      this.dialog = Object.assign({}, this.option, {
        autoClose: true,
        btns: []
      })
    },
    btnClick(evt) {
      this.toast.show({
        text: `点击的第${evt.detail.index + 1}个按钮`
      })

      switch (evt.detail.index) {
        case 1:
          this.dialog.show = false
      }
    }
  }
</script>
```

更详细代码可以参考[qui-dialog demo](http://www.baidu.com)

## 属性

名称|类型|必填|默认值|描述
:-:|:-:|:-:|:-:|:-:
duration|`Number`|N|false|显示或隐藏对话框


## 事件

名称|参数|描述
:-:|:-:|:-:
qui-overlay-click|-|点击蒙层时触发
qui-btn-click|{index}|点击按钮时触发，index表示第几个按钮，从0开始，在事件处理函数中通过event.detail.index获取