fix: add space children

This commit is contained in:
zhuzhengjian 2023-04-17 10:55:29 +08:00
parent 63ac0cb613
commit 2208af0174
2 changed files with 25 additions and 4 deletions

View File

@ -1,6 +1,7 @@
// import type { VNode, VNodeChild } from 'vue'
// import { isString } from '@v-c/utils'
// import { cloneVNode } from 'vue'
import { Text } from 'vue'
import type { VNode } from 'vue'
const rxTwoCNChar = /^[\u4E00-\u9FA5]{2}$/
export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
@ -8,6 +9,18 @@ export const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
export function isUnBorderedButtonType(type?: ButtonType) {
return type === 'text' || type === 'link'
}
export const spaceChildren = (child: VNode, needInserted: boolean) => {
const SPACE = needInserted ? ' ' : ''
if (child.type === Text) {
let text = (child.children as string).trim()
if (isTwoCNChar(text)) {
text = text.split('').join(SPACE)
}
return <span>{text}</span>
}
return child
}
//
// function splitCNCharsBySpace(child: VNodeChild , needInserted: boolean) {
// if (child === null || child === undefined) {

View File

@ -16,7 +16,11 @@ import { useCompactItemContext } from '../space/compact'
import useStyle from './style'
import type { ButtonProps, LoadingConfigType } from './interface'
import { buttonProps } from './interface'
import { isTwoCNChar, isUnBorderedButtonType } from './button-helper'
import {
isTwoCNChar,
isUnBorderedButtonType,
spaceChildren
} from './button-helper'
type Loading = number | boolean
function getLoadingConfig(loading: ButtonProps['loading']): LoadingConfigType {
@ -181,6 +185,10 @@ const Button = defineComponent({
)
const iconNode = icon && (!innerLoading.value ? icon?.() : <>L</>)
const kids =
children || children === 0
? spaceChildren(children[0] as any, isNeedInserted && autoInsertSpace)
: undefined
if (attrs.href !== undefined) {
return wrapSSR(
<a
@ -191,7 +199,7 @@ const Button = defineComponent({
ref={buttonRef}
>
{iconNode}
{children}
{kids}
</a>
)
}
@ -203,7 +211,7 @@ const Button = defineComponent({
ref={buttonRef}
>
{iconNode}
{children}
{kids}
</button>
)