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

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

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>
)

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

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文档

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`"