3.0.0 • Published 2 years ago

@xing.wu/form v3.0.0

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

开发

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一行几个itemNumber-1-
formItems用于渲染form-itemArray<Object>-[]Object内容见下form-items-object
其他参数----见element-ui的form-attributes(右键复制链接到浏览器打开，不要直接点击)

form-items-object

参数说明类型可选值默认值备注
type需要渲染在form-item中的组件stringel-inputel-radio-groupel-checkbox-groupel-input-numberel-selectel-cascaderel-switchel-sliderel-time-selectel-date-pickerel-rate等几乎所有element-ui常用表单标签-如果发现有不支持的联系hukai
rules需要校验的规则Array<Object>--符合async-validator即可
componenttype对应组件的属性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的keystring--同上
optionsValueKey存在可选项时，可选项value的keystring--同上
其他可添加属性----见type对应标签的文档
@infinitebrahmanuniverse/nolb-_xi@everything-registry/sub-chunk-1029@zalastax/nolb-_xi
3.0.0

2 years ago

1.0.0

2 years ago