noob-components/examples/view/base/form.vue

<template>
  <h2>{{ t("form.title") }}</h2>
  <el-row>
    <el-col :span="8">
      <ModifyForm
        class="modify-form-demo"
        @cancel="demo = {}"
        @confirm=""
        :rules="rules"
        :param="demo"
        :width="140"
        :items="demoItems"
      >
      </ModifyForm>
    </el-col>
    <el-col :span="8">
      <ModifyForm
        ref="form"
        class="modify-form-demo"
        @cancel="cancel"
        @confirm="confirm"
        :rules="rules"
        :param="param"
        :width="140"
        :items="items"
      >
      </ModifyForm>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { ModifyForm, Element } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();
const {
  showMessage,
  SimpleRequired,
  SimpleCharacter,
  Character,
  SimpleNumber,
  Hexadecimal,
  Longitude,
  Latitude,
  Email,
  Phone,
  Ipv4,
  Ipv6,
  IdCard,
  SimplePassword,
  Password,
} = Element;
const rules = {
  bishu: [new SimpleRequired("form.bishu")],
  bixuan: [new SimpleRequired("form.bixuan", true)],
  maxLen: [new SimpleCharacter(10)],
  char: [new Character(new RegExp(/^[^ ]+$/))],
  num: [new SimpleNumber(10, 20)],
  hex: [new Hexadecimal(2, 8)],
  lan: [new Longitude()],
  lat: [new Latitude()],
  email: [new Email()],
  phone: [new Phone()],
  ipv4: [new Ipv4()],
  ipv6: [new Ipv6()],
  idCard: [new IdCard()],
  pwd: [new SimplePassword()],
  password: [new Password()],
};
const demo = ref<any>({});
const demoItems = [
  { i18n: "form.input", code: "input" },
  { i18n: "form.select", code: "select", dict: "test" },
  { i18n: "form.NoobDate", code: "date", date: true },
];
const items = [
  { i18n: "form.bishu", code: "bishu" },
  { i18n: "form.bixuan", code: "bixuan", dict: "test" },
  { i18n: "form.maxLen", code: "maxLen" },
  { i18n: "form.char", code: "char" },
  { i18n: "form.num", code: "num" },
  { i18n: "form.hex", code: "hex" },
  { i18n: "form.lan", code: "lan" },
  { i18n: "form.lat", code: "lat" },
  { i18n: "form.email", code: "email" },
  { i18n: "form.phone", code: "phone" },
  { name: "ipv4", code: "ipv4" },
  { name: "ipv6", code: "ipv6" },
  { i18n: "form.idCard", code: "idCard" },
  { i18n: "form.pwd", code: "pwd" },
  { i18n: "form.password", code: "password" },
];
const param = ref<any>({});
const form = ref();

const cancel = () => {
  param.value = {};
  setTimeout(() => {
    form.value?.clearValidate();
  }, 50);
};

const confirm = () => {
  showMessage("success", t("form.pass"));
};

onMounted(() => {});
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
::v-deep .modify-form-demo {
  width: 400px;
  float: left;
  padding: 20px;
}
</style>