Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
najiu-admin-template
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
najiu-frontend
najiu-admin-template
Commits
819127e8
Commit
819127e8
authored
Nov 27, 2020
by
vben
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: fix descriotions title not work
parent
b71e4e51
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
55 additions
and
88 deletions
+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
No files found.
src/components/Description/index.ts
View file @
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
View file @
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
View file @
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
View file @
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
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment