更新记录

v1.0.0（2023-08-07）

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

平台兼容性

基本用法

在 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

Events