Vue中使用element-ui的el-dialog对话框

要在Vue中使用element-ui的el-dialog对话框，你需要先安装element-ui，可以使用npm或者yarn进行安装。

1. 通过npm安装

npm install element-ui --save

2. 通过yarn安装

yarn add element-ui

安装完成后，在Vue项目中引入element-ui，并注册el-dialog组件。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

现在你可以在Vue组件中使用el-dialog组件了。下面是一个简单的示例：

<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible">
      <span>这是一个对话框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

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

在这个示例中，我们使用了el-button组件来触发打开对话框的事件，然后在el-dialog组件中定义了对话框的标题和内容，并使用visible.sync来控制对话框的显示和隐藏。在底部我们使用了el-button组件来定义对话框的按钮区域。

这是一个简单的例子，你可以根据自己的需求来定制对话框的样式和交互。