Skip to content

ElementPlus 反馈组件

ElementPlus 反馈组件

简介

在软件开发中，反馈组件主要用于提供用户交互的反馈和提示信息，以增强用户体验和提供操作指引。

反馈组件设计原则

在反馈组件的设计过程中，我们也许会一味的积极的去反馈用户的操作，然而反馈过多也许会起反作用，相反的，反馈过少，用户对于操作效果的感知也会降低。所以在反馈组件设计过程中，一般会遵循以下三个原则：

  • 在各个阶段提供必要、积极、及时的反馈。
  • 避免过度反馈，以免给用户带来不必要的打扰。
  • 用户及能够时看到效果的、简单的操作，可以省略反馈提示。

Message 消息提示

Message（消息提示）是 Element Plus 中的一个重要组件，用于在页面中以非阻塞的方式向用户显示一些短暂的提示信息或操作结果反馈。

Message 组件通过 ElMessage 函数调用动态显示，无需事先在页面中放入组件，这样能更灵活也更方便。

实现的基本思路是使用函数动态渲染组件到页面上。

ElMessage 函数可以接收一个字符串或一个对象参数，确定提示信息的内容和形式。

基本使用

传入字符串信息做为提示内容。

<template>
    <el-button @click="open">Show message</el-button>
</template>

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

    const open = () => {
        ElMessage('this is a message.')
    }
</script>

定制信息

通过传入一个对象，可以定制提示信息的显示内容及形式。

不同显示状态
<template>
    <el-button type="info" @click="open1">message</el-button>
    <el-button type="success" @click="open2">success</el-button>
    <el-button type="warning" @click="open3">warning</el-button>
    <el-button type="danger" @click="open4">error</el-button>
</template>

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

    const open1 = () => {
        // 默认样式
        ElMessage('this is a message.')
    }
    const open2 = () => {
        ElMessage({
            // 成功样式
            message: 'Congrats, this is a success message.',
            type: 'success',
        })
    }
    const open3 = () => {
        ElMessage({
            // 警告样式
            message: 'Warning, this is a warning message.',
            type: 'warning',
        })
    }
    const open4 = () => {
        // 错误样式，使用 ElMessage.error 函数弹出
        ElMessage.error('Oops, this is a error message.')
    }
</script>
可关闭的消息提示

消息提示拥有可控的 duration， 默认的关闭时间为 3000 毫秒，消息提示会在弹出提示三秒后自动关闭，当把这个属性的值设置为 0 便表示该消息不会被自动关闭。

可以通过将 showClose 设置为 true 进行手动关闭。

<template>
    <el-button type="success" @click="open1">默认样式，3秒关闭</el-button>
    <el-button type="success" @click="open2">关闭时间设置为0，持续显示</el-button>
    <el-button type="success" @click="open3">关闭时间设置为5秒，可手动关闭</el-button>
</template>

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

    const open1 = () => {
        // 默认样式
        ElMessage('默认样式，3秒关闭')
    }
    const open2 = () => {
        ElMessage({
            // 成功样式
            message: '关闭时间设置为0，持续显示',
            type: 'success',
            duration: 0
        })
    }
    const open3 = () => {
        ElMessage({
            // 警告样式
            message: '关闭时间设置为5秒，可手动关闭',
            type: 'warning',
            duration:5000,
            showClose:true
        })
    }
</script>

API

组件属性及事件可查看官方文档。

MessageBox 消息弹框

消息弹框是 Element Plus 中的一套模态对话框组件，它模拟了系统常见的消息提示框（如alert、confirm、prompt）的功能，提供了一个美观的界面以及丰富的交互效果。

从设计上来说，消息弹框的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。

如果需要弹出较为复杂的内容，请使用 Dialog 组件。

消息提示

用于向用户显示一些临时性的信息，比如操作成功或者需要用户确认的提示信息。

当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

调用 ElMessageBox.alert 方法打开 alert 框。 它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。

