Modal 模态框

简单模态框，对 el-dialog 进行了二次封装，提供了一些扩展功能。

基本用法

点击查看代码

<template>
  <div>
    <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

    <s-modal :visible.sync="modalVisible" title="基本模态框" @ok="done => done()">
      <div>基本模态框</div>
    </s-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalVisible: false
      };
    }
  }
</script>

模态框宽高

点击查看代码

<template>
  <div>
    <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

    <s-modal :visible.sync="modalVisible" title="指定宽高" width="600px" height="450px" @ok="done => done()">
      <div>指定模态框宽高</div>
    </s-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalVisible: false
      };
    }
  }
</script>

加载中状态

点击查看代码

<template>
  <div>
    <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

    <s-modal :visible.sync="modalVisible" title="加载中状态" height="500px" :loading="modalLoading" @open="handleOpen" @ok="done => done()">
      <div>模态框加载中状态</div>
    </s-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalVisible: false,
        modalLoading: false
      };
    },
    methods: {
      handleOpen() {
        this.modalLoading = true;
        setTimeout(() => {
          this.modalLoading = false;
        }, 1500);
      }
    }
  }
</script>

隐藏操作栏

点击查看代码

<template>
  <div>
    <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

    <s-modal :visible.sync="modalVisible" title="隐藏操作栏" height="450px" :footer="false" @ok="done => done()">
      <div>隐藏模态框操作栏</div>
    </s-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalVisible: false
      };
    }
  }
</script>

自定义操作栏

点击查看代码

<template>
  <div>
    <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

    <s-modal :visible.sync="modalVisible" title="自定义操作栏" @ok="done => done()">
      <div>自定义模态框操作栏</div>

      <template #footer>
        <el-button type="primary" @click="modalVisible = false">自定义按钮</el-button>
      </template>
    </s-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalVisible: false
      };
    }
  }
</script>

自定义按钮文本

点击查看代码

<template>
  <div>
    <el-button type="primary" @click="modalVisible = true">点击打开模态框</el-button>

    <s-modal :visible.sync="modalVisible" title="自定义按钮文本" cancelText="关 闭" okText="保 存" @ok="done => done()">
      <div>自定义模态框操作按钮文本</div>
    </s-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalVisible: false
      };
    }
  }
</script>

嵌套模态框

点击查看代码

<template>
  <div>
    <el-button type="primary" @click="outerModalVisible = true">点击打开模态框</el-button>

    <s-modal :visible.sync="outerModalVisible" title="外部模态框" @ok="done => done()">
      <div style="margin-bottom: 1rem;">外部模态框</div>
      <el-button type="primary" @click="innerModalVisible = true">打开内部模态框</el-button>

      <s-modal :visible.sync="innerModalVisible" title="内部模态框" @ok="done => done()">
        <div>内部模态框</div>
      </s-modal>
    </s-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        outerModalVisible: false,
        innerModalVisible: false
      };
    }
  }
</script>

Props

Slots

Emits