一、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;

注：里面用到一些公共样式，公共样式内容比较多，就不贴出来了。有需要的留言。

Vue 组件封装之 Result 结果页相关推荐

Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...
Vue 组件封装之 List 列表
Vue 组件封装之 List 列表一.List 列表二.使用案例三.API 使用指南四.源代码一.List 列表组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
echarts vue组件封装
echarts vue组件封装为什么封装echarts组件 1.原生echarts不是vue组件风格的,不爽 2.原生echarts需要操作dom,麻烦 3.原生echarts没有响应式系统,太菜 ...
Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索一.Search 组件二.使用案例三.API 使用指南四.源代码一.Search 组件组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...
Vue组件封装，（面试回答）
在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
Vue组件封装的过程
Vue组件封装的过程 vue组件的定义组件(Component)是Vue.js最强大的功能之一组件可以扩展HTML元素,封装可重用代码在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...
Vue 组件封装、组件传值、数据修改
Vue 组件封装封装的意义当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...

Vue 组件封装之 Result 结果页

Vue 组件封装之 Result 结果页

一、Result 结果页

二、使用案例

三、API 使用指南

四、源代码

Vue 组件封装之 Result 结果页相关推荐

最新文章

热门文章