-
Notifications
You must be signed in to change notification settings - Fork 6.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
173 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -24,5 +24,6 @@ export default { | |
|
||
list: '列表页', | ||
listCard: '卡片列表', | ||
basic: '标准列表', | ||
listBasic: '标准列表', | ||
listSearch: '搜索列表', | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
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); | ||
}, | ||
}, | ||
}, | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
<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> |