Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
819127e8
提交
819127e8
authored
11月 27, 2020
作者:
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fix descriotions title not work
上级
b71e4e51
隐藏空白字符变更
内嵌
并排
正在显示
4 个修改的文件
包含
55 行增加
和
88 行删除
+55
-88
index.ts
src/components/Description/index.ts
+6
-1
index.tsx
src/components/Description/src/index.tsx
+38
-36
props.ts
src/components/Description/src/props.ts
+5
-0
types.ts
src/components/Description/src/types.ts
+6
-51
没有找到文件。
src/components/Description/index.ts
浏览文件 @
819127e8
export
{
default
as
Description
}
from
'./src/index'
;
import
DescriptionLib
from
'./src/index'
;
import
{
withInstall
}
from
'../util'
;
export
*
from
'./src/types'
;
export
{
useDescription
}
from
'./src/useDescription'
;
export
const
Description
=
withInstall
(
DescriptionLib
);
src/components/Description/src/index.tsx
浏览文件 @
819127e8
...
...
@@ -2,7 +2,9 @@ import type { DescOptions, DescInstance, DescItem } from './types';
import
{
defineComponent
,
computed
,
ref
,
unref
,
CSSProperties
}
from
'vue'
;
import
{
Descriptions
}
from
'ant-design-vue'
;
import
{
DescriptionsProps
}
from
'ant-design-vue/es/descriptions/index'
;
import
{
CollapseContainer
,
CollapseContainerOptions
}
from
'/@/components/Container/index'
;
import
descProps
from
'./props'
;
import
{
isFunction
}
from
'/@/utils/is'
;
...
...
@@ -17,29 +19,27 @@ export default defineComponent({
emits
:
[
'register'
],
setup
(
props
,
{
attrs
,
slots
,
emit
})
{
const
propsRef
=
ref
<
Partial
<
DescOptions
>
|
null
>
(
null
);
// Custom title component: get title
const
getMergeProps
=
computed
(()
=>
{
return
{
...
props
,
...
unref
(
propsRef
),
};
...
(
unref
(
propsRef
)
as
any
),
}
as
DescOptions
;
});
const
getProps
=
computed
(()
=>
{
const
opt
=
{
...
props
,
...(
unref
(
propsRef
)
||
{}),
...
unref
(
getMergeProps
),
title
:
undefined
,
};
return
opt
;
return
opt
as
DescOptions
;
});
/**
* @description: Whether to setting title
*/
const
useWrapper
=
computed
(()
=>
{
return
!!
unref
(
getMergeProps
).
title
;
});
const
useWrapper
=
computed
(()
=>
!!
unref
(
getMergeProps
).
title
);
/**
* @description: Get configuration Collapse
...
...
@@ -54,6 +54,10 @@ export default defineComponent({
}
);
const
getDescriptionsProps
=
computed
(()
=>
{
return
{
...
attrs
,
...
unref
(
getProps
)
}
as
DescriptionsProps
;
});
/**
* @description:设置desc
*/
...
...
@@ -63,12 +67,6 @@ export default defineComponent({
propsRef
.
value
=
cloneDeep
(
mergeProps
);
}
const
methods
:
DescInstance
=
{
setDescProps
,
};
emit
(
'register'
,
methods
);
// Prevent line breaks
function
renderLabel
({
label
,
labelMinWidth
,
labelStyle
}:
DescItem
)
{
if
(
!
labelStyle
&&
!
labelMinWidth
)
{
...
...
@@ -87,33 +85,27 @@ export default defineComponent({
const
{
schema
}
=
unref
(
getProps
);
return
unref
(
schema
).
map
((
item
)
=>
{
const
{
render
,
field
,
span
,
show
,
contentMinWidth
}
=
item
;
const
{
data
}
=
unref
(
getProps
)
as
any
;
const
{
data
}
=
unref
(
getProps
)
as
DescOptions
;
if
(
show
&&
isFunction
(
show
)
&&
!
show
(
data
))
{
return
null
;
}
const
getContent
=
()
=>
isFunction
(
render
)
?
render
(
data
&&
data
[
field
],
data
)
:
unref
(
data
)
&&
unref
(
data
)[
field
];
isFunction
(
render
)
?
render
(
data
?.[
field
],
data
)
:
unref
(
data
)
&&
unref
(
data
)[
field
];
const
width
=
contentMinWidth
;
return
(
<
Descriptions
.
Item
label=
{
renderLabel
(
item
)
}
key=
{
field
}
span=
{
span
}
>
{
()
=>
contentMinWidth
?
(
<
div
style=
{
{
minWidth
:
`${width}px`
,
}
}
>
{
getContent
()
}
</
div
>
)
:
(
getContent
()
)
}
{
()
=>
{
if
(
!
contentMinWidth
)
{
return
getContent
();
}
const
style
:
CSSProperties
=
{
minWidth
:
`${width}px`
,
};
return
<
div
style=
{
style
}
>
{
getContent
()
}
</
div
>;
}
}
</
Descriptions
.
Item
>
);
});
...
...
@@ -121,7 +113,7 @@ export default defineComponent({
const
renderDesc
=
()
=>
{
return
(
<
Descriptions
class=
{
`${prefixCls}`
}
{
...
{
...
attrs
,
...
(
unref
(
getProps
)
as
any
)
}
}
>
<
Descriptions
class=
{
`${prefixCls}`
}
{
...
(
unref
(
getDescriptionsProps
)
as
any
)
}
>
{
()
=>
renderItem
()
}
</
Descriptions
>
);
...
...
@@ -130,19 +122,29 @@ export default defineComponent({
const
renderContainer
=
()
=>
{
const
content
=
props
.
useCollapse
?
renderDesc
()
:
<
div
>
{
renderDesc
()
}
</
div
>;
// Reduce the dom level
const
{
title
,
canExpand
,
helpMessage
}
=
unref
(
getCollapseOptions
);
return
props
.
useCollapse
?
(
if
(
!
props
.
useCollapse
)
{
return
content
;
}
const
{
canExpand
,
helpMessage
}
=
unref
(
getCollapseOptions
);
const
{
title
}
=
unref
(
getMergeProps
);
return
(
<
CollapseContainer
title=
{
title
}
canExpan=
{
canExpand
}
helpMessage=
{
helpMessage
}
>
{
{
default
:
()
=>
content
,
action
:
()
=>
getSlot
(
slots
,
'action'
),
}
}
</
CollapseContainer
>
)
:
(
content
);
};
const
methods
:
DescInstance
=
{
setDescProps
,
};
emit
(
'register'
,
methods
);
return
()
=>
(
unref
(
useWrapper
)
?
renderContainer
()
:
renderDesc
());
},
});
src/components/Description/src/props.ts
浏览文件 @
819127e8
...
...
@@ -5,15 +5,20 @@ import type { DescItem } from './types';
import
{
propTypes
}
from
'/@/utils/propTypes'
;
export
default
{
useCollapse
:
propTypes
.
bool
.
def
(
true
),
title
:
propTypes
.
string
.
def
(
''
),
size
:
propTypes
.
oneOf
([
'small'
,
'default'
,
'middle'
,
undefined
]).
def
(
'small'
),
bordered
:
propTypes
.
bool
.
def
(
true
),
column
:
{
type
:
[
Number
,
Object
]
as
PropType
<
number
|
any
>
,
default
:
()
=>
{
return
{
xxl
:
4
,
xl
:
3
,
lg
:
3
,
md
:
3
,
sm
:
2
,
xs
:
1
};
},
},
collapseOptions
:
{
type
:
Object
as
PropType
<
CollapseContainerOptions
>
,
default
:
null
,
...
...
src/components/Description/src/types.ts
浏览文件 @
819127e8
import
type
{
VNode
}
from
'vue'
;
import
type
{
VNode
,
CSSProperties
}
from
'vue'
;
import
type
{
CollapseContainerOptions
}
from
'/@/components/Container/index'
;
import
type
{
DescriptionsProps
}
from
'ant-design-vue/es/descriptions/index'
;
export
interface
DescItem
{
labelMinWidth
?:
number
;
contentMinWidth
?:
number
;
labelStyle
?:
any
;
labelStyle
?:
CSSProperties
;
field
:
string
;
label
:
any
;
label
:
string
|
VNode
|
JSX
.
Element
;
// Merge column
span
?:
number
;
show
?:
(...
arg
:
any
)
=>
boolean
;
// render
render
?:
(
val
:
string
,
data
:
any
)
=>
VNode
|
undefined
|
Element
|
string
|
number
;
render
?:
(
val
:
string
,
data
:
any
)
=>
VNode
|
undefined
|
JSX
.
Element
|
Element
|
string
|
number
;
}
export
interface
DescOptions
{
export
interface
DescOptions
extends
DescriptionsProps
{
// Whether to include the collapse component
useCollapse
?:
boolean
;
/**
...
...
@@ -35,52 +36,6 @@ export interface DescOptions {
* @type CollapseContainerOptions
*/
collapseOptions
?:
CollapseContainerOptions
;
/**
* descriptions size type
* @default 'default'
* @type string
*/
size
?:
'default'
|
'middle'
|
'small'
;
/**
* custom prefixCls
* @type string
*/
prefixCls
?:
string
;
/**
* whether descriptions have border
* @default false
* @type boolean
*/
bordered
?:
boolean
;
/**
* custom title
* @type any
*/
title
?:
any
;
/**
* the number of descriptionsitem in one line
* @default 3
* @type number | object
*/
column
?:
number
|
object
;
/**
* descriptions layout
* @default 'horizontal'
* @type string
*/
layout
?:
'horizontal'
|
'vertical'
;
/**
* whether have colon in descriptionsitem
* @default true
* @type boolean
*/
colon
?:
boolean
;
}
export
interface
DescInstance
{
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论