更新记录

v1.0.0(2023-08-07) 下载此版本

2023.08.07 1、完成多组件上传功能


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.7 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

基本用法

template 中使用组件

<view class="item-wrapper">
  <wei-multi-form
    :surplusIndex="surplusIndex"
    :list-data="listData" 
    @update-field="handleUpdateField"
    @update-imgs="handleUpdateImgs"
    @add-form="handleAddForm"
  ></wei-multi-form>
</view>

<script>
import multiForm from '@/components/wei-multi-form/wei-multi-form.vue';
export default {
  name: 'multiComp',
  components: {
    multiForm
  },
  data() {
    return {
      surplusIndex: 1,
      childKey: 0,
      listData: [], // 将 listData 初始化为空数组
    };
  },
  created() {
    this.handleAddForm(); // 添加初始项
  },
  onLoad(options) {
    this.handleInit();
  },
  methods: {
    handleUpdateField({ index, field, value }) {
      this.listData[index][field] = value;
    },
    handleUpdateImgs({index, field, value, option}) {
      if(option == 1) { // add
        this.listData[index].itemImages.push(value);
      } else if(option == 2) { // delete
        this.listData[index].itemImages.splice(value, 1);
      }
    },
    handleAddForm() {
      this.listData.push({ 
        itemName: '其他', 
        itemDesc: '测试cscscscscsscscs', 
        itemImages: []
      });
    },
    handleInit() {
      this.listData = [{
        itemName: '其他', 
        itemDesc: '测试cscscscscsscscs', 
        itemImages: []
      }];
    },
    handleConfirm() {
      uni.showLoading({
        mask: true
      })
      // 判断表单信息是否完善  
      uni.hideLoading();
    }
  }
};
</script>

API

Props

属性名 类型 默认值 说明
surplusIndex Number - 控制表单的组数
listData Array - 多组表单数组

Events

事件名 说明 返回值
@update-field 更新描述信息 -
@update-imgs 更新图片信息 -
@add-form 添加一组新表单 _

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问