Modal 对话框

一、概述

定义

用于提示用户当前操作，或是完成某个任务时需要的一些其他额外的信息。对话框用确定/取消的简单的应答模式。

使用场景

• 用户在进行重要操作的时候，需要进行二次确认

• 用于重要的反馈提示，告知用户提示

类型

• 提示类

• 二次确认类

• 自定义类

二、提示类

消息提示类对话框，用于告知用户当前情况。

交互说明

1.对话框居中展示。用户点击取消或者叉号对话框消失

2.用户对警示框进行操作后，才能对其他界面进行操作。强阻断类型。

<template>
  <se-button @click="visible = !visible">打开对话框</se-button>
  <se-modal title="提示标题" :visible.sync="visible" mask :mask-closable="false" @close="handler">
    <span>提示内容，告知状态、信息和解决方法描述尽量控制在两行内</span>
    <template v-slot:footer>
      <se-button type="primary" @click="handler2">
        确定
      </se-button>
    </template>
  </se-modal>
</template>
<script>
  export default {
    data() {
      return {
        visible: false
      }
    },
    methods: {
      handler() {
        console.log('close modal')
      },
      handler2() {
        this.visible = false
        console.log('confirm')
      }
    }
  }
</script>

三、二次确认类

用户对于操作的二次确认。

交互说明

1.用户点击操作出现二次确认对话框

2.强阻断类型，用户需要对弹窗进行操作后，才能进行其他界面操作。

<template>
  <se-button @click="visible1 = !visible1">打开对话框</se-button>
  <se-modal title="提示标题" :visible.sync="visible1">
    <span>提示内容，告知状态、信息和解决方法描述尽量控制在两行内</span>
    <template v-slot:footer>
      <a class="operation-button" @click="visible1 = false">操作</a>
      <span>
        <se-button @click="visible1 = false">取消</se-button>
        <se-button type="primary" @click="firstConfirmHandle">确定</se-button>
      </span>
    </template>
  </se-modal>
  <se-modal :visible.sync="visible2">
    <span>确认取消吗？</span>
    <template v-slot:footer>
      <span>
        <se-button @click="backHandle">返回</se-button>
        <se-button type="primary" @click="confirmHandle">确定取消</se-button>
      </span>
    </template>
  </se-modal>
</template>
<script>
  export default {
    data() {
      return {
        visible1: false,
        visible2: false
      }
    },
    methods: {
      firstConfirmHandle() {
        this.visible1 = false
        this.visible2 = true
      },
      backHandle() {
        this.visible1 = true
        this.visible2 = false
      },
      confirmHandle() {
        this.visible1 = false
        this.visible2 = false
      }
    }
  }
</script>
<style lang="scss">
  .operation-button {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #01d567;
    font-size: 14px;
    line-height: 34px;
    &:hover {
      cursor: pointer;
    }
  }
</style>

四、自定义

可在对话框中自定义内容。

交互说明

1.最高高度为 480px

2.超过最高高度出现滚动条

<template>
  <se-button @click="visible = !visible">打开对话框</se-button>
  <se-modal title="选择内容" customize :visible.sync="visible" :maskClosable="false">
    <div>
      <se-checkbox-group :value="selected" name="fruit" @change="handleChange">
        <se-checkbox
          v-for="(item, i) in 50"
          :key="i"
          :value="String(item)"
          :disabled="item.disabled"
        >
          多选项{{item}}
        </se-checkbox>
      </se-checkbox-group>
    </div>
    <template v-slot:footer>
      <span>
        <se-button @click="visible = false">取消</se-button>
        <se-button type="primary" @click="visible = false">确定</se-button>
      </span>
    </template>
  </se-modal>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
        selected: ['1', '2', '3']
      }
    },
    methods: {
      handleChange(e) {
        this.selected = e.detail.value
      }
    }
  }
</script>
<style>
  .se-checkbox-group {
    display: flex;
    flex-direction: column;
    padding: 14px 0;
  }
  .se-checkbox {
    margin-bottom: 30px;
  }
  .se-checkbox:last-child {
    margin-bottom: 0;
  }
</style>

Modal Props

Modal Events

五、$showModal

可以通过调用 this.$showModal(options) 快捷打开一个对话框。

options 参数

success 方法回调