odjbin/vue-core-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(runtime): 实现类名规范化功能

Browse Source 
- 添加 normalizeClass 函数用于处理类名数组和对象
- 在 createVNode 中集成类名规范化逻辑
- 导出 normalizeClass 供外部使用
- 创建测试 HTML 示例验证类名功能
- 处理字符串、数组和对象类型的类名输入
This commit is contained in:
dj
2026-02-27 21:00:53 +08:00
parent abf8112359
commit 026f4a5958
4 changed files with 61 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/runtime-core/src/vnode.ts
View File

@@ -3,6 +3,7 @@ import {
isFunction, isFunction,
isObject, isObject,
isString, isString,
normalizeClass,
ShapeFlags ShapeFlags
} from '@vue/shared' } from '@vue/shared'
@@ -21,6 +22,13 @@ export function isVNode(value): value is VNode {
return value ? value.__v_isVNode === true : false return value ? value.__v_isVNode === true : false
} }
export function createVNode(type, props, children): VNode { export function createVNode(type, props, children): VNode {
if (props) {
let { class: klass, style } = props
if (klass && !isString(klass)) {
props.class = normalizeClass(klass)
}
}
const shapeFlag = isString(type) const shapeFlag = isString(type)
? ShapeFlags.ELEMENT ? ShapeFlags.ELEMENT
: isObject(type) : isObject(type)

1
packages/shared/src/index.ts
View File

@@ -1,4 +1,5 @@
export { ShapeFlags } from './shapeFlags' export { ShapeFlags } from './shapeFlags'
export { normalizeClass } from './normalizeProp'
//判断是否为一个数组 //判断是否为一个数组
export const isArray = Array.isArray export const isArray = Array.isArray

24
packages/shared/src/normalizeProp.ts Normal file
View File

@@ -0,0 +1,24 @@
import { isArray, isObject, isString } from '@vue/shared'
export function normalizeClass(value: unknown): string {
let res = ''
if (isString(value)) {
res = value
} else if (isArray(value)) {
for (let i = 0; i < value.length; i++) {
const normalized = normalizeClass(value[i])
if (normalized) {
res += normalized + ' '
}
}
} else if (isObject(value)) {
for (const name in value as object) {
if ((value as object)[name]) {
res += name + ' '
}
}
}
return res.trim()
}

28
packages/vue/examples/runtime/h-element-class.html Normal file
View File

@@ -0,0 +1,28 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<script src="../../dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const {h} =Vue
const vnode=h('div',{
class:[
{
'red':true,
},
{
'pink':true,
},
{
'blue':false
}
]
},'增强class')
console.log(vnode)
</script>
</html>