-
Notifications
You must be signed in to change notification settings - Fork 656
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
71b0e4f
commit b8849da
Showing
8 changed files
with
186 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Config, driver } from 'driver.js' | ||
| import 'driver.js/dist/driver.css' | ||
| import { useDesign } from '@/hooks/web/useDesign' | ||
| import { useI18n } from '@/hooks/web/useI18n' | ||
|
|
||
| const { t } = useI18n() | ||
|
|
||
| const { variables } = useDesign() | ||
|
|
||
| export const useGuide = (options?: Config) => { | ||
| const driverObj = driver( | ||
| options || { | ||
| showProgress: true, | ||
| nextBtnText: t('common.nextLabel'), | ||
| prevBtnText: t('common.prevLabel'), | ||
| doneBtnText: t('common.doneLabel'), | ||
| steps: [ | ||
| { | ||
| element: `#${variables.namespace}-menu`, | ||
| popover: { | ||
| title: t('common.menu'), | ||
| description: t('common.menuDes'), | ||
| side: 'right' | ||
| } | ||
| }, | ||
| { | ||
| element: `#${variables.namespace}-tool-header`, | ||
| popover: { | ||
| title: t('common.tool'), | ||
| description: t('common.toolDes'), | ||
| side: 'left' | ||
| } | ||
| }, | ||
| { | ||
| element: `#${variables.namespace}-tags-view`, | ||
| popover: { | ||
| title: t('common.tagsView'), | ||
| description: t('common.tagsViewDes'), | ||
| side: 'bottom' | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ) | ||
|
|
||
| return { | ||
| ...driverObj | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,60 @@ | ||
| import { useI18n } from '@/hooks/web/useI18n' | ||
| import { FormItemRule } from 'element-plus' | ||
|
|
||
| const { t } = useI18n() | ||
|
|
||
| type Callback = (error?: string | Error | undefined) => void | ||
|
|
||
| interface LengthRange { | ||
| min: number | ||
| max: number | ||
| message: string | ||
| message?: string | ||
| } | ||
|
|
||
| export const useValidator = () => { | ||
| const required = (message?: string) => { | ||
| const required = (message?: string): FormItemRule => { | ||
| return { | ||
| required: true, | ||
| message: message || t('common.required') | ||
| } | ||
| } | ||
|
|
||
| const lengthRange = (val: any, callback: Callback, options: LengthRange) => { | ||
| const lengthRange = (options: LengthRange): FormItemRule => { | ||
| const { min, max, message } = options | ||
| if (val.length < min || val.length > max) { | ||
| callback(new Error(message)) | ||
| } else { | ||
| callback() | ||
| } | ||
| } | ||
|
|
||
| const notSpace = (val: any, callback: Callback, message: string) => { | ||
| // 用户名不能有空格 | ||
| if (val.indexOf(' ') !== -1) { | ||
| callback(new Error(message)) | ||
| } else { | ||
| callback() | ||
| return { | ||
| min, | ||
| max, | ||
| message: message || t('common.lengthRange', { min, max }) | ||
| } | ||
| } | ||
|
|
||
| const notSpecialCharacters = (val: any, callback: Callback, message: string) => { | ||
| // 密码不能是特殊字符 | ||
| if (/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/gi.test(val)) { | ||
| callback(new Error(message)) | ||
| } else { | ||
| callback() | ||
| const notSpace = (message?: string): FormItemRule => { | ||
| return { | ||
| validator: (_, val, callback) => { | ||
| if (val.indexOf(' ') !== -1) { | ||
| callback(new Error(message || t('common.notSpace'))) | ||
| } else { | ||
| callback() | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // 两个字符串是否想等 | ||
| const isEqual = (val1: string, val2: string, callback: Callback, message: string) => { | ||
| if (val1 === val2) { | ||
| callback() | ||
| } else { | ||
| callback(new Error(message)) | ||
| const notSpecialCharacters = (message?: string): FormItemRule => { | ||
| return { | ||
| validator: (_, val, callback) => { | ||
| if (/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/gi.test(val)) { | ||
| callback(new Error(message || t('common.notSpecialCharacters'))) | ||
| } else { | ||
| callback() | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| required, | ||
| lengthRange, | ||
| notSpace, | ||
| notSpecialCharacters, | ||
| isEqual | ||
| notSpecialCharacters | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <script setup lang="ts"> | ||
| import { ContentWrap } from '@/components/ContentWrap' | ||
| import { Form, FormSchema } from '@/components/Form' | ||
| import { useValidator } from '@/hooks/web/useValidator' | ||
| import { useForm } from '@/hooks/web/useForm' | ||
| import { reactive } from 'vue' | ||
| import { FormItemRule } from 'element-plus' | ||
| const { formRegister, formMethods } = useForm() | ||
| const { getFormData } = formMethods | ||
| const { required, lengthRange, notSpace, notSpecialCharacters } = useValidator() | ||
| const formSchema = reactive<FormSchema[]>([ | ||
| { | ||
| field: 'field1', | ||
| label: '必填', | ||
| component: 'Input' | ||
| }, | ||
| { | ||
| field: 'field2', | ||
| label: '长度范围', | ||
| component: 'Input' | ||
| }, | ||
| { | ||
| field: 'field3', | ||
| label: '不能有空格', | ||
| component: 'Input' | ||
| }, | ||
| { | ||
| field: 'field4', | ||
| label: '不能有特殊字符', | ||
| component: 'Input' | ||
| }, | ||
| { | ||
| field: 'field5', | ||
| label: '是否相等-值1', | ||
| component: 'Input' | ||
| }, | ||
| { | ||
| field: 'field6', | ||
| label: '是否相等-值2', | ||
| component: 'Input' | ||
| } | ||
| ]) | ||
| const rules = reactive<{ | ||
| [key: string]: FormItemRule[] | ||
| }>({ | ||
| field1: [required()], | ||
| field2: [ | ||
| lengthRange({ | ||
| min: 2, | ||
| max: 5 | ||
| }) | ||
| ], | ||
| field3: [notSpace()], | ||
| field4: [notSpecialCharacters()], | ||
| field5: [ | ||
| { | ||
| asyncValidator: async (_, val, callback) => { | ||
| const formData = await getFormData() | ||
| const { field6 } = formData | ||
| if (val !== field6) { | ||
| callback(new Error('两个值不相等')) | ||
| } else { | ||
| callback() | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <ContentWrap title="useValidator"> | ||
| <Form :schema="formSchema" :rules="rules" @register="formRegister" /> | ||
| </ContentWrap> | ||
| </template> |