Vue 组件封装之 Result 结果页

短命女 2022-12-16 06:14 452阅读 0赞

### Vue 组件封装之 Result 结果页 ###

*  一、Result 结果页
 *  二、使用案例
 *  三、API 使用指南
 *  四、源代码

# 一、Result 结果页 #

**组件说明：**

实现 Result 结果页。

**效果展示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]

**实现的功能：**

1.  提交或者操作完成之后，进入一个成功或者失败的结果页。
2.  包含成功或者失败的状态插图。
3.  包含成功或者失败的文案表述（标题及详情）。
4.  包含取消（推出应用）和确定（继续填写）两个按钮。

# 二、使用案例 #

<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 使用指南 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="right">说明</th> 
   <th align="center">类型</th> 
   <th align="center">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>item</td> 
   <td align="right">页面展示的静态内容集合</td> 
   <td align="center">Array</td> 
   <td align="center">[]</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td align="right">描述标题</td> 
   <td align="center">String</td> 
   <td align="center">–</td> 
  </tr> 
  <tr> 
   <td>submitText</td> 
   <td align="right">提交按钮文本</td> 
   <td align="center">String</td> 
   <td align="center">–</td> 
  </tr> 
  <tr> 
   <td>cancelText</td> 
   <td align="right">取消按钮文本</td> 
   <td align="center">String</td> 
   <td align="center">–</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td align="right">输入值字段</td> 
   <td align="center">String</td> 
   <td align="center">–</td> 
  </tr> 
  <tr> 
   <td>on-cancel</td> 
   <td align="right">取消按钮事件</td> 
   <td align="center">Function</td> 
   <td align="center">–</td> 
  </tr> 
  <tr> 
   <td>on-submit</td> 
   <td align="right">提交按钮事件</td> 
   <td align="center">Function</td> 
   <td align="center">–</td> 
  </tr> 
 </tbody> 
</table>

# 四、源代码 #

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;

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/fe179db6d82940f4a56924f4d94212ff.png