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-col :span="8">
            <LoginForm @login="e => console.log(e)"></LoginForm>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { ModifyForm, Element, LoginForm } 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>