mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
fix(form-item): custom width override (#175)
* fix: form-item custom width override * chore: use `formatLength` instead of `pxfy`
This commit is contained in:
parent
5b1e14b945
commit
fae668b9ff
src
@ -1,15 +1,13 @@
|
|||||||
import { inject, computed, ref, ComputedRef } from 'vue'
|
import { inject, computed, ref, ComputedRef } from 'vue'
|
||||||
import { get } from 'lodash-es'
|
import { get } from 'lodash-es'
|
||||||
import { pxfy } from 'seemly'
|
|
||||||
import type { FormItemSetupProps } from './FormItem'
|
import type { FormItemSetupProps } from './FormItem'
|
||||||
import { formInjectionKey } from './interface'
|
import { formInjectionKey } from './interface'
|
||||||
import type { Size, FormItemRule } from './interface'
|
import type { Size, FormItemRule } from './interface'
|
||||||
|
import { formatLength } from '../../_utils'
|
||||||
|
|
||||||
export function formItemSize (
|
export function formItemSize (props: FormItemSetupProps): {
|
||||||
props: FormItemSetupProps
|
mergedSize: ComputedRef<Size>
|
||||||
): {
|
} {
|
||||||
mergedSize: ComputedRef<Size>
|
|
||||||
} {
|
|
||||||
const NForm = inject(formInjectionKey, null)
|
const NForm = inject(formInjectionKey, null)
|
||||||
return {
|
return {
|
||||||
mergedSize: computed(() => {
|
mergedSize: computed(() => {
|
||||||
@ -26,16 +24,22 @@ export function formItemMisc (props: FormItemSetupProps) {
|
|||||||
const mergedLabelWidthRef = computed(() => {
|
const mergedLabelWidthRef = computed(() => {
|
||||||
if (mergedLabelPlacementRef.value === 'top') return
|
if (mergedLabelPlacementRef.value === 'top') return
|
||||||
const { labelWidth } = props
|
const { labelWidth } = props
|
||||||
if (labelWidth !== undefined) return pxfy(labelWidth)
|
|
||||||
if (NForm?.labelWidth !== undefined) return pxfy(NForm.labelWidth)
|
if (labelWidth !== undefined) {
|
||||||
|
return formatLength(labelWidth)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (NForm?.labelWidth !== undefined) {
|
||||||
|
return formatLength(NForm.labelWidth)
|
||||||
|
}
|
||||||
return undefined
|
return undefined
|
||||||
})
|
})
|
||||||
const mergedLabelStyleRef = computed(() => {
|
const mergedLabelStyleRef = computed(() => {
|
||||||
return [
|
return [
|
||||||
props.labelStyle,
|
|
||||||
{
|
{
|
||||||
width: mergedLabelWidthRef.value
|
width: mergedLabelWidthRef.value
|
||||||
}
|
},
|
||||||
|
props.labelStyle
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
const mergedLabelPlacementRef = computed(() => {
|
const mergedLabelPlacementRef = computed(() => {
|
||||||
|
@ -46,7 +46,7 @@ filterable
|
|||||||
| change | `(Array<string \| number>)` | |
|
| change | `(Array<string \| number>)` | |
|
||||||
|
|
||||||
<!-- ## Notes
|
<!-- ## Notes
|
||||||
When I heared from my colleague he's going to put more than a thousand items into the transfer, I was astonished. My poor imagination can't come up with a scene that must use a transfer with thousands of items. But I must admit, it's my mind that always not considerate enough.
|
When I heard from my colleague he's going to put more than a thousand items into the transfer, I was astonished. My poor imagination can't come up with a scene that must use a transfer with thousands of items. But I must admit, it's my mind that always not considerate enough.
|
||||||
|
|
||||||
Months earlier, I have built a interesting animation in transfer but it will cause reflow on many DOM elements. At that time, I hadn't think of people would insert so much data in it. Although I never compromise on styles, it's hard to surpass the limit of browser and hardware. It sounds like a kind of philosophy problem to build a car as comfort as a Rolls Royce and as fast as a Ferrari (or Porsche, etc) which is nearly impossible.
|
Months earlier, I have built a interesting animation in transfer but it will cause reflow on many DOM elements. At that time, I hadn't think of people would insert so much data in it. Although I never compromise on styles, it's hard to surpass the limit of browser and hardware. It sounds like a kind of philosophy problem to build a car as comfort as a Rolls Royce and as fast as a Ferrari (or Porsche, etc) which is nearly impossible.
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user