twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-15 14:03:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update @pureadmin/descriptions

Browse Source
This commit is contained in:
xiaoxian521
2022-06-24 14:12:56 +08:00
parent 1b2eb2481e
commit 91576bd7dd
8 changed files with 276 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/views/welcome/components/Github.vue
View File

@@ -1,87 +1,31 @@
<script setup lang="ts">
import { ref } from "vue";
const lists = ref([
{ type: "", label: "善良" },
{ type: "success", label: "好学" },
{ type: "info", label: "幽默" },
{ type: "danger", label: "旅游" },
{ type: "warning", label: "追剧" }
]);
import { useColumns } from "./columns";
const { columnsA, columnsB, columnsC } = useColumns();
const list = [
{
columns: columnsA,
column: 3
},
{
columns: columnsB,
column: 2
},
{
columns: columnsC,
column: 1
}
];
</script>
<template>
<el-descriptions class="margin-top" direction="vertical" :column="3" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="user" />
</el-icon>
用户名
</template>
xiaoxian
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="iphone" />
</el-icon>
手机号
</template>
123456789
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="location" />
</el-icon>
居住地
</template>
上海
</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" direction="vertical" :column="2" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="tickets" />
</el-icon>
标签
</template>
<el-tag
v-for="item in lists"
:key="item.label"
:type="item.type"
size="small"
effect="dark"
>
{{ item.label }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="office-building" />
</el-icon>
联系地址
</template>
上海市徐汇区
</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" direction="vertical" :column="1" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="notebook" />
</el-icon>
留言
</template>
好好学习，天天向上
</el-descriptions-item>
</el-descriptions>
<PureDescriptions
v-for="(item, index) in list"
:key="index"
:columns="item.columns"
:column="item.column"
class="margin-top"
direction="vertical"
border
/>
</template>
<style scoped>
.el-tag {
margin-right: 10px !important;
}
</style>

100
src/views/welcome/components/columns.tsx Normal file
View File

@@ -0,0 +1,100 @@
import { IconifyIconOffline } from "/@/components/ReIcon";
export function useColumns() {
const lists = [
{ type: "", label: "善良" },
{ type: "success", label: "好学" },
{ type: "info", label: "幽默" },
{ type: "danger", label: "旅游" },
{ type: "warning", label: "追剧" }
];
const columnsA = [
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="user" />
</el-icon>
用户名
</div>
),
value: "xiaoxian"
},
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="iphone" />
</el-icon>
手机号
</div>
),
value: "123456789"
},
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="location" />
</el-icon>
居住地
</div>
),
value: "上海"
}
];
const columnsB = [
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="tickets" />
</el-icon>
标签
</div>
),
cellRenderer: () => {
return lists.map(v => {
return (
<el-tag class="mr-10px" type={v.type} size="small" effect="dark">
{v.label}
</el-tag>
);
});
}
},
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="office-building" />
</el-icon>
联系地址
</div>
),
value: "上海市徐汇区"
}
];
const columnsC = [
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="notebook" />
</el-icon>
好好学习，天天向上
</div>
),
value: "上海市徐汇区"
}
];
return {
columnsA,
columnsB,
columnsC
};
}