Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
ce93e46f
提交
ce93e46f
authored
3月 04, 2021
作者:
Vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(description): ensure that props respond
上级
ee5fb223
隐藏空白字符变更
内嵌
并排
正在显示
8 个修改的文件
包含
160 行增加
和
154 行删除
+160
-154
README.md
README.md
+2
-2
README.zh-CN.md
README.zh-CN.md
+1
-1
index.ts
src/components/Description/index.ts
+1
-1
index.vue
src/components/Description/src/index.vue
+152
-143
props.ts
src/components/Description/src/props.ts
+0
-6
PageFooter.vue
src/components/Page/src/PageFooter.vue
+1
-0
PageWrapper.vue
src/components/Page/src/PageWrapper.vue
+1
-0
index.vue
src/views/demo/comp/desc/index.vue
+2
-1
没有找到文件。
README.md
浏览文件 @
ce93e46f
...
@@ -148,7 +148,7 @@ Support modern browsers, not IE
...
@@ -148,7 +148,7 @@ Support modern browsers, not IE
## Maintainer
## Maintainer
[
@Vben
](
https://github.com/anncwb
)
。
[
@Vben
](
https://github.com/anncwb
)
## Donate
## Donate
...
@@ -156,7 +156,7 @@ If you think this project is helpful to you, you can help the author buy a cup o
...
@@ -156,7 +156,7 @@ If you think this project is helpful to you, you can help the author buy a cup o


[
Paypal Me
](
https://www.paypal.com/paypalme/cvvben
)
<a
style=
"display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;"
href=
"https://www.paypal.com/paypalme/cvvben"
>
Paypal Me
</a>
## Discord
## Discord
...
...
README.zh-CN.md
浏览文件 @
ce93e46f
...
@@ -156,7 +156,7 @@ yarn build
...
@@ -156,7 +156,7 @@ yarn build


