kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 修改样式

This commit is contained in:
kailong321200875 2023-06-05 16:30:35 +08:00
parent 26dc886f8c
commit 207c5b3fc4
10 changed files with 98 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Editor/src/Editor.vue
View File

@ -99,7 +99,6 @@ const handleChange = (editor: IDomEditor) => {
// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
const editor = unref(editorRef.value)
if (editor === null) return
// 销毁，并移除 editor
editor?.destroy()
@ -121,7 +120,7 @@ defineExpose({
<Toolbar
:editor="editorRef"
:editorId="editorId"
class="b-b-1 border-solid border-[var(--tags-view-border-color)]"
class="border-0 b-b-1 border-solid border-[var(--tags-view-border-color)]"
/>
<!-- 编辑器 -->
<Editor

39
src/components/Form/src/Form.vue
View File

@ -182,41 +182,7 @@ export default defineComponent({
// 渲染formItem
const renderFormItem = (item: FormSchema) => {
// 单独给只有options属性的组件做判断
// const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer']
// if (
// item?.component !== 'SelectV2' &&
// item?.component !== 'Cascader' &&
// item?.componentProps?.options
// ) {
// slotsMap.default = () => renderOptions(item)
// }
// const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
// 如果有 labelMessage，自动使用插槽渲染
// if (item?.labelMessage) {
// formItemSlots.label = () => {
// return (
// <>
// <span>{item.label}</span>
// <ElTooltip placement="right" raw-content>
// {{
// content: () => <span v-html={item.labelMessage}></span>,
// default: () => (
// <Icon
// icon="ep:warning"
// size={16}
// color="var(--el-color-primary)"
// class="ml-2px relative top-1px"
// ></Icon>
// )
// }}
// </ElTooltip>
// </>
// )
// }
// }
const formItemSlots: Recordable = setFormItemSlots(slots, item.field)
return (
<ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label || ''}>
{{
@ -291,7 +257,8 @@ export default defineComponent({
</Com>
)
}
}
},
...formItemSlots
}}
</ElFormItem>
)

10
src/components/Form/src/helper/index.ts
View File

@ -86,7 +86,7 @@ export const setGridProp = (col: ColProps = {}): ColProps => {
export const setComponentProps = (item: FormSchema): Recordable => {
// const notNeedClearable = ['ColorPicker']
// 拆分事件并组合
const onEvents = item?.componentProps?.on || {}
const onEvents = (item?.componentProps as any)?.on || {}
const newOnEvents: Recordable = {}
for (const key in onEvents) {
@ -165,13 +165,13 @@ export const initModel = (schema: FormSchema[], formModel: Recordable) => {
export const setFormItemSlots = (slots: Slots, field: string): Recordable => {
const slotObj: Recordable = {}
if (slots[`${field}-error`]) {
slotObj['error'] = (data: Recordable) => {
return getSlot(slots, `${field}-error`, data)
slotObj['error'] = (...args: any[]) => {
return getSlot(slots, `${field}-error`, args)
}
}
if (slots[`${field}-label`]) {
slotObj['label'] = (data: Recordable) => {
return getSlot(slots, `${field}-label`, data)
slotObj['label'] = (...args: any[]) => {
return getSlot(slots, `${field}-label`, args)
}
}
return slotObj

15
src/components/Form/src/types/index.ts
View File

@ -5,9 +5,11 @@ import {
InputNumberProps,
CascaderProps,
CascaderNode,
CascaderValue
CascaderValue,
FormItemRule
} from 'element-plus'
import type { AxiosPromise } from 'axios'
import { IEditorConfig } from '@wangeditor/editor'
export interface PlaceholderModel {
placeholder?: string
@ -731,6 +733,11 @@ export interface TimeSelectComponentProps {
style?: CSSProperties
}
export interface EditorComponentProps {
editorConfig?: IEditorConfig
style?: CSSProperties
}
export interface ColProps {
span?: number
xs?: number
@ -752,10 +759,13 @@ export type FormValueType = string | number | string[] | number[] | boolean | un
export interface FormItemProps {
labelWidth?: string | number
required?: boolean
rules?: Recordable
rules?: FormItemRule | FormItemRule[]
error?: string
showMessage?: boolean
inlineMessage?: boolean
size?: ElementPlusSize
for?: string
validateStatus?: '' | 'error' | 'validating' | 'success'
style?: CSSProperties
}
@ -800,6 +810,7 @@ export interface FormSchema {
| DatePickerComponentProps
| DateTimePickerComponentProps
| TimePickerComponentProps
| EditorComponentProps
/**
* formItem组件属性，具体可以查看element-plus文档

10
src/components/InputPassword/src/InputPassword.vue
View File

@ -53,19 +53,11 @@ const getPasswordStrength = computed(() => {
const zxcvbnRef = zxcvbn(unref(valueRef)) as ZxcvbnResult
return value ? zxcvbnRef.score : -1
})
const getIconName = computed(() =>
unref(textType) === 'password' ? 'ant-design:eye-invisible-outlined' : 'ant-design:eye-outlined'
)
</script>
<template>
<div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`]">
<ElInput v-bind="$attrs" v-model="valueRef" :type="textType">
<template #suffix>
<Icon class="el-input__icon cursor-pointer" :icon="getIconName" @click="changeTextType" />
</template>
</ElInput>
<ElInput v-bind="$attrs" v-model="valueRef" showPassword :type="textType" />
<div
v-if="strength"
:class="`${prefixCls}__bar`"

5
src/locales/en.ts
View File

@ -280,7 +280,10 @@ export default {
set: 'Set',
subitem: 'Subitem',
formValidation: 'Form validation',
verifyReset: 'Verify reset'
verifyReset: 'Verify reset',
// 富文本编辑器
richText: 'Rich text',
form: 'Form'
},
guideDemo: {
guide: 'Guide',

5
src/locales/zh-CN.ts
View File

@ -279,7 +279,10 @@ export default {
set: '设置',
subitem: '子项',
formValidation: '表单验证',
verifyReset: '验证重置'
verifyReset: '验证重置',
// 富文本编辑器
richText: '富文本编辑器',
form: '表单'
},
guideDemo: {
guide: '引导页',

42
src/router/index.ts
View File

@ -166,7 +166,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
// }
// }
]
}
},
// {
// path: 'table',
// component: getParentLayout(),
@ -203,26 +203,26 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
// }
// ]
// },
// {
// path: 'editor-demo',
// component: getParentLayout(),
// redirect: '/components/editor-demo/editor',
// name: 'EditorDemo',
// meta: {
// title: t('router.editor'),
// alwaysShow: true
// },
// children: [
// {
// path: 'editor',
// component: () => import('@/views/Components/Editor/Editor.vue'),
// name: 'Editor',
// meta: {
// title: t('router.richText')
// }
// }
// ]
// },
{
path: 'editor-demo',
component: getParentLayout(),
redirect: '/components/editor-demo/editor',
name: 'EditorDemo',
meta: {
title: t('router.editor'),
alwaysShow: true
},
children: [
{
path: 'editor',
component: () => import('@/views/Components/Editor/Editor.vue'),
name: 'Editor',
meta: {
title: t('router.richText')
}
}
]
}
// {
// path: 'search',
// component: () => import('@/views/Components/Search.vue'),

109
src/views/Components/Form/DefaultForm.vue
View File

@ -1343,7 +1343,50 @@ const schema = reactive<FormSchema[]>([
field: 'field63',
component: 'TimeSelect',
label: t('formDemo.default')
}
},
{
field: 'field64',
component: 'Divider',
label: t('formDemo.richText')
},
{
field: 'field65',
component: 'Editor',
value: 'hello world',
label: t('formDemo.default'),
componentProps: {
editorConfig: {
placeholder: '请输入内容...'
}
},
colProps: {
span: 24
}
},
{
field: 'field66',
component: 'Divider',
label: t('formDemo.inputPassword')
},
{
field: 'field67',
component: 'InputPassword',
label: t('formDemo.default'),
componentProps: {
strength: true
}
},
{
field: 'field68',
component: 'Divider',
label: `${t('formDemo.form')} t('formDemo.slot')}`,
},
{
field: 'field69',
component: 'Input',
value: 'test',
label: `default`,
},
])
const { register, formRef, methods } = useForm({
@ -1360,68 +1403,8 @@ const changeToggle = () => {
<template>
<button @click="changeToggle">测试</button>
<ContentWrap :title="t('formDemo.defaultForm')" :message="t('formDemo.formDes')">
<!-- <Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'">
<template #field4-prefix>
<Icon icon="ep:calendar" class="el-input__icon" />
</template>
<template #field4-suffix>
<Icon icon="ep:calendar" class="el-input__icon" />
</template>
<template #field5-prepend> Http:// </template>
<template #field5-append> .com </template>
<template #field9-default="{ item }">
<div class="value">{{ item.value }}</div>
<span class="link">{{ item.link }}</span>
</template>
<template #field15-option="{ item }">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
{{ item.value }}
</span>
</template>
<template #field17-option="{ item }">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
{{ item.value }}
</span>
</template>
<template #field20-default="{ item }">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
{{ item.value }}
</span>
</template>
<template #field22-default="{ item }">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
{{ item.value }}
</span>
</template>
<template #field25-default="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
<template #field36-default="{ option }">
<span>{{ option.value }} - {{ option.desc }}</span>
</template>
<template #field55-default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday"></span>
</div>
</template>
</Form> -->
<Form @register="register" />
<Form @register="register" label-width="auto" :label-position="isMobile ? 'top' : 'right'">
</Form>
</ContentWrap>
</template>

27
types/custom-types.d.ts vendored
View File

@ -1,27 +0,0 @@
import { SlateDescendant } from '@wangeditor/editor'
declare module 'slate' {
interface CustomTypes {
// 扩展 text
Text: {
text: string
bold?: boolean
italic?: boolean
code?: boolean
through?: boolean
underline?: boolean
sup?: boolean
sub?: boolean
color?: string
bgColor?: string
fontSize?: string
fontFamily?: string
}
// 扩展 Element 的 type 属性
Element: {
type: string
children: SlateDescendant[]
}
}
}