PageResult 反馈结果
优质
小牛编辑
136浏览
2023-12-01
使用指南
组件介绍
可自定义图标、颜色、标题、内容、按钮等。
引入方式
import { PageResult, FeIcon } from 'feart';
components:{
FeIcon,
'fe-page-result':PageResult,
}
代码演示
默认
<fe-page-result :btnList="btnList"></fe-page-result>
失败
<fe-page-result type="error" :btnList="btnList"> </fe-page-result>
Icon 组件内图标
<fe-page-result icon="success" title="Icon组件内图标" :btnList="btnList"></fe-page-result>
自定义图标
<fe-page-result color="#F4333C" title="自定义图标" :btnList="btnList">
<FeIcon name="lwarning" color="#ff976a" size="65px" />
</fe-page-result>
自定义内容
<fe-page-result
title="我是标题"
description="黎明的那道光 会越过黑暗 打破一切恐惧我能
找到答案 哪怕要逆着光 就驱散黑暗 丢弃所有的负担 不再孤单 不再孤单"
:btnList="btnList"
>
</fe-page-result>
export default {
data() {
return {
btnList: [
{ label: '主要操作', type: 'primary', plain: false, action: this.mainOperate },
{ label: '辅助操作', type: 'primary', plain: true, action: this.assistOperate },
],
};
},
methods: {
mainOperate(v) {
console.log('主要操作');
},
assistOperate(v) {
console.log('辅助操作');
},
},
// ...
};
API
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
type | 反馈类型 | String | success | error |
icon | 反馈图标(当 type 指定为 success 或 error 时无效) | String | selected | 详见Icon 组件 |
title | 反馈标题(当 type 指定为 success 或 error 时无效) | String | 反馈成功 | - |
description | 反馈内容 | String | - | - |
color | 反馈图标颜色(当 type 指定为 success 或 error 时无效) | String | #108EE9 | - |
btnList | 操作按钮,label 为按钮文字,type 为按钮类型(同 Bttton 组件),action 为按钮点击事件,this.XXX 为调用 methods 函数 | Array | [{label: '主要操作', type: 'primary', plain: false, action: this.mainOperate},{label: '辅助操作', type: 'primary', plain: true, action: this.assistOperate}] | - |
Events
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
mainOperate | 主要操作 | (value) => void; | - | - |
assistOperate | 辅助操作 | (value) => void; | - | - |