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

2.6. 運行項目, 訪問http://localhost:8080/#/SlotsResult?

?

總結

以上是生活随笔為你收集整理的053_Result结果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。