Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
剑九 六千里
vue-vben-admin
提交
4cb3784f
V
vue-vben-admin
项目概览
剑九 六千里
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
1
Fork
1
代码
文件
提交
分支
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,发现更多精彩内容 >>
提交
4cb3784f
编写于
12月 02, 2020
作者:
陈
陈小婷
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add search-list page
上级
962f90de
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
173 addition
and
3 deletion
+173
-3
src/locales/lang/zh_CN/routes/demo/page.ts
src/locales/lang/zh_CN/routes/demo/page.ts
+2
-1
src/router/menus/modules/demo/page.ts
src/router/menus/modules/demo/page.ts
+5
-1
src/router/routes/modules/demo/page.ts
src/router/routes/modules/demo/page.ts
+9
-1
src/views/demo/page/list/search/data.tsx
src/views/demo/page/list/search/data.tsx
+37
-0
src/views/demo/page/list/search/index.vue
src/views/demo/page/list/search/index.vue
+120
-0
未找到文件。
src/locales/lang/zh_CN/routes/demo/page.ts
浏览文件 @
4cb3784f
...
...
@@ -24,5 +24,6 @@ export default {
list
:
'
列表页
'
,
listCard
:
'
卡片列表
'
,
basic
:
'
标准列表
'
,
listBasic
:
'
标准列表
'
,
listSearch
:
'
搜索列表
'
,
};
src/router/menus/modules/demo/page.ts
浏览文件 @
4cb3784f
...
...
@@ -107,12 +107,16 @@ const menu: MenuModule = {
children
:
[
{
path
:
'
basic
'
,
name
:
'
标准列表
'
,
name
:
'
routes.demo.page.listBasic
'
,
},
{
path
:
'
card
'
,
name
:
'
routes.demo.page.listCard
'
,
},
{
path
:
'
search
'
,
name
:
'
routes.demo.page.listSearch
'
,
},
],
},
],
...
...
src/router/routes/modules/demo/page.ts
浏览文件 @
4cb3784f
...
...
@@ -223,7 +223,7 @@ const page: AppRouteModule = {
name
:
'
ListBasicPage
'
,
component
:
()
=>
import
(
'
/@/views/demo/page/list/basic/index.vue
'
),
meta
:
{
title
:
'
routes.demo.page.
b
asic
'
,
title
:
'
routes.demo.page.
listB
asic
'
,
},
},
{
...
...
@@ -234,6 +234,14 @@ const page: AppRouteModule = {
title
:
'
routes.demo.page.listCard
'
,
},
},
{
path
:
'
search
'
,
name
:
'
ListSearchPage
'
,
component
:
()
=>
import
(
'
/@/views/demo/page/list/search/index.vue
'
),
meta
:
{
title
:
'
routes.demo.page.listSearch
'
,
},
},
],
},
// =============================list end=============================
...
...
src/views/demo/page/list/search/data.tsx
0 → 100644
浏览文件 @
4cb3784f
import
{
FormSchema
}
from
'
/@/components/Form/index
'
;
export
const
searchList
=
(()
=>
{
const
result
:
any
[]
=
[];
for
(
let
i
=
0
;
i
<
6
;
i
++
)
{
result
.
push
({
id
:
i
,
title
:
'
Vben Admin
'
,
description
:
[
'
Vben
'
,
'
设计语言
'
,
'
Typescript
'
],
content
:
'
基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统。
'
,
time
:
'
2020-11-14 11:20
'
,
});
}
return
result
;
})();
export
const
actions
:
any
[]
=
[
{
icon
:
'
ant-design:star-outlined
'
,
text
:
'
156
'
,
color
:
'
#018ffb
'
},
{
icon
:
'
ant-design:like-filled
'
,
text
:
'
156
'
,
color
:
'
#459ae8
'
},
{
icon
:
'
ant-design:message-filled
'
,
text
:
'
2
'
,
color
:
'
#42d27d
'
},
];
export
const
schemas
:
FormSchema
[]
=
[
{
field
:
'
field1
'
,
component
:
'
InputSearch
'
,
label
:
'
项目名
'
,
colProps
:
{
span
:
8
,
},
componentProps
:
{
onChange
:
(
e
:
any
)
=>
{
console
.
log
(
e
);
},
},
},
];
src/views/demo/page/list/search/index.vue
0 → 100644
浏览文件 @
4cb3784f
<
template
>
<div
:class=
"prefixCls"
>
<a-page-header
title=
"搜索列表"
:ghost=
"false"
:class=
"`$
{prefixCls}__header`">
<BasicForm
:class=
"`$
{prefixCls}__header-form`"
:labelWidth="100"
:schemas="schemas"
:showActionButtonGroup="false"
/>
</a-page-header>
<div
:class=
"`$
{prefixCls}__container`">
<a-list>
<template
v-for=
"item in list"
:key=
"item.id"
>
<a-list-item>
<a-list-item-meta>
<template
#description
>
<div
:class=
"`$
{prefixCls}__content`">
{{
item
.
content
}}
</div>
<div
:class=
"`$
{prefixCls}__action`">
<template
v-for=
"(action, index) in actions"
:key=
"index"
>
<div
:class=
"`$
{prefixCls}__action-item`">
<Icon
v-if=
"action.icon"
:class=
"`$
{prefixCls}__action-icon`"
:icon="action.icon"
:color="action.color"
/>
{{
action
.
text
}}
</div>
</
template
>
<span
:class=
"`${prefixCls}__time`"
>
{{ item.time }}
</span>
</div>
</template>
<
template
#title
>
<p
:class=
"`$
{prefixCls}__title`">
{{
item
.
title
}}
</p>
<div>
<template
v-for=
"(tag, index) in item.description"
:key=
"index"
>
<Tag
class=
"mb-2"
>
{{
tag
}}
</Tag>
</
template
>
</div>
</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</div>
</div>
</template>
<
script
lang=
"ts"
>
import
{
Tag
}
from
'
ant-design-vue
'
;
import
{
defineComponent
}
from
'
vue
'
;
import
Icon
from
'
/@/components/Icon/index
'
;
import
{
BasicForm
}
from
'
/@/components/Form/index
'
;
import
{
actions
,
searchList
,
schemas
}
from
'
./data
'
;
export
default
defineComponent
({
components
:
{
Icon
,
Tag
,
BasicForm
},
setup
()
{
return
{
prefixCls
:
'
list-search
'
,
list
:
searchList
,
actions
,
schemas
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
.list-search {
&__header {
&-form {
margin-bottom: -16px;
}
}
&__container {
padding: 12px;
margin: 24px;
background: #fff;
}
&__title {
margin-bottom: 12px;
font-size: 18px;
}
&__content {
color: rgba(0, 0, 0, 0.65);
}
&__action {
margin-top: 10px;
&-item {
display: inline-block;
padding: 0 16px;
color: rgba(0, 0, 0, 0.45);
&:nth-child(1) {
padding-left: 0;
}
&:nth-child(1),
&:nth-child(2) {
border-right: 1px solid rgba(206, 206, 206, 0.4);
}
}
&-icon {
margin-right: 3px;
}
}
&__time {
position: absolute;
right: 20px;
color: rgba(0, 0, 0, 0.45);
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录