mirror of https://gitee.com/xiaonuobase/snowy
【新增】卡片列表组件：XnCardList
这么诚实
parent
4d01ed6214
commit
58eaf57633
|
|
@ -0,0 +1,62 @@
|
||||||
|
# 小诺卡片列表的组件
|
||||||
|
|
||||||
|
## 说明
|
||||||
|
|
||||||
|
### props定义
|
||||||
|
|
||||||
|
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||||
|
|----|------------|---------|--------|------------------------|
|
||||||
|
| 1 | grid | Object | grid布局 | 见：and-design定义（Grid栅格） |
|
||||||
|
| 2 | dataSource | Array | 数据源 | 见：dataSource字段定义 |
|
||||||
|
| 3 | page | Object | 分页 | 见：page字段定义 |
|
||||||
|
| 4 | actions | Array | 操作数组 | 见：action字段定义 |
|
||||||
|
| 5 | loading | Boolean | 加载中提示 | - |
|
||||||
|
|
||||||
|
> dataSource字段定义
|
||||||
|
|
||||||
|
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||||
|
|----|----------|--------|-----------------|---------------|
|
||||||
|
| 1 | title | String | 标题 | 设备编码 |
|
||||||
|
| 2 | subTitle | String | 副标题 | 设备名称 |
|
||||||
|
| 3 | img | String | 图片 | |
|
||||||
|
| 4 | contents | Array | 内容 | 见：content字段定义 |
|
||||||
|
| 5 | badge | Object | 徽标 | 见：badge字段定义 |
|
||||||
|
| 6 | record | Object | 数据记录，emit触发回调参数 | |
|
||||||
|
|
||||||
|
> content字段定义
|
||||||
|
|
||||||
|
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||||
|
|----|-------|--------|----|------|
|
||||||
|
| 1 | label | String | 标签 | 所属产品 |
|
||||||
|
| 2 | value | Object | 值 | 透传 |
|
||||||
|
|
||||||
|
> badge字段定义
|
||||||
|
|
||||||
|
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||||
|
|----|-------|--------|----|------------------------|
|
||||||
|
| 1 | text | String | 标签 | 所属产品 |
|
||||||
|
| 2 | color | String | 颜色 | 见：ant-design定义（预设、自定义） |
|
||||||
|
|
||||||
|
> action字段定义
|
||||||
|
|
||||||
|
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||||
|
|----|-------|--------|----|---------|
|
||||||
|
| 1 | key | String | 键 | setting |
|
||||||
|
| 2 | label | String | 标签 | 所属产品 |
|
||||||
|
| 3 | icon | String | 图标 | setting |
|
||||||
|
| 4 | color | String | 颜色 | red |
|
||||||
|
|
||||||
|
> page字段定义
|
||||||
|
|
||||||
|
| 序号 | 编码 | 类型 | 说明 | 示例 |
|
||||||
|
|----|---------|--------|------|----|
|
||||||
|
| 1 | current | Number | 当前页 | 1 |
|
||||||
|
| 2 | size | Number | 每页大小 | 6 |
|
||||||
|
| 3 | total | Number | 总数 | 0 |
|
||||||
|
|
||||||
|
### emits定义
|
||||||
|
|
||||||
|
| 序号 | 方法名 | 参数类型 | 参数示例 |
|
||||||
|
|----|-------------|--------|-----------------------------|
|
||||||
|
| 1 | action | Object | {key: 'edit', record:{...}} |
|
||||||
|
| 2 | page-change | Number | 1 |
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<template>
|
||||||
|
<a-list :grid="grid" :data-source="props.dataSource" :pagination="pagination" :loading="loading">
|
||||||
|
<template #renderItem="{ item, index }">
|
||||||
|
<a-list-item :key="index">
|
||||||
|
<a-badge-ribbon :text="item.badge.text" :color="item.badge.color?item.badge.color:''">
|
||||||
|
<a-card class="xn-card">
|
||||||
|
<template #title>
|
||||||
|
<a-tag color="orange">{{ item.title }}</a-tag>
|
||||||
|
</template>
|
||||||
|
<template #actions>
|
||||||
|
<template v-for="{ key, label, icon, color} in props.actions">
|
||||||
|
<a-tooltip :title="label">
|
||||||
|
<component :is="icon" @click="doAction(key, item)" :style="{color:color}"/>
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<a-card-meta class="xn-card-meta">
|
||||||
|
<template #avatar>
|
||||||
|
<a-avatar shape="square" :size="64" :src="item.img"/>
|
||||||
|
</template>
|
||||||
|
<template #title>
|
||||||
|
<span class="xn-card-meta-title">{{ item.subTitle }}</span>
|
||||||
|
</template>
|
||||||
|
<template #description>
|
||||||
|
<div v-if="item.contents" v-for="content in item.contents">
|
||||||
|
<span>{{ content.label }}：{{ content.value }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-card-meta>
|
||||||
|
</a-card>
|
||||||
|
</a-badge-ribbon>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="xnCardList">
|
||||||
|
import {message} from 'ant-design-vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
// grid布局
|
||||||
|
grid: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {gutter: 20, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3, xxxl: 4}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 数据源
|
||||||
|
dataSource: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 分页
|
||||||
|
page: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 动作
|
||||||
|
actions: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['action', 'page-change'])
|
||||||
|
|
||||||
|
// 分页参数
|
||||||
|
const {current, size, total} = toRefs(props.page)
|
||||||
|
const pagination = reactive({
|
||||||
|
onChange: current => {
|
||||||
|
emit('page-change', current)
|
||||||
|
},
|
||||||
|
current: current,
|
||||||
|
pageSize: size,
|
||||||
|
total: total
|
||||||
|
})
|
||||||
|
|
||||||
|
// 触发 action
|
||||||
|
const doAction = (key, item) => {
|
||||||
|
if (!item.record) {
|
||||||
|
message.error('记录参数[record]错误')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
emit('action', {key, record: item.record})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.xn-card {
|
||||||
|
background: linear-gradient(141.6deg, var(--primary-1) 0%, rgba(255, 255, 255, 0) 70%);
|
||||||
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.xn-card-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.xn-card-meta-title {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue