style: 修改样式
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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文档
|
||||
|
||||
@@ -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`"
|
||||
|
||||
Reference in New Issue
Block a user