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 目录下。

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

属性 说明
data 表单数据对象
permission 表单权限数据
attr 控件属性,可以通过 attr.params 获取在设计端配置的参数
metadata 表单元数据
subname 子表名
readonly 是否只读

2.2 设计表单

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

2.3 效果展示

文档更新时间: 2022-03-12 17:25   作者:limeihua