053_Result结果
1. Result結(jié)果
1.1. Result結(jié)果用于對(duì)用戶(hù)的操作結(jié)果或者異常狀態(tài)做反饋。
1.2. Result Attributes
| 參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
| title | 標(biāo)題 | string | 無(wú) | 無(wú) |
| sub-title | 二級(jí)標(biāo)題 | string | 無(wú) | 無(wú) |
| icon | 圖標(biāo)類(lèi)型 | string | success / warning / info / error | info |
1.3.Result Slots
| name | 說(shuō)明 |
| icon | 自定義圖標(biāo) |
| title | 自定義標(biāo)題 |
| subTitle | 自定義二級(jí)標(biāo)題 |
| extra | 自定義底部額外區(qū)域 |
2. Result結(jié)果例子
2.1. 使用腳手架新建一個(gè)名為element-ui-result折疊面板的前端項(xiàng)目, 同時(shí)安裝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 router2.3. 在components下創(chuàng)建Result.vue
<template><div><h1>基礎(chǔ)用法</h1><el-row><el-col :span="6"><el-result icon="success" title="成功提示" subTitle="請(qǐng)根據(jù)提示進(jìn)行操作"></el-result></el-col><el-col :span="6"><el-result icon="warning" title="警告提示" subTitle="請(qǐng)根據(jù)提示進(jìn)行操作"></el-result></el-col><el-col :span="6"><el-result icon="error" title="錯(cuò)誤提示" subTitle="請(qǐng)根據(jù)提示進(jìn)行操作"></el-result></el-col><el-col :span="6"><el-result icon="info" title="信息提示" subTitle="請(qǐng)根據(jù)提示進(jìn)行操作"></el-result></el-col></el-row></div> </template>2.4. 在components下創(chuàng)建SlotsResult.vue
<template><div><h1>自定義內(nèi)容</h1><el-result title="404" subTitle="抱歉, 請(qǐng)求錯(cuò)誤"><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. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/Result
2.6. 運(yùn)行項(xiàng)目, 訪問(wèn)http://localhost:8080/#/SlotsResult?
?
總結(jié)
以上是生活随笔為你收集整理的053_Result结果的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 052_Drawer抽屉
- 下一篇: 054_Empty空状态