1. 业务场景

在设计APP表单时，有的时候需要显示一些自定义信息，通过表单本身的控件不能解决问题。我们提供了一种方法，就是允许用户自己编写控件，并配置到自定义表单中，下面就介绍一下如何使用这种方式进行扩展。

2. 操作步骤

2.1 创建一个自定义控件

比如我编写一个Demo.vue 文件。

<template>
  <div>
    这是一个自定义组件<br>
    userId:{{curUser.userId}}<br>
    fullName:{{curUser.fullName}}<br>
    参数测试:{{params_.phone}}
  </div>
</template>

<script>

import {
  mapState,
  mapMutations
} from 'vuex';

export default {
  name: "rx-demo-001",
  props:["attr"],
  computed: {
    ...mapState(['curUser']),
  },
  data(){
      return {
          params_:{}
      }
  },
  created(){
      this.params_=JSON.parse(this.attr.params);
  }
}
</script>

注意这个文件需要放到手机端程序的 views 目录下。

在编写组件时，我们可以使用一些上下文属性。

2.2 设计表单

• 控件标识
  就是上面的控件名称
• 控件参数
  这里是可以传递到控件的参数

2.3 效果展示