Vue3初学之Element Plus Dialog对话框，Message组件,MessageBox组件

1. Dialog的使用：
   控制弹窗的显示和隐藏

<template>
  <div>
    <el-button @click="dialogVisible = true">打开弹窗</el-button>
    <el-dialog
      v-model="dialogVisible"
      title="提示"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(false);

const handleClose = (done) => {
  dialogVisible.value = false;
};
</script>

增加内容尾部


弹窗打开时仍然可以与背景页面交互，可以设置 modal 属性为 false

2.Message组件
ElMessage 组件可以实现全局消息提示功能

 <template>
  <el-button @click="openSuccess">成功消息</el-button>
  <el-button @click="openWarning">警告消息</el-button>
  <el-button @click="openInfo">普通消息</el-button>
  <el-button @click="openError">错误消息</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus';
const openSuccess = () => {
  ElMessage.success('这是一条成功消息');
};
const openWarning = () => {
  ElMessage.warning('这是一条警告消息');
};
const openInfo = () => {
  ElMessage('这是一条普通消息');
};
const openError = () => {
  ElMessage.error('这是一条错误消息');
};
</script>

通过设置 dangerouslyUseHTMLString 属性为 true，可以将消息内容作为 HTML 片段处理

全局方法
如果 Element Plus 是全局引入的，ElMessage 会自动挂载到app.config.globalProperties，可以在 Vue 实例中直接使用

3. MesageBox组件
使用 confirm 显示确认框

<template>
  <el-button @click="openConfirm">打开 Confirm</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';

const openConfirm = () => {
  ElMessageBox.confirm('此操作将永久删除该文件，是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      console.log('确认');
    })
    .catch(() => {
      console.log('取消');
    });
};
</script>

使用 prompt 显示输入框

<template>
  <el-button @click="openPrompt">打开 Prompt</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';

const openPrompt = () => {
  ElMessageBox.prompt('请输入你的邮箱', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(({ value }) => {
      console.log('用户输入的邮箱:', value);
    })
    .catch(() => {
      console.log('取消输入');
    });
};
</script>

全局方法
如果 Element Plus 是全局引入的，ElMessageBox 的方法会自动挂载到 app.config.globalProperties，可以在 Vue 实例中直接使用

this.$alert('这是一段内容', '标题');
this.$confirm('此操作将永久删除该文件，是否继续?', '提示');
this.$prompt('请输入你的邮箱', '提示');