You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.8 KiB
89 lines
2.8 KiB
<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> |