elementui模态框如何使用

ElementUI提供了一个el-dialog组件来实现模态框的功能。使用el-dialog组件可以轻松地创建一个模态框，并且可以自定义模态框的标题、内容、大小、位置等属性。以下是使用el-dialog组件创建模态框的步骤：

1. 在Vue组件中引入el-dialog组件。

2. 在模板中使用el-dialog组件，并设置相应的属性，例如：visible、title、width、modal等。

3. 在Vue组件中定义相应的方法，例如：打开模态框、关闭模态框等。

4. 在模板中绑定相应的事件，例如：点击按钮打开模态框、点击关闭按钮关闭模态框等。

下面是一个简单的例子，演示如何使用el-dialog组件创建模态框：

<template>
  <div>
    <el-button @click="showDialog">打开模态框</el-button>
    <el-dialog :visible.sync="dialogVisible" title="模态框标题" width="30%" :modal-append-to-body="false">
      <p>模态框内容</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

在上面的例子中，el-button组件绑定了一个点击事件，当点击按钮时，会调用showDialog方法，该方法会将dialogVisible属性设置为true，从而打开模态框。el-dialog组件绑定了一个visible属性，该属性与dialogVisible属性双向绑定，当dialogVisible属性改变时，模态框的显示状态也会相应地改变。el-dialog组件还设置了一些其他属性，例如：title、width、modal等，用于自定义模态框的样式和行为。在模态框中，可以添加任意的HTML内容，例如：文本、图片、表单等。在模态框的底部，可以添加一个或多个按钮，用于关闭模态框或执行其他操作。