2
0
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 ()

* fix: form-item custom width override

* chore: use `formatLength` instead of `pxfy`
This commit is contained in:
2021-06-17 16:43:21 +08:00 committed by GitHub
parent 5b1e14b945
commit fae668b9ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 11 deletions
src
form/src
transfer/demos/enUS

View File

@ -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(() => {

View File

@ -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.