|
@@ -1,95 +0,0 @@
|
|
|
-<template>
|
|
|
- <n-form ref="formRef" :model="model" :rules="rules">
|
|
|
- <n-form-item path="age" label="班级名称">
|
|
|
- <n-input v-model:value="model.age" @keydown.enter.prevent />
|
|
|
- </n-form-item>
|
|
|
- <n-row :gutter="[0, 24]">
|
|
|
- <n-col :span="24">
|
|
|
- <div style="display: flex; justify-content: flex-end">
|
|
|
- <n-button
|
|
|
- :disabled="model.age === null"
|
|
|
- round
|
|
|
- type="primary"
|
|
|
- @click="handleValidateButtonClick"
|
|
|
- >
|
|
|
- 提交
|
|
|
- </n-button>
|
|
|
- </div>
|
|
|
- </n-col>
|
|
|
- </n-row>
|
|
|
- </n-form>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts">
|
|
|
-import { defineComponent, ref } from 'vue'
|
|
|
-import {
|
|
|
- FormInst,
|
|
|
- FormItemInst,
|
|
|
- FormItemRule,
|
|
|
- useMessage,
|
|
|
- FormRules
|
|
|
-} from 'naive-ui'
|
|
|
-
|
|
|
-interface ModelType {
|
|
|
- age: string | null
|
|
|
-}
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- setup (props,context) {
|
|
|
-
|
|
|
- const formRef = ref<FormInst | null>(null)
|
|
|
- const rPasswordFormItemRef = ref<FormItemInst | null>(null)
|
|
|
- const message = useMessage()
|
|
|
- const modelRef = ref<ModelType>({
|
|
|
- age: null,
|
|
|
- password: null,
|
|
|
- reenteredPassword: null
|
|
|
- })
|
|
|
- function validatePasswordStartWith (
|
|
|
- rule: FormItemRule,
|
|
|
- value: string
|
|
|
- ): boolean {
|
|
|
- return (
|
|
|
- !!modelRef.value.password &&
|
|
|
- modelRef.value.password.startsWith(value) &&
|
|
|
- modelRef.value.password.length >= value.length
|
|
|
- )
|
|
|
- }
|
|
|
- function validatePasswordSame (rule: FormItemRule, value: string): boolean {
|
|
|
- return value === modelRef.value.password
|
|
|
- }
|
|
|
- const rules: FormRules = {
|
|
|
- age: [
|
|
|
- {
|
|
|
- required: true,
|
|
|
- validator (rule: FormItemRule, value: string) {
|
|
|
- if (!value) {
|
|
|
- return new Error('需要班级名称')
|
|
|
- }
|
|
|
- return true
|
|
|
- },
|
|
|
- trigger: ['input', 'blur']
|
|
|
- }
|
|
|
- ],
|
|
|
- }
|
|
|
- return {
|
|
|
- formRef,
|
|
|
- rPasswordFormItemRef,
|
|
|
- model: modelRef,
|
|
|
- rules,
|
|
|
- handlePasswordInput () {
|
|
|
- if (modelRef.value.reenteredPassword) {
|
|
|
- rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
|
|
|
- }
|
|
|
- },
|
|
|
- handleValidateButtonClick(){
|
|
|
- message.success("提交成功")
|
|
|
- this.$emit('showModal',false)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped></style>
|