refactor(mock): remove third-party images

This commit is contained in:
无木 2021-06-07 01:14:07 +08:00
parent d677729acb
commit aee613034f
2 changed files with 18 additions and 25 deletions

View File

@ -1,6 +1,15 @@
import { MockMethod } from 'vite-plugin-mock'; import { MockMethod } from 'vite-plugin-mock';
import { Random } from 'mockjs';
import { resultPageSuccess } from '../_util'; import { resultPageSuccess } from '../_util';
function getRandomPics(count = 10): string[] {
const arr: string[] = [];
for (let i = 0; i < count; i++) {
arr.push(Random.image('800x600', Random.color(), Random.color(), Random.title()));
}
return arr;
}
const demoList = (() => { const demoList = (() => {
const result: any[] = []; const result: any[] = [];
for (let index = 0; index < 60; index++) { for (let index = 0; index < 60; index++) {
@ -18,6 +27,9 @@ const demoList = (() => {
name6: '@cname()', name6: '@cname()',
name7: '@cname()', name7: '@cname()',
name8: '@cname()', name8: '@cname()',
avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
imgArr: getRandomPics(Math.ceil(Math.random() * 3) + 1),
imgs: getRandomPics(Math.ceil(Math.random() * 3) + 1),
date: `@date('yyyy-MM-dd')`, date: `@date('yyyy-MM-dd')`,
time: `@time('HH:mm')`, time: `@time('HH:mm')`,
'no|100000-10000000': 100000, 'no|100000-10000000': 100000,

View File

@ -8,32 +8,12 @@
</Tag> </Tag>
</template> </template>
<template #avatar="{ record }"> <template #avatar="{ record }">
<Avatar <Avatar :size="60" :src="record.avatar" />
:size="60"
:src="'http://api.btstu.cn/sjtx/api.php?lx=c1&format=images&id=' + record.id"
/>
</template> </template>
<template #img> <template #img="{ text }">
<TableImg <TableImg :size="60" :simpleShow="true" :imgList="text" />
:size="60"
:simpleShow="true"
:imgList="[
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
]"
/>
</template>
<template #imgs>
<TableImg
:size="60"
:imgList="[
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
'https://picsum.photos/id/66/346/216',
'https://picsum.photos/id/67/346/216',
]"
/>
</template> </template>
<template #imgs="{ text }"> <TableImg :size="60" :imgList="text" /> </template>
<template #category="{ record }"> <template #category="{ record }">
<Tag color="green"> <Tag color="green">
@ -75,7 +55,7 @@
}, },
{ {
title: '图片列表1', title: '图片列表1',
dataIndex: 'img', dataIndex: 'imgArr',
helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'], helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'],
width: 140, width: 140,
slots: { customRender: 'img' }, slots: { customRender: 'img' },
@ -109,6 +89,7 @@
setup() { setup() {
const [registerTable] = useTable({ const [registerTable] = useTable({
title: '自定义列内容', title: '自定义列内容',
titleHelpMessage: '表格中所有头像、图片均为mock生成仅用于演示图片占位',
api: demoListApi, api: demoListApi,
columns: columns, columns: columns,
bordered: true, bordered: true,