[JavaScript知识库] 053

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 053_Result结果 -> 正文阅读

[JavaScript知识库]053_Result结果

1. Result结果

1.1. Result结果用于对用户的操作结果或者异常状态做反馈。

1.2. Result Attributes

参数	说明	类型	可选值	默认值
title	标题	string	无	无
sub-title	二级标题	string	无	无
icon	图标类型	string	success / warning / info / error	info

1.3.Result Slots

name	说明
icon	自定义图标
title	自定义标题
subTitle	自定义二级标题
extra	自定义底部额外区域

2. Result结果例子

2.1. 使用脚手架新建一个名为element-ui-result折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js?

import Vue from 'vue'
import VueRouter from 'vue-router'
import Result from '../components/Result.vue'
import SlotsResult from '../components/SlotsResult.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Result' },
  { path: '/Result', component: Result },
  { path: '/SlotsResult', component: SlotsResult }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Result.vue

<template>
  <div>
    <h1>基础用法</h1>
    <el-row>
      <el-col :span="6">
        <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作"></el-result>
      </el-col>
      <el-col :span="6">
        <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作"></el-result>
      </el-col>
      <el-col :span="6">
        <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作"></el-result>
      </el-col>
      <el-col :span="6">
        <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作"></el-result>
      </el-col>
    </el-row>
  </div>
</template>

2.4. 在components下创建SlotsResult.vue

<template>
  <div>
    <h1>自定义内容</h1>
    <el-result title="404" subTitle="抱歉, 请求错误">
      <template slot="icon">
        <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
      </template>
      <template slot="extra">
        <el-button type="primary" size="medium">返回</el-button>
      </template>
    </el-result>
  </div>
</template>

2.5. 运行项目, 访问http://localhost:8080/#/Result