ElMessageBox.alert 方法接收三个参数，message 、 title 和 options 对象，返回一个 promise对象 以便进行后续操作。

<template>
    <el-button type="success" @click="open">Click to open the Message Box</el-button>
</template>

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

const open = () => {
    ElMessageBox.alert('This is a message', 'Title', {
        confirmButtonText: 'OK',
        // action 用来接收操作后的结果
        callback: (action) => {
            ElMessage({
                type: 'info',
                message: `action: ${action}`,
            })
        },
    })
}
</script>

确认消息

用于获取用户的确认或者取消操作，通常会在用户执行一些敏感操作前进行询问是否进行此操作时会用到此对话框。

调用 ElMessageBox.confirm 方法以打开 confirm 框。它模拟了系统的 confirm。

该方法接收三个参数，message 、 title 和 options 对象，返回一个 promise对象 以便进行后续操作。

<template>
    <el-button type="success" @click="open">Click to open the Message Box</el-button>
</template>

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

    const open = () => {
        ElMessageBox.confirm(
            'proxy will permanently delete the file. Continue?',
            'Warning',
            {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning',
            }
        )
        .then(() => {
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
    }
</script>

提交内容

当需要用户输入内容时，可以使用 Prompt 类型的消息框，用于需要用户输入特定信息的场景，例如提交表单或者输入密码等。。

调用 ElMessageBox.prompt 方法以打开 prompt 框，它模拟了系统的 prompt。

该方法接收三个参数，message 、 title 和 options 对象，返回一个 promise对象 以便进行后续操作。

<template>
    <el-button type="success" @click="open">Click to open Message Box</el-button>
</template>

<script lang="ts" setup>
    import { ElMessage, ElMessageBox } from 'element-plus'

    const open = () => {
        ElMessageBox.prompt('Please input your e-mail', 'Tip', {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            inputPattern:
                /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
            inputErrorMessage: 'Invalid Email',
        })
        .then(({ value }) => {
            ElMessage({
                type: 'success',
                message: `Your email is:${value}`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Input canceled',
            })
        })
    }
</script>

API

组件属性及事件可查看官方文档。

Dialog 对话框

Dialog 是一个非常实用的交互组件，它为开发者提供了弹出窗口的功能，并允许用户在对话框中执行相关的操作

通过 Dialog，可以实现更丰富的交互体验，提升用户的操作便捷性。

基本用法

需要设置 model-value / v-model 属性，控制对话框是否显示，参数接收 Boolean类型值，当为 true 时显示 Dialog。

Dialog 分为两个部分：body 和 footer，body 中显示对话框显示内容，footer 需要具名为 footer 的插槽。

title 属性用于定义标题，它是可选的，默认值为空。

before-close 事件可以定制关闭按钮的操作。

<template>
    <el-button type="success" @click="dialogVisible = true">
        click to open the Dialog
    </el-button>

    <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
        <span>This is a message</span>
        <!-- 使用插槽定制功能按钮，如不需要可不定义 -->
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

// 关闭按钮的处理方法
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
</script>

自定义内容

对话框的内容可以是任何东西，甚至是一个表格或表单。

<template>
    <el-button type="success" @click="dialogFormVisible = true">
        open a Form nested Dialog
    </el-button>

    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="30%">
        <el-form :model="form">
            <el-form-item label="Promotion name" label-width="140px">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="Zones" label-width="140px">
                <el-select v-model="form.region" placeholder="Please select a zone">
                    <el-option label="Zone No.1" value="shanghai" />
                    <el-option label="Zone No.2" value="beijing" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

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

const dialogFormVisible = ref(false)

const form = ref({
    name: '',
    region: ''
})

</script>

API

组件属性及事件可查看官方文档。

总结

  • Message 组件用来展示简单的提示信息。
  • MessageBox 组件用来以弹框形式展示提示信息。
  • Dialog 组件用来以模态框形式展示信息或收集数据。