Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
一臭打代码的 aka 潘先生です
vue-vben-admin
提交
ce93e46f
V
vue-vben-admin
项目概览
一臭打代码的 aka 潘先生です
/
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,发现更多精彩内容 >>
提交
ce93e46f
编写于
3月 04, 2021
作者:
V
Vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(description): ensure that props respond
上级
ee5fb223
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
172 addition
and
166 deletion
+172
-166
README.md
README.md
+2
-2
README.zh-CN.md
README.zh-CN.md
+1
-1
src/components/Description/index.ts
src/components/Description/index.ts
+1
-1
src/components/Description/src/index.tsx
src/components/Description/src/index.tsx
+0
-155
src/components/Description/src/index.vue
src/components/Description/src/index.vue
+164
-0
src/components/Description/src/props.ts
src/components/Description/src/props.ts
+0
-6
src/components/Page/src/PageFooter.vue
src/components/Page/src/PageFooter.vue
+1
-0
src/components/Page/src/PageWrapper.vue
src/components/Page/src/PageWrapper.vue
+1
-0
src/views/demo/comp/desc/index.vue
src/views/demo/comp/desc/index.vue
+2
-1
未找到文件。
README.md
浏览文件 @
ce93e46f
...
...
@@ -148,7 +148,7 @@ Support modern browsers, not IE
## Maintainer
[
@Vben
](
https://github.com/anncwb
)
。
[
@Vben
](
https://github.com/anncwb
)
## Donate
...
...
@@ -156,7 +156,7 @@ If you think this project is helpful to you, you can help the author buy a cup o
![
donate
](
https://anncwb.github.io/anncwb/images/sponsor.png
)
[
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
...
...
README.zh-CN.md
浏览文件 @
ce93e46f
...
...
@@ -156,7 +156,7 @@ yarn build
![
donate
](
https://anncwb.github.io/anncwb/images/sponsor.png
)
[
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';
// export const Description = createAsyncComponent(() => import('./src/index'));
import
Description
from
'
./src/index
'
;
import
Description
from
'
./src/index
.vue
'
;
export
{
Description
};
export
*
from
'
./src/types
'
;
...
...
src/components/Description/src/index.tsx
已删除
100644 → 0
浏览文件 @
ee5fb223
import
type
{
DescOptions
,
DescInstance
,
DescItem
}
from
'
./types
'
;
import
{
defineComponent
,
computed
,
ref
,
unref
,
CSSProperties
}
from
'
vue
'
;
import
{
get
}
from
'
lodash-es
'
;
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
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
cloneDeep
}
from
'
lodash-es
'
;
import
{
deepMerge
}
from
'
/@/utils
'
;
const
prefixCls
=
'
description
'
;
export
default
defineComponent
({
name
:
'
Description
'
,
props
:
descProps
,
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
)
as
Recordable
),
}
as
DescOptions
;
});
const
getProps
=
computed
(()
=>
{
const
opt
=
{
...
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
{
// Cannot be expanded by default
canExpand
:
false
,
...
unref
(
getProps
).
collapseOptions
,
};
}
);
const
getDescriptionsProps
=
computed
(()
=>
{
return
{
...
attrs
,
...
unref
(
getProps
)
}
as
DescriptionsProps
;
});
/**
* @description:设置desc
*/
function
setDescProps
(
descProps
:
Partial
<
DescOptions
>
):
void
{
// Keep the last setDrawerProps
const
mergeProps
=
deepMerge
(
unref
(
propsRef
)
||
{},
descProps
);
propsRef
.
value
=
cloneDeep
(
mergeProps
);
}
// Prevent line breaks
function
renderLabel
({
label
,
labelMinWidth
,
labelStyle
}:
DescItem
)
{
if
(
!
labelStyle
&&
!
labelMinWidth
)
{
return
label
;
}
const
labelStyles
:
CSSProperties
=
{
...
labelStyle
,
minWidth
:
`
${
labelMinWidth
}
px `
,
};
return
<
div
style
=
{
labelStyles
}
>
{
label
}
</
div
>;
}
function
renderItem
()
{
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
;
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
);
}
const
renderDesc
=
()
=>
{
return
(
<
Descriptions
class
=
{
`
${
prefixCls
}
`
}
{
...(
unref
(
getDescriptionsProps
)
as
any
)
}
>
{
renderItem
()
}
</
Descriptions
>
);
};
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
=
{
setDescProps
,
};
emit
(
'
register
'
,
methods
);
return
()
=>
(
unref
(
useWrapper
)
?
renderContainer
()
:
renderDesc
());
},
});
src/components/Description/src/index.vue
0 → 100644
浏览文件 @
ce93e46f
<
script
lang=
"tsx"
>
import
type
{
DescOptions
,
DescInstance
,
DescItem
}
from
'
./types
'
;
import
type
{
DescriptionsProps
}
from
'
ant-design-vue/es/descriptions/index
'
;
import
type
{
CSSProperties
}
from
'
vue
'
;
import
type
{
CollapseContainerOptions
}
from
'
/@/components/Container/index
'
;
import
{
defineComponent
,
computed
,
ref
,
unref
}
from
'
vue
'
;
import
{
get
}
from
'
lodash-es
'
;
import
{
Descriptions
}
from
'
ant-design-vue
'
;
import
{
CollapseContainer
}
from
'
/@/components/Container/index
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
isFunction
}
from
'
/@/utils/is
'
;
import
{
getSlot
}
from
'
/@/utils/helper/tsxHelper
'
;
import
{
cloneDeep
}
from
'
lodash-es
'
;
import
{
deepMerge
}
from
'
/@/utils
'
;
import
descProps
from
'
./props
'
;
import
{
useAttrs
}
from
'
/@/hooks/core/useAttrs
'
;
export
default
defineComponent
({
name
:
'
Description
'
,
props
:
descProps
,
emits
:
[
'
register
'
],
setup
(
props
,
{
slots
,
emit
})
{
const
propsRef
=
ref
<
Partial
<
DescOptions
>
|
null
>
(
null
);
const
{
prefixCls
}
=
useDesign
(
'
description
'
);
const
attrs
=
useAttrs
();
// Custom title component: get title
const
getMergeProps
=
computed
(()
=>
{
return
{
...
props
,
...(
unref
(
propsRef
)
as
Recordable
),
}
as
DescOptions
;
});
const
getProps
=
computed
(()
=>
{
const
opt
=
{
...
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
{
// Cannot be expanded by default
canExpand
:
false
,
...
unref
(
getProps
).
collapseOptions
,
};
}
);
const
getDescriptionsProps
=
computed
(()
=>
{
return
{
...
unref
(
attrs
),
...
unref
(
getProps
)
}
as
DescriptionsProps
;
});
/**
* @description:设置desc
*/
function
setDescProps
(
descProps
:
Partial
<
DescOptions
>
):
void
{
// Keep the last setDrawerProps
propsRef
.
value
=
{
...(
unref
(
propsRef
)
as
Recordable
),
...
descProps
}
as
Recordable
;
}
// Prevent line breaks
function
renderLabel
({
label
,
labelMinWidth
,
labelStyle
}:
DescItem
)
{
if
(
!
labelStyle
&&
!
labelMinWidth
)
{
return
label
;
}
const
labelStyles
:
CSSProperties
=
{
...
labelStyle
,
minWidth
:
`
${
labelMinWidth
}
px `
,
};
return
<
div
style
=
{
labelStyles
}
>
{
label
}
<
/div>
;
}
function
renderItem
()
{
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
);
}
const
renderDesc
=
()
=>
{
return
(
<
Descriptions
class
=
{
`
${
prefixCls
}
`
}
{...(
unref
(
getDescriptionsProps
)
as
any
)}
>
{
renderItem
()}
<
/Descriptions
>
);
};
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
=
{
setDescProps
,
};
emit
(
'
register
'
,
methods
);
return
()
=>
(
unref
(
useWrapper
)
?
renderContainer
()
:
renderDesc
());
},
});
</
script
>
src/components/Description/src/props.ts
浏览文件 @
ce93e46f
import
type
{
PropType
}
from
'
vue
'
;
import
type
{
CollapseContainerOptions
}
from
'
/@/components/Container
'
;
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
|
Recordable
>
,
default
:
()
=>
{
return
{
xxl
:
4
,
xl
:
3
,
lg
:
3
,
md
:
3
,
sm
:
2
,
xs
:
1
};
},
},
collapseOptions
:
{
type
:
Object
as
PropType
<
CollapseContainerOptions
>
,
default
:
null
,
...
...
src/components/Page/src/PageFooter.vue
浏览文件 @
ce93e46f
...
...
@@ -17,6 +17,7 @@
export
default
defineComponent
({
name
:
'
PageFooter
'
,
inheritAttrs
:
false
,
setup
()
{
const
{
prefixCls
}
=
useDesign
(
'
page-footer
'
);
const
{
getCalcContentWidth
}
=
useMenuSetting
();
...
...
src/components/Page/src/PageWrapper.vue
浏览文件 @
ce93e46f
...
...
@@ -37,6 +37,7 @@
import
{
PageHeader
}
from
'
ant-design-vue
'
;
export
default
defineComponent
({
name
:
'
PageWrapper
'
,
inheritAttrs
:
false
,
components
:
{
PageFooter
,
PageHeader
},
props
:
{
dense
:
propTypes
.
bool
,
...
...
src/views/demo/comp/desc/index.vue
浏览文件 @
ce93e46f
...
...
@@ -72,12 +72,13 @@
schema
:
schema
,
});
const
[
register1
]
=
useDescription
({
const
[
register1
,
{
setDescProps
}
]
=
useDescription
({
title
:
'
无边框
'
,
bordered
:
false
,
data
:
mockData
,
schema
:
schema
,
});
return
{
mockData
,
schema
,
register
,
register1
};
},
});
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录