uniapp小程序不支持动态组件问题

  • 背景:开发微信小程序。使用uniapp提供的框架进行开发。在pc端可以使用的component 动态组件标签不被支持。HbuilderX中启动微信小程序时报编译错误。
  • 替代方案。在诸多收费的自定义表单中。很少有提供微信小程序端的渲染组件。可能是基于此原因。也有支持的,但仅仅是在web-view页面中使用。
  • 通过if-else判断。暂时能满足要求
js 复制代码
<template>
  <view class="dynamic-form">
    <form>
      <input type="text" value="测试" v-model="a" placeholder="请输入内容" name="testInput" />
      <view v-for="item in formItems" :key="item.formItemId" class="form-item">
        <!-- 图片 -->
        <image name="image" v-if="item.type === 'IMAGE'" :src="item.scheme.src" mode="aspectFit"/>

        <!-- 文本描述 -->
        <rich-text v-else-if="item.type === 'DESC_TEXT'" :nodes="item.scheme.content"
          v-model="formDataVar[item.scheme.vModel]"></rich-text>

        <!-- 多选框 -->
        <view v-else-if="item.type === 'CHECKBOX'">
          <text>{{ item.label }}</text>
          <checkbox-group :name="item.vModel">
            <label v-for="(option, index) in item.scheme.config.options" :key="index">
              <checkbox :value="option.value" /> {{ option.label }}
            </label>
          </checkbox-group>
        </view>

        <!-- 输入框 -->
        <view v-else-if="item.type === 'INPUT'">
          <text>{{ item.label }}</text>
          <input :type="item.scheme.config.dataType.type || 'text'" :placeholder="item.placeholder" :name="item.vModel" v-model="formDataVar[item.scheme.vModel]"/>
        </view>

        <!-- 省市联动 -->
        <view v-else-if="item.type === 'PROVINCE_CITY'">
          <text>{{ item.label }}</text>
          <!-- <picker mode="region" range="{{['北京','上海']}}" @change="handleRegionChange" @columnchange="handleColumnChange"
            name="provinceCity">
            <view class="picker">
              当前选择:{{ region[0] }},{{ region[1] }}
            </view>
          </picker> -->
        </view>

        <!-- 日期 -->
        <view v-else-if="item.type === 'DATE'">
          <text>{{ item.label }}</text>
          <picker mode="date" :range="dateRange" @change="(e) => handleDateChange(item, e)" name="date" >
            <view class="picker">
              当前选择:{{ formDataVar[item.scheme.vModel] || '请选择日期' }}
            </view>
          </picker>
        </view>

      </view>
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <button type="submit" @click="handleSubmit">提交</button>
      <!-- 提交按钮 -->
      <view class="fixed-bottom">

      </view>
    </form>
    <view>

    </view>
  </view>

</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      required: true
    },
    /** 流程定义ID */
    processDefId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      formItems: this.formData?.formItems || [],
      region: ['北京市', '北京市'],
      dateRange: [],
      selectedDate: '',
      formDataVar: {

      },
      message: ''
    };
  },
  mounted() {
    console.log('formData2:', this.formData);
    console.log('formItems2:', this.formItems);
    // 初始化 formDataVar 数据
    this.formItems.forEach(item => {
      if (item.type === 'CHECKBOX') {
        this.$set(this.formDataVar, item.scheme.vModel, []);
      } else if (item.type === 'DATE') {
        this.$set(this.formDataVar, item.scheme.vModel, '');
      } else {
        this.$set(this.formDataVar, item.scheme.vModel, '');
      }
    });
    console.log('formDataVar:', this.formDataVar)
  },
  methods: {
    handleSubmit(e) {
      // console.log('Form submitted e:', this.$refs.rform);
      // 处理表单提交逻辑
      // console.log('Form submitted:', e.detail.value);
      // console.log('formdatavar: ', this.formItems)
      // console.log('formDataVar:', this.formDataVar);
      // 调用父组件的 submitFormData 方法
      this.$emit('submitFormData', this.formDataVar)
    },
    handleRegionChange(e) {
      const regions = ['北京', '上海']; // 示例地区
      this.region = [regions[e.detail.value[0]], regions[e.detail.value[1]]];
    },
    handleColumnChange(e) {
      // 可以在这里处理列变化
    },
    handleDateChange(item,  e) {
      // const date = new Date(e.detail.value).toLocaleDateString();
      // this.selectedDate = date;
      console.log('日期变化:', e.detail.value);
      const date = new Date(e.detail.value).toLocaleDateString();
      this.formDataVar[item.scheme.vModel] = date;
    }
  }
};
</script>

<style scoped>
.dynamic-form {
  padding: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 999;
  }
</style>
相关推荐
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
说私域8 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往8 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw8 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld11 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
996幸存者12 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮14 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘18 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero21 小时前
UniappDay03
vue.js·微信小程序·uni-app
说私域1 天前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源