Vue 组件封装之 Result 结果页
提交或者操作完成之后,进入一个成功或者失败的结果页。
·
Vue 组件封装之 Result 结果页
一、Result 结果页
组件说明:
实现 Result 结果页。
效果展示:
实现的功能:
- 提交或者操作完成之后,进入一个成功或者失败的结果页。
- 包含成功或者失败的状态插图。
- 包含成功或者失败的文案表述(标题及详情)。
- 包含取消(推出应用)和确定(继续填写)两个按钮。
二、使用案例
<template>
<div>
<el-result
:item="item"
@on-cancel="cancel"
@on-submit="submit"
/>
</div>
</template>
<script>
export default {
name: "Result",
data(){
return{
item: {
title: '提交成功',
submitText:"继续填写",
cancelText:"退出应用",
status:"success"
},
}
},
created(){
let item = this.$route && this.$route.query;
if(item.status==='fail'){
this.item = {
title: '提交失败,请联系开发人员',
submitText:"重新填写",
cancelText:"退出应用",
status:"fail"
}
}
},
methods:{
cancel(){
dd.biz.navigation.close({
onSuccess : function(result) {
/*result结构
{}
*/
},
onFail : function(err) {}
})
},
submit(){
this.$router.go(-1)
}
}
}
</script>
三、API 使用指南
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
item | 页面展示的静态内容集合 | Array | [] |
title | 描述标题 | String | – |
submitText | 提交按钮文本 | String | – |
cancelText | 取消按钮文本 | String | – |
status | 输入值字段 | String | – |
on-cancel | 取消按钮事件 | Function | – |
on-submit | 提交按钮事件 | Function | – |
四、源代码
Result.vue
文件路径:share/result/Result.vue
<template>
<div class="cm-tx-c cm-mt-08 cm-p-02">
<el-image :src="item.status==='success'?successBg:failBg"
style="width: 250px"
>
<div slot="placeholder" class="image-slot">
图片加载中<span class="dot">...</span>
</div>
</el-image>
<div :class="item.status==='success'?'success-title':'fail-title'">{{item.title}}</div>
<div>{{item.describe}}</div>
<div class="cm-flex cm-jc-sa">
<div @click="cancel()" class="cm-btn-cancel">{{item.cancelText}}</div>
<div @click="submit()" class="cm-btn-submit">{{item.submitText}}</div>
</div>
</div>
</template>
<script>
import successBg from '../images/result-success.png';
import failBg from '../images/result-fail.png';
export default {
name: "ElResult",
data(){
return{
successBg,
failBg
}
},
props:{
item:{
type:Object,
default:{}
}
},
created(){
},
methods:{
cancel(){
this.$emit('on-cancel','');
},
submit(){
this.$emit('on-submit','');
}
}
}
</script>
<style scoped>
.success-title{
padding: 0.4rem;
font-size: 0.35rem;
color:#15bc83;
}
.fail-title{
padding: 0.4rem;
font-size: 0.35rem;
color:#f25643;
}
</style>
index.js
文件路径:share/result/index.js
import Result from './Result.vue';
/* istanbul ignore next */
Result.install = function(Vue) {
Vue.component(Result.name, Result);
};
export default Result;
注:里面用到一些公共样式,公共样式内容比较多,就不贴出来了。有需要的留言。
更多推荐
已为社区贡献12条内容
所有评论(0)