# Modal 对话框

<template>
  <w-button @click="visible = !visible">点击打开Modal</w-button>
  <w-modal  :visible.sync="visible"
            :before-close-modal="handleCloseModal"
    :title="title"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <w-button @click="visible = false">取 消</w-button>
      <w-button type="primary" @click="visible = false">确 定</w-button>
    </span>
  </w-modal>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
      }
    },
    methods: {
      handleCloseModal(done) {
        this.$Confirm('确认关闭Modal？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }
</script>

<template>
  <w-button @click="visible = !visible">彩色样式的Modal</w-button>
  <w-modal  :visible.sync="visible"
    color
    :title="title"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
    <w-button @click="visible = false">取 消</w-button>
    <w-button type="primary" @click="visible = false">确 定</w-button>
    </span>
  </w-modal>
</template>

<template>
  <w-button @click="visible = !visible">点击打开 Modal</w-button>
  <w-modal  :visible.sync="visible"
    :title="title"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <w-button :icon="loadingIcon" @click="showModal()">取 消</w-button>
      <w-button type="primary" :icon="loadingIcon" @click="showModal()">确 定</w-button>
    </span>
  </w-modal>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      isIcon: '',
      title:'异步关闭',
      showClose: false
     }
    },
  computed:{
    loadingIcon:function(){
      return this.isIcon ? 'w-icon-loading' : ''
    }
  },
  methods: {
    showModal (val) {
      this.isIcon = true
      let _this= this
      setTimeout(function()  {
        _this.visible = false
        _this.isIcon = false
      }, 1500)
    }
  }
}
</script>

<template>
  <w-button @click="visible = !visible">打开嵌套树的Modal</w-button>
  <w-modal :visible.sync="visible"
    :title="title"
    width="30%">
    <w-tree :data="data" :props="defaultProps"></w-tree>
    <span slot="footer" class="dialog-footer">
      <w-button @click="visible = false">取 消</w-button>
      <w-button type="primary" @click="visible = false">确 定</w-button>
    </span>
  </w-modal>
</template>
<script>
  export default {
    data () {
      return {
         data: [
          {
            label: '一级 1',
            children: [{
              label: '二级 1-1',
              children: [{
                label: '三级 1-1-1'
              }]
            }]
          }, {
            label: '一级 2',
            children: [{
              label: '二级 2-1',
              children: [{
                label: '三级 2-1-1'
              }]
            }, {
              label: '二级 2-2',
              children: [{
                label: '三级 2-2-1'
              }]
            }]
          }, {
            label: '一级 3',
            children: [{
              label: '二级 3-1',
              children: [{
                label: '三级 3-1-1'
              }]
            }, {
              label: '二级 3-2',
              children: [{
                label: '三级 3-2-1'
              }]
            }]
          }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    }
    }
</script>

<template>
  <section class="pagination-demo">
      description="正常情况下，我们不建议使用嵌套的 Modal，如果需要在页面上同时显示多个 Modal，可以将它们平级放置。对于确实需要嵌套 Modal 的场景，我们提供了append-to-body属性。将内层 Modal 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Modal 和遮罩层级关系的正确。">
      <w-button type='text'
                @click="outerVisible = true">点击打开外层 Modal</w-button>
      <w-modal  :visible.sync="outerVisible"
                width="60%"
                color
                title="外层 Modal"
                >
        <w-modal
          width="30%"
          title="内层 Modal"
          :visible.sync="innerVisible"
          append-to-body>
        </w-modal>
        <span slot="footer" class="dialog-footer">
            <w-button @click="outerVisible = false">取 消</w-button>
            <w-button style="margin-left: 15px;" type="primary" @click="innerVisible = true">点击打开内层 Modal</w-button>
          </span>
      </w-modal>
  </section>
</template>

<template>
  <w-button @click="visible = !visible">点击打开Modal</w-button>
  <w-modal  :visible.sync="visible"
    center
    :title="title"
    width="30%">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <w-button @click="visible = false">取 消</w-button>
      <w-button type="primary" @click="visible = false">确 定</w-button>
    </span>
  </w-modal>
</template>