普通用法

点击查看代码

<template>
  <div>
    <ygp-form
      ref="form"
      v-model="formData"
      :dic="dic"
      :option="option"
      @handleSave="handleSave"
      @focus="handleFocus"
      @change="handleChange"
    ></ygp-form>
  </div>
</template>

export default {
  data() {
    return {
      dic: {
        dicData: [
          {
            label: "男",
            value: 0,
          },
          {
            label: "女",
            value: 1,
          },
        ],
      },
      formData: {},
      option: {
        title: "新增表单",
        labelWidth: "80px",
        operate: [
          {
            title: "保存",
            operate: "handleSave",
          },
        ],
        items: [
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "性别",
            prop: "sex",
            type: "select",
            dicName: "dicData",
            options: [],
            labelKey: "label",
            valueKey: "value",
          },
          {
            label: "日期",
            prop: "date",
            type: "date",
          },
        ],
      },
    };
  },
  methods: {
    // 保存按钮
    async handleSave() {
      const { valid } = await this.$refs.form.submitForm();
      if (!valid) {
        return;
      }
      this.$message.success(JSON.stringify(this.formData));
    },
    // 表单聚焦事件
    handleFocus(prop) {
      console.log(prop);
    },
    // 表单改变事件
    handleChange(value, name, option) {
      this.$message.success(JSON.stringify(value));
    },
  },
};