提交 d33db258 编写于 作者: D Drjnigfubo

Merge branch 'next' of https://github.com/jdf2e/nutui into next

{
"name": "@nutui/nutui",
"version": "3.3.2",
"version": "3.3.3-beta.0",
"description": "京东风格的轻量级移动端 Vue2、Vue3 组件库(支持小程序开发)",
"main": "dist/nutui.umd.js",
"module": "dist/nutui.es.js",
......
{
"name": "@nutui/nutui-taro",
"version": "3.3.2",
"version": "3.3.3-beta.0",
"description": "京东风格的轻量级移动端 Vue2、Vue3 组件库(支持小程序开发)",
"main": "dist/nutui.umd.cjs",
"module": "dist/nutui.es.js",
......
{
"name": "@nutui/nutui",
"version": "3.3.2",
"version": "3.3.3-beta.0",
"description": "京东风格的轻量级移动端 Vue2、Vue3 组件库",
"main": "dist/nutui.umd.cjs",
"module": "dist/nutui.es.js",
......
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'));
});
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
);
};
}
......
......@@ -60,10 +60,12 @@ 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 |
| 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
......
......@@ -60,10 +60,12 @@ app.use(ConfigProvider);
### Props
| 参数 | 说明 | 类型 | 默认值 |
|-------|--------------------------------------------------|--------|--------|
| theme | 主题风格,设置为 `dark` 来开启深色模式,全局生效 | String | - |
| tag | 根节点对应的 HTML 标签名 | String | div |
| 参数 | 说明 | 类型 | 默认值 |
|-----------------|-------------------------------------------------|--------|------------------|
| theme | 主题风格,设置为 `dark` 来开启深色模式,全局生效 | String | - |
| tag | 根节点对应的 HTML 标签名 | String | div |
| font-class-name | 自定义 icon 字体基础类名 | String | `nutui-iconfont` |
| class-prefix | 自定义 icon 类名前缀,用于使用自定义图标 | String | `nut-icon` |
### 暗黑模式适配进度
......
......@@ -106,7 +106,7 @@ const useComponent = (touchable: Boolean = true) => {
const touch = useTouch();
const touchMethods = {
onTouchStart(event: Event) {
if (!props.touchable) return;
if (!props.touchable || props.readonly) return;
touch.start(event);
},
onTouchMove(event: Event) {
......
<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.
先完成此消息的编辑!
想要评论请 注册