[
Paypal Me
](
https://www.paypal.com/paypalme/cvvben
)
<a
style=
"display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;"
href=
"https://www.paypal.com/paypalme/cvvben"
>
Paypal Me
</a>
## 交流
## 交流
...
...
src/components/Description/index.ts
浏览文件 @
ce93e46f
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
// import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
// export const Description = createAsyncComponent(() => import('./src/index'));
// export const Description = createAsyncComponent(() => import('./src/index'));
import
Description
from
'./src/index'
;
import
Description
from
'./src/index
.vue
'
;
export
{
Description
};
export
{
Description
};
export
*
from
'./src/types'
;
export
*
from
'./src/types'
;
...
...
src/components/Description/src/index.
tsx
→
src/components/Description/src/index.
vue
浏览文件 @
ce93e46f
import
type
{
DescOptions
,
DescInstance
,
DescItem
}
from
'./types'
;
<
script
lang=
"tsx"
>
import
type
{
DescOptions
,
DescInstance
,
DescItem
}
from
'./types'
;
import
{
defineComponent
,
computed
,
ref
,
unref
,
CSSProperties
}
from
'vue'
;
import
type
{
DescriptionsProps
}
from
'ant-design-vue/es/descriptions/index'
;
import
{
get
}
from
'lodash-es'
;
import
type
{
CSSProperties
}
from
'vue'
;
import
{
Descriptions
}
from
'ant-design-vue'
;
import
type
{
CollapseContainerOptions
}
from
'/@/components/Container/index'
;
import
{
DescriptionsProps
}
from
'ant-design-vue/es/descriptions/index'
;
import
{
CollapseContainer
,
CollapseContainerOptions
}
from
'/@/components/Container/index'
;
import
{
defineComponent
,
computed
,
ref
,
unref
}
from
'vue'
;
import
{
get
}
from
'lodash-es'
;
import
descProps
from
'./props'
;
import
{
Descriptions
}
from
'ant-design-vue'
;
import
{
CollapseContainer
}
from
'/@/components/Container/index'
;
import
{
isFunction
}
from
'/@/utils/is'
;
import
{
getSlot
}
from
'/@/utils/helper/tsxHelper'
;
import
{
useDesign
}
from
'/@/hooks/web/useDesign'
;
import
{
cloneDeep
}
from
'lodash-es'
;
import
{
deepMerge
}
from
'/@/utils'
;
import
{
isFunction
}
from
'/@/utils/is'
;
import
{
getSlot
}
from
'/@/utils/helper/tsxHelper'
;
const
prefixCls
=
'description'
;
import
{
cloneDeep
}
from
'lodash-es'
;
export
default
defineComponent
({
import
{
deepMerge
}
from
'/@/utils'
;
name
:
'Description'
,
props
:
descProps
,
import
descProps
from
'./props'
;
emits
:
[
'register'
],
import
{
useAttrs
}
from
'/@/hooks/core/useAttrs'
;
setup
(
props
,
{
attrs
,
slots
,
emit
})
{
const
propsRef
=
ref
<
Partial
<
DescOptions
>
|
null
>
(
null
);
export
default
defineComponent
({
name
:
'Description'
,
// Custom title component: get title
props
:
descProps
,
const
getMergeProps
=
computed
(()
=>
{
emits
:
[
'register'
],
return
{
setup
(
props
,
{
slots
,
emit
})
{
...
props
,
const
propsRef
=
ref
<
Partial
<
DescOptions
>
|
null
>
(
null
);
...(
unref
(
propsRef
)
as
Recordable
),
}
as
DescOptions
;
const
{
prefixCls
}
=
useDesign
(
'description'
);
});
const
attrs
=
useAttrs
();
const
getProps
=
computed
(()
=>
{
// Custom title component: get title
const
opt
=
{
const
getMergeProps
=
computed
(()
=>
{
...
unref
(
getMergeProps
),
title
:
undefined
,
};
return
opt
as
DescOptions
;
});
/**
* @description: Whether to setting title
*/
const
useWrapper
=
computed
(()
=>
!!
unref
(
getMergeProps
).
title
);
/**
* @description: Get configuration Collapse
*/
const
getCollapseOptions
=
computed
(
():
CollapseContainerOptions
=>
{
return
{
return
{
// Cannot be expanded by default
...
props
,
canExpand
:
false
,
...(
unref
(
propsRef
)
as
Recordable
),
...
unref
(
getProps
).
collapseOptions
,
}
as
DescOptions
;
});
const
getProps
=
computed
(()
=>
{
const
opt
=
{
...
unref
(
getMergeProps
),
title
:
undefined
,
};
};
}
return
opt
as
DescOptions
;
);
});
const
getDescriptionsProps
=
computed
(()
=>
{
/**
return
{
...
attrs
,
...
unref
(
getProps
)
}
as
DescriptionsProps
;
* @description: Whether to setting title
});
*/
const
useWrapper
=
computed
(()
=>
!!
unref
(
getMergeProps
).
title
);
/**
* @description:设置desc
/**
*/
* @description: Get configuration Collapse
function
setDescProps
(
descProps
:
Partial
<
DescOptions
>
):
void
{
*/
// Keep the last setDrawerProps
const
getCollapseOptions
=
computed
(
const
mergeProps
=
deepMerge
(
unref
(
propsRef
)
||
{},
descProps
);
():
CollapseContainerOptions
=>
{
propsRef
.
value
=
cloneDeep
(
mergeProps
);
return
{
}
// Cannot be expanded by default
canExpand
:
false
,
// Prevent line breaks
...
unref
(
getProps
).
collapseOptions
,
function
renderLabel
({
label
,
labelMinWidth
,
labelStyle
}:
DescItem
)
{
};
if
(
!
labelStyle
&&
!
labelMinWidth
)
{
}
return
label
;
);
}
const
labelStyles
:
CSSProperties
=
{
const
getDescriptionsProps
=
computed
(()
=>
{
...
labelStyle
,
return
{
...
unref
(
attrs
),
...
unref
(
getProps
)
}
as
DescriptionsProps
;
});
minWidth
:
`
${
labelMinWidth
}
px `
,
/**
};
* @description:设置desc
return
<
div
style=
{
labelStyles
}
>
{
label
}
</
div
>;
*/
}
function
setDescProps
(
descProps
:
Partial
<
DescOptions
>
):
void
{
// Keep the last setDrawerProps
function
renderItem
()
{
propsRef
.
value
=
{
...(
unref
(
propsRef
)
as
Recordable
),
...
descProps
}
as
Recordable
;
const
{
schema
,
data
}
=
unref
(
getProps
);
}
return
unref
(
schema
)
.
map
((
item
)
=>
{
const
{
render
,
field
,
span
,
show
,
contentMinWidth
}
=
item
;
if
(
show
&&
isFunction
(
show
)
&&
!
show
(
data
))
{
return
null
;
}
const
getContent
=
()
=>
{
const
_data
=
unref
(
data
);
const
getField
=
get
(
_data
,
field
);
return
isFunction
(
render
)
?
render
(
getField
,
_data
)
:
getField
??
''
;
};
const
width
=
contentMinWidth
;
// Prevent line breaks
return
(
function
renderLabel
({
label
,
labelMinWidth
,
labelStyle
}:
DescItem
)
{
<
Descriptions
.
Item
label=
{
renderLabel
(
item
)
}
key=
{
field
}
span=
{
span
}
>
if
(
!
labelStyle
&&
!
labelMinWidth
)
{
{
()
=>
{
return
label
;
if
(
!
contentMinWidth
)
{
}
return
getContent
();
}
const
style
:
CSSProperties
=
{
minWidth
:
`${width}px`
,
};
return
<
div
style=
{
style
}
>
{
getContent
()
}
</
div
>;
}
}
</
Descriptions
.
Item
>
);
})
.
filter
((
item
)
=>
!!
item
);
}
const
renderDesc
=
()
=>
{
return
(
<
Descriptions
class=
{
`${prefixCls}`
}
{
...
(
unref
(
getDescriptionsProps
)
as
any
)}
>
{
renderItem
()
}
</
Descriptions
>
);
};
const
renderContainer
=
()
=>
{
const
labelStyles
:
CSSProperties
=
{
const
content
=
props
.
useCollapse
?
renderDesc
()
:
<
div
>
{
renderDesc
()
}
</
div
>;
...
labelStyle
,
// Reduce the dom level
if
(
!
props
.
useCollapse
)
{
minWidth
:
`
${
labelMinWidth
}
px `
,
return
content
;
};
return
<
div
style
=
{
labelStyles
}
>
{
label
}
<
/div>
;
}
}
const
{
canExpand
,
helpMessage
}
=
unref
(
getCollapseOptions
);
function
renderItem
()
{
const
{
title
}
=
unref
(
getMergeProps
);
const
{
schema
,
data
}
=
unref
(
getProps
);
return
unref
(
schema
)
.
map
((
item
)
=>
{
const
{
render
,
field
,
span
,
show
,
contentMinWidth
}
=
item
;
if
(
show
&&
isFunction
(
show
)
&&
!
show
(
data
))
{
return
null
;
}
const
getContent
=
()
=>
{
const
_data
=
unref
(
getProps
)?.
data
;
if
(
!
_data
)
return
null
;
const
getField
=
get
(
_data
,
field
);
return
isFunction
(
render
)
?
render
(
getField
,
_data
)
:
getField
??
''
;
};
const
width
=
contentMinWidth
;
return
(
<
Descriptions
.
Item
label
=
{
renderLabel
(
item
)}
key
=
{
field
}
span
=
{
span
}
>
{()
=>
{
if
(
!
contentMinWidth
)
{
return
getContent
();
}
const
style
:
CSSProperties
=
{
minWidth
:
`
${
width
}
px`
,
};
return
<
div
style
=
{
style
}
>
{
getContent
()}
<
/div>
;
}}
<
/Descriptions.Item
>
);
})
.
filter
((
item
)
=>
!!
item
);
}
return
(
const
renderDesc
=
()
=>
{
<
CollapseContainer
title=
{
title
}
canExpan=
{
canExpand
}
helpMessage=
{
helpMessage
}
>
return
(
{
{
<
Descriptions
class
=
{
`
${
prefixCls
}
`
}
{...(
unref
(
getDescriptionsProps
)
as
any
)}
>
default
:
()
=>
content
,
{
renderItem
()}
action
:
()
=>
getSlot
(
slots
,
'action'
),
<
/Descriptions
>
}
}
);
</
CollapseContainer
>
};
);
};
const
renderContainer
=
()
=>
{
const
content
=
props
.
useCollapse
?
renderDesc
()
:
<
div
>
{
renderDesc
()}
<
/div>
;
// Reduce the dom level
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
>
);
};
const
methods
:
DescInstance
=
{
const
methods
:
DescInstance
=
{
setDescProps
,
setDescProps
,
};
};
emit
(
'register'
,
methods
);
emit
(
'register'
,
methods
);
return
()
=>
(
unref
(
useWrapper
)
?
renderContainer
()
:
renderDesc
());
return
()
=>
(
unref
(
useWrapper
)
?
renderContainer
()
:
renderDesc
());
},
},
});
});
</
script
>
src/components/Description/src/props.ts
浏览文件 @
ce93e46f
import
type
{
PropType
}
from
'vue'
;
import
type
{
PropType
}
from
'vue'
;
import
type
{
CollapseContainerOptions
}
from
'/@/components/Container'
;
import
type
{
CollapseContainerOptions
}
from
'/@/components/Container'
;
import
type
{
DescItem
}
from
'./types'
;
import
type
{
DescItem
}
from
'./types'
;
import
{
propTypes
}
from
'/@/utils/propTypes'
;
import
{
propTypes
}
from
'/@/utils/propTypes'
;
export
default
{
export
default
{
useCollapse
:
propTypes
.
bool
.
def
(
true
),
useCollapse
:
propTypes
.
bool
.
def
(
true
),
title
:
propTypes
.
string
.
def
(
''
),
title
:
propTypes
.
string
.
def
(
''
),
size
:
propTypes
.
oneOf
([
'small'
,
'default'
,
'middle'
,
undefined
]).
def
(
'small'
),
size
:
propTypes
.
oneOf
([
'small'
,
'default'
,
'middle'
,
undefined
]).
def
(
'small'
),
bordered
:
propTypes
.
bool
.
def
(
true
),
bordered
:
propTypes
.
bool
.
def
(
true
),
column
:
{
column
:
{
type
:
[
Number
,
Object
]
as
PropType
<
number
|
Recordable
>
,
type
:
[
Number
,
Object
]
as
PropType
<
number
|
Recordable
>
,
default
:
()
=>
{
default
:
()
=>
{
return
{
xxl
:
4
,
xl
:
3
,
lg
:
3
,
md
:
3
,
sm
:
2
,
xs
:
1
};
return
{
xxl
:
4
,
xl
:
3
,
lg
:
3
,
md
:
3
,
sm
:
2
,
xs
:
1
};
},
},
},
},
collapseOptions
:
{
collapseOptions
:
{
type
:
Object
as
PropType
<
CollapseContainerOptions
>
,
type
:
Object
as
PropType
<
CollapseContainerOptions
>
,
default
:
null
,
default
:
null
,
...
...
src/components/Page/src/PageFooter.vue
浏览文件 @
ce93e46f
...
@@ -17,6 +17,7 @@
...
@@ -17,6 +17,7 @@
export
default
defineComponent
({
export
default
defineComponent
({
name
:
'PageFooter'
,
name
:
'PageFooter'
,
inheritAttrs
:
false
,
setup
()
{
setup
()
{
const
{
prefixCls
}
=
useDesign
(
'page-footer'
);
const
{
prefixCls
}
=
useDesign
(
'page-footer'
);
const
{
getCalcContentWidth
}
=
useMenuSetting
();
const
{
getCalcContentWidth
}
=
useMenuSetting
();
...
...
src/components/Page/src/PageWrapper.vue
浏览文件 @
ce93e46f
...
@@ -37,6 +37,7 @@
...
@@ -37,6 +37,7 @@
import
{
PageHeader
}
from
'ant-design-vue'
;
import
{
PageHeader
}
from
'ant-design-vue'
;
export
default
defineComponent
({
export
default
defineComponent
({
name
:
'PageWrapper'
,
name
:
'PageWrapper'
,
inheritAttrs
:
false
,
components
:
{
PageFooter
,
PageHeader
},
components
:
{
PageFooter
,
PageHeader
},
props
:
{
props
:
{
dense
:
propTypes
.
bool
,
dense
:
propTypes
.
bool
,
...
...
src/views/demo/comp/desc/index.vue
浏览文件 @
ce93e46f
...
@@ -72,12 +72,13 @@
...
@@ -72,12 +72,13 @@
schema
:
schema
,
schema
:
schema
,
});
});
const
[
register1
]
=
useDescription
({
const
[
register1
,
{
setDescProps
}
]
=
useDescription
({
title
:
'无边框'
,
title
:
'无边框'
,
bordered
:
false
,
bordered
:
false
,
data
:
mockData
,
data
:
mockData
,
schema
:
schema
,
schema
:
schema
,
});
});
return
{
mockData
,
schema
,
register
,
register1
};
return
{
mockData
,
schema
,
register
,
register1
};
},
},
});
});
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论