钉钉小程序实现自定义表单模板组件（一）_钉钉宜达添加label 按钮

前言

之前实现过在 web 端的自定义表单，使用 vue + elementUI，参考链接：
https://blog.csdn.net/weixin_43930421/article/details/125041581

现在随着移动端完善，需要在钉钉小程序上也实现类似自定义表单。

实现

首先引入 colorUI，参考：
https://blog.csdn.net/weixin_43930421/article/details/124748879

在 components 文件目录下新建 custForm组件

custForm.axml

<view>
  <view class="cu-form-group solid-top">
    <view class="title text-gray">表单名称</view>
    <view class="text-right">
      <input value="{
    {formDetail.title}}" onInput="bindTitleInput" />
    </view>
  </view>
  <scroll-view scroll-y style="height:calc(100vh - 200rpx)">
    <block a:for="{
    {formList}}">
      <view class="flex padding">
        <view class="text-gray" style="width:90%">
          <text a:if="{
    {item.required}}" class="text-red">*</text>
        {
  { item.label }}
        </view>
        <view class="padding-left" data-idx="{
    {index}}" onTap="moreOpt">
          <text class="cuIcon-more"></text>
        </view>
      </view>
      <view class="padding-left padding-right margin-left">
        <!-- 单选 -->
        <block a:if="{
    {item.type=='radio'}}">
          <radio-group>
            <label style="display: block;height:70rpx" a:for="{
    {item.options}}" a:for-item="option">
              <radio class="radio" value="{
    {index}}" />
              <text>{
  {option}}</text>
            </label>
          </radio-group>
        </block>
        <block a:else>
          <input disabled="{
    {true}}" class="solid form-input" placeholder="{
    {item.placeholder}}" />
        </block>
      </view>
    </block>
    <view style="height:200rpx"></view>
  </scroll-view>
  
  <float-btn position=
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47