Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
1506f648
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
1506f648
编写于
1月 17, 2023
作者:
weixin_43230406
提交者:
GitHub
1月 17, 2023
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(config-provider): 覆盖nut-icon属性 (#2016)
上级
98d27f70
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
86 addition
and
15 deletion
+86
-15
src/packages/__VUE/configprovider/__tests__/configprovider.spec.ts
...ges/__VUE/configprovider/__tests__/configprovider.spec.ts
+28
-2
src/packages/__VUE/configprovider/common.ts
src/packages/__VUE/configprovider/common.ts
+42
-3
src/packages/__VUE/configprovider/doc.en-US.md
src/packages/__VUE/configprovider/doc.en-US.md
+6
-4
src/packages/__VUE/configprovider/doc.md
src/packages/__VUE/configprovider/doc.md
+6
-4
src/sites/mobile-taro/vue/src/basic/pages/configprovider/index.vue
.../mobile-taro/vue/src/basic/pages/configprovider/index.vue
+4
-2
未找到文件。
src/packages/__VUE/configprovider/__tests__/configprovider.spec.ts
浏览文件 @
1506f648
import
{
mount
}
from
'
@vue/test-utils
'
;
import
{
config
,
mount
}
from
'
@vue/test-utils
'
;
import
ConfigProvider
from
'
../index.vue
'
;
import
NutIcon
from
'
../../icon/index.vue
'
;
import
{
h
}
from
'
vue
'
;
test
(
'
prop theme & tag
'
,
async
()
=>
{
// 所有的测试用例之前执行一次
beforeAll
(()
=>
{
config
.
global
.
components
=
{
NutIcon
};
});
test
(
'
ConfigProvider prop: theme & tag
'
,
async
()
=>
{
const
wrapper
=
mount
(
ConfigProvider
,
{
props
:
{
theme
:
'
dark
'
,
...
...
@@ -11,3 +20,20 @@ test('prop theme & tag', async () => {
const
html
=
expect
(
wrapper
.
html
());
expect
(
wrapper
.
find
<
HTMLElement
>
(
'
.nut-theme-dark
'
));
});
test
(
'
ConfigProvider prop: fontClassName & classPrefix
'
,
async
()
=>
{
const
wrapper
=
mount
(
ConfigProvider
,
{
props
:
{
theme
:
'
dark
'
,
tag
:
'
div
'
,
fontClassName
:
'
iconfont
'
,
classPrefix
:
'
icon
'
},
slots
:
{
default
:
h
(
NutIcon
,
{
name
:
'
close
'
})
}
});
expect
(
wrapper
.
find
<
HTMLElement
>
(
'
.iconfont.icon-close
'
));
});
src/packages/__VUE/configprovider/common.ts
浏览文件 @
1506f648
import
{
h
,
PropType
}
from
'
vue
'
;
import
{
isObject
}
from
'
@/packages/utils/util
'
;
import
{
h
,
PropType
,
VNode
}
from
'
vue
'
;
export
const
component
=
{
props
:
{
theme
:
{
type
:
String
,
default
:
''
},
tag
:
{
type
:
String
as
PropType
<
keyof
HTMLElementTagNameMap
>
,
default
:
'
div
'
}
tag
:
{
type
:
String
as
PropType
<
keyof
HTMLElementTagNameMap
>
,
default
:
'
div
'
},
classPrefix
:
{
type
:
String
,
default
:
'
nut-icon
'
},
fontClassName
:
{
type
:
String
,
default
:
'
nutui-iconfont
'
}
},
setup
(
props
:
any
,
{
slots
}:
any
)
{
// 覆盖默认插槽的属性
const
overDefaultSlotProp
=
(
vnodes
:
VNode
[])
=>
{
if
(
!
vnodes
)
{
return
;
}
vnodes
.
forEach
((
vnode
:
VNode
)
=>
{
let
type
=
vnode
.
type
;
type
=
(
type
as
any
).
name
||
type
;
if
(
!
vnode
.
props
)
{
vnode
.
props
=
{};
}
if
(
type
==
'
nut-icon
'
)
{
vnode
.
props
[
'
fontClassName
'
]
=
vnode
.
props
[
'
font-class-name
'
]
||
props
.
fontClassName
;
vnode
.
props
[
'
classPrefix
'
]
=
vnode
.
props
[
'
class-prefix
'
]
||
props
.
classPrefix
;
}
if
(
Array
.
isArray
(
vnode
.
children
)
&&
vnode
.
children
?.
length
)
{
overDefaultSlotProp
(
vnode
.
children
as
VNode
[]);
}
else
if
(
isObject
(
vnode
.
children
)
&&
Object
.
keys
(
vnode
.
children
))
{
let
children
=
vnode
.
children
as
any
;
for
(
const
key
in
children
)
{
if
(
key
===
'
_
'
)
{
break
;
}
const
childrenVNode
=
children
[
key
]?.();
overDefaultSlotProp
(
childrenVNode
);
children
[
key
]
=
()
=>
childrenVNode
;
}
}
});
};
return
()
=>
{
const
defaultSlots
=
slots
.
default
?.();
overDefaultSlotProp
(
defaultSlots
);
return
h
(
props
.
tag
,
{
class
:
`nut-theme-
${
props
.
theme
}
`
},
slots
.
default
?.()
defaultSlots
);
};
}
...
...
src/packages/__VUE/configprovider/doc.en-US.md
浏览文件 @
1506f648
...
...
@@ -61,9 +61,11 @@ Dark mode takes effect globally, making all NutUI components on the page dark.
### Props
| Attribute | Description | Type | Default |
|-----------
|----------------------------------------------------------------------|--------|
---------|
|-----------
------|----------------------------------------------------------------------|--------|---------
---------|
| theme | Theme style, set to
`dark`
to enable dark mode, take effect globally | String | - |
| tag | HTML Tag of root element | String | div |
| font-class-name | Custom icon font base class name | String |
`nutui-iconfont`
|
| class-prefix | Custom icon class name prefix for using custom icons | String |
`nut-icon`
|
## Dark mode adaptation progress
...
...
src/packages/__VUE/configprovider/doc.md
浏览文件 @
1506f648
...
...
@@ -61,9 +61,11 @@ app.use(ConfigProvider);
### Props
| 参数 | 说明 | 类型 | 默认值 |
|-------
|--------------------------------------------------|--------|
--------|
|-------
----------|-------------------------------------------------|--------|----------
--------|
| theme | 主题风格,设置为
`dark`
来开启深色模式,全局生效 | String | - |
| tag | 根节点对应的 HTML 标签名 | String | div |
| font-class-name | 自定义 icon 字体基础类名 | String |
`nutui-iconfont`
|
| class-prefix | 自定义 icon 类名前缀,用于使用自定义图标 | String |
`nut-icon`
|
### 暗黑模式适配进度
...
...
src/sites/mobile-taro/vue/src/basic/pages/configprovider/index.vue
浏览文件 @
1506f648
<
template
>
<div
class=
"demo"
>
<h2>
基础使用
</h2>
<nut-config-provider
:theme=
"theme"
>
<nut-config-provider
:theme=
"theme"
font-class-name=
"iconfont"
class-prefix=
"icon"
>
<nut-cell
title=
"切换暗黑"
>
<template
v-slot:link
>
<nut-switch
v-model=
"switchChecked"
@
change=
"switchChange"
/>
</
template
>
</nut-cell>
<nut-cell
title=
"我是标题"
sub-title=
"副标题描述"
desc=
"描述文字"
></nut-cell>
<nut-cell
title=
"我是标题"
sub-title=
"副标题描述"
desc=
"描述文字"
>
</nut-cell>
<nut-icon
name=
"dongdong"
class-prefix=
"icon"
>
1
</nut-icon>
<nut-icon
font-class-name=
"nutui-iconfont"
class-prefix=
"nut-icon"
name=
"dongdong"
></nut-icon>
<nut-form>
<nut-form-item
label=
"开关"
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录