开发

1.组件内容

见src

2.开发调试

npm run serve

dev中的serve.vue为调试页面

使用

# 依赖element-ui，且必须引入
# el-form,el-row,el-col,el-form-item,el-checkbox,el-option,el-radio
npm install @xing.wu/form

先引入ElementPlus再引入XingWuForm

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'
import XingWuForm from '@xing.wu/form';
app.use(ElementPlus);
app.use(XingWuForm);

示例

<template>
  <div id="app">
    <xing-wu-form
      v-model:instance="form"
      label-width="80px"
      v-model="formValue"
      :formItems="formItems"
      :column="3"
    />
    <el-button type="primary" @click="printForm">打印formValue</el-button>
    <el-button type="primary" @click="clearForm">resetFields</el-button>
    <el-button type="primary" @click="validate">validate</el-button>
  </div>
</template>

<script>
// Uncomment import and local "components" registration if library is not registered globally.
// import { XingWuFormSample } from '@/entry.esm';
import { defineComponent, reactive, toRefs, ref } from 'vue';

export default defineComponent({
  name: "ServeDev",
  // components: {
  //  XingWuFormSample,
  // }
  data() {
    return {
      formValue: {
        name: "",
        name2: "456",
        name3: [],
        name4: true,
      },
      formValue2: {
        name: "",
        name2: "456",
        name3: [],
        name4: true,
      },
      formItems: [
        {
          type: "el-input",
          label: "姓名：",
          prop: "name",
          component: {
            placeholder: "请输入234",
            disabled: true,
            class: ["test1","test2"],
          },
        },
        {
          type: "el-select",
          label: "姓名2：",
          prop: "name2",
          component: {
            placeholder: "请选择456",
            optionsLabelKey: "name",
            optionsValueKey: "id",
            // vue3升级，移除listener这一层
            // listeners: {
              onChange: () => {
                console.log(123);
              },
            // },
            options: [
              {
                name: "一年级",
                id: "123",
              },
              {
                name: "二年级",
                id: "456",
              },
            ],
          },
        },
        {
          type: "el-checkbox-group",
          label: "姓名3：",
          prop: "name3",
          component: {
            placeholder: "请输入456",
            optionsLabelKey: "name",
            optionsValueKey: "id",
            options: [
              {
                name: "一年级",
                id: "123",
              },
              {
                name: "二年级",
                id: "456",
              },
            ],
          },
        },
        {
          type: "el-checkbox",
          label: "姓名4：",
          prop: "name4",
          component: {
            label: "笨比",
          },
        },
      ],
    };
  },
  methods: {
    printForm() {
      console.log(this.formValue);
    },
    clearForm() {
      this.$refs.form.resetFields();
    },
    validate() {
      this.$refs.form.validate((valid) => {
        console.log("校验完毕");
      });
    },
  },
});
</script>

<style scoped>
::v-deep .test1 {
  width: 20%;
}
::v-deep .test2 {
  background-color: red;
}
</style>

xing-wu-form 参数

xing-wu-form-attributes

|参数|说明|类型|可选值|默认值|备注| | --- | --- | --- | --- | --- | --- | |v-model|绑定的数值对象|Object|-|-|-| | column | 一行几个item | Number | - | 1 | - | |formItems|用于渲染form-item|Array<Object>|-|[]|Object内容见下form-items-object| |其他参数|-|-|-|-|见element-ui的form-attributes(右键复制链接到浏览器打开，不要直接点击)|

form-items-object

|参数|说明|类型|可选值|默认值|备注| | --- | --- | --- | --- | --- | --- | |type|需要渲染在form-item中的组件|string|el-inputel-radio-groupel-checkbox-groupel-input-numberel-selectel-cascaderel-switchel-sliderel-time-selectel-date-pickerel-rate等几乎所有element-ui常用表单标签|-|如果发现有不支持的联系hukai| |rules|需要校验的规则|Array<Object>|-|-|符合async-validator即可| |component|type对应组件的属性|Object|-|-|componen内容见下component| |其他可添加属性|-|-|-|-|见element-ui的form-item-attributes(右键复制链接到浏览器打开，不要直接点击)|

component

|参数|说明|类型|可选值|默认值|备注| | --- | --- | --- | --- | --- | --- | | class | 需要给当前组件添加的样式 | Array<String> | - | xing-wu-form-width100 | 非checkbox和radio组件默认添加样式.xing-wu-form-width100{width:100%}. scoped添加::v-deep | | ~~listeners~~ 随着vue3升级，已被取消，直接在本级添加on前缀的事件名即可 | type组件的可触发事件 | Object | --- | --- | {event:(args)=>{}} | |options|可选项，或组件本身需要的属性|Array<Object>|-|-|当type为el-selectel-checkbox-groupel-radio-group时，可选项会读取这个属性| |optionsLabelKey|存在可选项时，可选项label的key|string|-|-|同上| |optionsValueKey|存在可选项时，可选项value的key|string|-|-|同上| |其他可添加属性|-|-|-|-|见type对应标签的文档|