Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
啊嘞嘞EC
vue-vben-admin
提交
819127e8
V
vue-vben-admin
项目概览
啊嘞嘞EC
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
819127e8
编写于
11月 27, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: fix descriotions title not work
上级
b71e4e51
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
55 addition
and
88 deletion
+55
-88
src/components/Description/index.ts
src/components/Description/index.ts
+6
-1
src/components/Description/src/index.tsx
src/components/Description/src/index.tsx
+38
-36
src/components/Description/src/props.ts
src/components/Description/src/props.ts
+5
-0
src/components/Description/src/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
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录