【区分vue2和vue3下的element UI Result 结果组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 中,Element UI 并没有直接提供名为 Result 的组件。但是,在 Vue 3 的 Element Plus 中,Result 组件是用来展示操作结果或状态信息的。

以下是 Element Plus 中 Result 组件的详细介绍,以及如何在 Vue 3 中使用它。由于 Vue 2 没有该组件,我将只介绍 Vue 3 下的使用。

Vue 3 + Element Plus 中的 Result 组件

属性 (Attributes)
  • title: 标题文本,可选。
  • subTitle: 副标题文本,可选。
  • icon: 图标名称或图片 URL,可选。
  • iconClass: 图标类名,可选,当使用自定义图标时使用。
  • status: 结果状态,可选值有 'success', 'error', 'warning', 'info',不同状态会有不同的默认图标和颜色。
  • extra: 额外的内容,通常是一个按钮或者链接,可选。
插槽 (Slots)
  • default: 默认插槽,用于插入自定义内容。
事件 (Events)

Element Plus 的 Result 组件通常不直接触发事件,因为它主要用于展示信息,而不是与用户交互。但是,你可以在其 extra 插槽中添加按钮或其他可交互组件,并为这些组件添加事件监听器。

方法 (Methods)

Result 组件不直接提供方法,因为它是一个静态的展示组件。但是,你可以通过 Vue 的响应式数据来动态控制其内容。

示例
vue 复制代码
<template>
  <el-result
    :title="title"
    :subTitle="subTitle"
    :status="status"
    icon="el-icon-success"
  >
    <template #extra>
      <el-button type="primary" @click="handleAction">返回首页</el-button>
    </template>
  </el-result>
</template>

<script>
import { ref } from 'vue';
import { ElResult, ElButton } from 'element-plus';

export default {
  components: {
    ElResult,
    ElButton
  },
  setup() {
    const title = ref('操作成功');
    const subTitle = ref('请求已经发送成功');
    const status = ref('success');

    const handleAction = () => {
      // 处理点击事件,比如跳转到首页
      console.log('点击了返回首页按钮');
    };

    return {
      title,
      subTitle,
      status,
      handleAction
    };
  }
};
</script>

在这个示例中,我们使用了 Vue 3 的 Composition API (setup 函数) 来定义响应式数据和方法。我们为 Result 组件提供了 titlesubTitlestatusicon 属性,并在 extra 插槽中添加了一个 el-button 组件,为其添加了点击事件监听器 handleAction。当用户点击按钮时,控制台将输出一条消息。

相关推荐
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^4 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴7 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中7 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
Quz7 小时前
使用Qt Quick Controls创建自定义日历组件
qt·ui·交互
清风细雨_林木木7 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ8 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js