Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ChenSun1
vue-vben-admin
提交
c16be2c4
V
vue-vben-admin
项目概览
ChenSun1
/
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,体验更适合开发者的 AI 搜索 >>
提交
c16be2c4
编写于
7月 12, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(notice-list): add `pagination` support
为通知列表组件添加分页、超长自动省略、标题点击响应、标题删除线等功能 fixed: #894
上级
0f28e803
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
164 addition
and
18 deletion
+164
-18
CHANGELOG.zh_CN.md
CHANGELOG.zh_CN.md
+4
-0
src/layouts/default/header/components/notify/NoticeList.vue
src/layouts/default/header/components/notify/NoticeList.vue
+84
-9
src/layouts/default/header/components/notify/data.ts
src/layouts/default/header/components/notify/data.ts
+54
-1
src/layouts/default/header/components/notify/index.vue
src/layouts/default/header/components/notify/index.vue
+22
-8
未找到文件。
CHANGELOG.zh_CN.md
浏览文件 @
c16be2c4
### ✨ Features
-
**NoticeList**
添加分页、超长自动省略、标题点击事件、标题删除线等功能
### 🐛 Bug Fixes
-
**Table**
...
...
src/layouts/default/header/components/notify/NoticeList.vue
浏览文件 @
c16be2c4
<
template
>
<a-list
:class=
"prefixCls"
>
<template
v-for=
"item in
list
"
:key=
"item.id"
>
<a-list
:class=
"prefixCls"
bordered
:pagination=
"getPagination"
size=
"small"
>
<template
v-for=
"item in
getData
"
:key=
"item.id"
>
<a-list-item
class=
"list-item"
>
<a-list-item-meta>
<template
#title
>
<div
class=
"title"
>
{{
item
.
title
}}
<a-typography-paragraph
@
click=
"handleTitleClick(item)"
style=
"width: 100%"
:style=
"
{ cursor: isTitleClickable ? 'pointer' : '' }"
:delete="!!item.titleDelete"
:ellipsis="
$props.titleRows > 0 ? { rows: $props.titleRows, tooltip: item.title } : false
"
:content="item.title"
/>
<div
class=
"extra"
v-if=
"item.extra"
>
<a-tag
class=
"tag"
:color=
"item.color"
>
{{
item
.
extra
}}
...
...
@@ -21,8 +30,16 @@
<
template
#description
>
<div>
<div
class=
"description"
>
{{
item
.
description
}}
<div
class=
"description"
v-if=
"item.description"
>
<a-typography-paragraph
style=
"width: 100%"
:ellipsis=
"
$props.descRows > 0
?
{ rows: $props.descRows, tooltip: item.description }
: false
"
:content="item.description"
/>
</div>
<div
class=
"datetime"
>
{{
item
.
datetime
}}
...
...
@@ -35,16 +52,18 @@
</a-list>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
,
PropType
}
from
'
vue
'
;
import
{
computed
,
defineComponent
,
PropType
,
ref
,
watch
,
unref
}
from
'
vue
'
;
import
{
ListItem
}
from
'
./data
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
List
,
Avatar
,
Tag
}
from
'
ant-design-vue
'
;
import
{
List
,
Avatar
,
Tag
,
Typography
}
from
'
ant-design-vue
'
;
import
{
isNumber
}
from
'
/@/utils/is
'
;
export
default
defineComponent
({
components
:
{
[
Avatar
.
name
]:
Avatar
,
[
List
.
name
]:
List
,
[
List
.
Item
.
name
]:
List
.
Item
,
AListItemMeta
:
List
.
Item
.
Meta
,
ATypographyParagraph
:
Typography
.
Paragraph
,
[
Tag
.
name
]:
Tag
,
},
props
:
{
...
...
@@ -52,10 +71,66 @@
type
:
Array
as
PropType
<
ListItem
[]
>
,
default
:
()
=>
[],
},
pageSize
:
{
type
:
[
Boolean
,
Number
]
as
PropType
<
Boolean
|
Number
>
,
default
:
5
,
},
currentPage
:
{
type
:
Number
,
default
:
1
,
},
titleRows
:
{
type
:
Number
,
default
:
1
,
},
descRows
:
{
type
:
Number
,
default
:
2
,
},
onTitleClick
:
{
type
:
Function
as
PropType
<
(
Recordable
)
=>
void
>
,
},
},
setup
()
{
emits
:
[
'
update:currentPage
'
],
setup
(
props
,
{
emit
})
{
const
{
prefixCls
}
=
useDesign
(
'
header-notify-list
'
);
return
{
prefixCls
};
const
current
=
ref
(
props
.
currentPage
||
1
);
const
getData
=
computed
(()
=>
{
const
{
pageSize
,
list
}
=
props
;
console
.
log
(
'
refreshData
'
,
list
);
if
(
pageSize
===
false
)
return
[];
let
size
=
isNumber
(
pageSize
)
?
pageSize
:
5
;
return
list
.
slice
(
size
*
(
unref
(
current
)
-
1
),
size
*
unref
(
current
));
});
watch
(
()
=>
props
.
currentPage
,
(
v
)
=>
{
current
.
value
=
v
;
}
);
const
isTitleClickable
=
computed
(()
=>
!!
props
.
onTitleClick
);
const
getPagination
=
computed
(()
=>
{
const
{
list
,
pageSize
}
=
props
;
if
(
pageSize
>
0
&&
list
&&
list
.
length
>
pageSize
)
{
return
{
total
:
list
.
length
,
pageSize
,
current
:
unref
(
current
),
onChange
(
page
)
{
current
.
value
=
page
;
emit
(
'
update:currentPage
'
,
page
);
},
};
}
else
{
return
false
;
}
});
function
handleTitleClick
(
item
:
ListItem
)
{
props
.
onTitleClick
&&
props
.
onTitleClick
(
item
);
}
return
{
prefixCls
,
getPagination
,
getData
,
handleTitleClick
,
isTitleClickable
};
},
});
</
script
>
...
...
src/layouts/default/header/components/notify/data.ts
浏览文件 @
c16be2c4
export
interface
ListItem
{
id
:
string
;
avatar
:
string
;
// 通知的标题内容
title
:
string
;
// 是否在标题上显示删除线
titleDelete
?:
boolean
;
datetime
:
string
;
type
:
string
;
read
?:
boolean
;
...
...
@@ -56,6 +59,55 @@ export const tabListData: TabItem[] = [
datetime
:
'
2017-08-07
'
,
type
:
'
1
'
,
},
{
id
:
'
000000005
'
,
avatar
:
'
https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png
'
,
title
:
'
标题可以设置自动显示省略号,本例中标题行数已设为1行,如果内容超过1行将自动截断并支持tooltip显示完整标题。
'
,
description
:
''
,
datetime
:
'
2017-08-07
'
,
type
:
'
1
'
,
},
{
id
:
'
000000006
'
,
avatar
:
'
https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png
'
,
title
:
'
左侧图标用于区分不同的类型
'
,
description
:
''
,
datetime
:
'
2017-08-07
'
,
type
:
'
1
'
,
},
{
id
:
'
000000007
'
,
avatar
:
'
https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png
'
,
title
:
'
左侧图标用于区分不同的类型
'
,
description
:
''
,
datetime
:
'
2017-08-07
'
,
type
:
'
1
'
,
},
{
id
:
'
000000008
'
,
avatar
:
'
https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png
'
,
title
:
'
左侧图标用于区分不同的类型
'
,
description
:
''
,
datetime
:
'
2017-08-07
'
,
type
:
'
1
'
,
},
{
id
:
'
000000009
'
,
avatar
:
'
https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png
'
,
title
:
'
左侧图标用于区分不同的类型
'
,
description
:
''
,
datetime
:
'
2017-08-07
'
,
type
:
'
1
'
,
},
{
id
:
'
000000010
'
,
avatar
:
'
https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png
'
,
title
:
'
左侧图标用于区分不同的类型
'
,
description
:
''
,
datetime
:
'
2017-08-07
'
,
type
:
'
1
'
,
},
],
},
{
...
...
@@ -84,7 +136,8 @@ export const tabListData: TabItem[] = [
id
:
'
000000008
'
,
avatar
:
'
https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg
'
,
title
:
'
标题
'
,
description
:
'
这种模板用于提醒谁与你发生了互动
'
,
description
:
'
请将鼠标移动到此处,以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2,超过2行的描述内容将被省略并且可以通过tooltip查看完整内容
'
,
datetime
:
'
2017-08-07
'
,
type
:
'
2
'
,
clickClose
:
true
,
...
...
src/layouts/default/header/components/notify/index.vue
浏览文件 @
c16be2c4
...
...
@@ -6,13 +6,15 @@
</Badge>
<template
#content
>
<Tabs>
<template
v-for=
"item in
tabL
istData"
:key=
"item.key"
>
<template
v-for=
"item in
l
istData"
:key=
"item.key"
>
<TabPane>
<template
#tab
>
{{
item
.
name
}}
<span
v-if=
"item.list.length !== 0"
>
(
{{
item
.
list
.
length
}}
)
</span>
</
template
>
<NoticeList
:list=
"item.list"
/>
<!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
<NoticeList
:list=
"item.list"
v-if=
"item.key === '1'"
@
title-click=
"onNoticeClick"
/>
<NoticeList
:list=
"item.list"
v-else
/>
</TabPane>
</template>
</Tabs>
...
...
@@ -21,28 +23,40 @@
</div>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
computed
,
defineComponent
,
ref
}
from
'
vue
'
;
import
{
Popover
,
Tabs
,
Badge
}
from
'
ant-design-vue
'
;
import
{
BellOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
tabListData
}
from
'
./data
'
;
import
{
tabListData
,
ListItem
}
from
'
./data
'
;
import
NoticeList
from
'
./NoticeList.vue
'
;
import
{
useDesign
}
from
'
/@/hooks/web/useDesign
'
;
import
{
useMessage
}
from
'
/@/hooks/web/useMessage
'
;
export
default
defineComponent
({
components
:
{
Popover
,
BellOutlined
,
Tabs
,
TabPane
:
Tabs
.
TabPane
,
Badge
,
NoticeList
},
setup
()
{
const
{
prefixCls
}
=
useDesign
(
'
header-notify
'
);
const
{
createMessage
}
=
useMessage
();
const
listData
=
ref
(
tabListData
);
let
count
=
0
;
const
count
=
computed
(()
=>
{
let
count
=
0
;
for
(
let
i
=
0
;
i
<
tabListData
.
length
;
i
++
)
{
count
+=
tabListData
[
i
].
list
.
length
;
}
return
count
;
});
for
(
let
i
=
0
;
i
<
tabListData
.
length
;
i
++
)
{
count
+=
tabListData
[
i
].
list
.
length
;
function
onNoticeClick
(
record
:
ListItem
)
{
createMessage
.
success
(
'
你点击了通知,ID=
'
+
record
.
id
);
// 可以直接将其标记为已读(为标题添加删除线),此处演示的代码会切换删除线状态
record
.
titleDelete
=
!
record
.
titleDelete
;
}
return
{
prefixCls
,
tabL
istData
,
l
istData
,
count
,
onNoticeClick
,
numberStyle
:
{},
};
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录