Commit aee613034fa13c986018ae11d23dcacc679a088f

Authored by 无木
1 parent d677729a

refactor(mock): remove third-party images

mock/demo/table-demo.ts
1 1 import { MockMethod } from 'vite-plugin-mock';
  2 +import { Random } from 'mockjs';
2 3 import { resultPageSuccess } from '../_util';
3 4  
  5 +function getRandomPics(count = 10): string[] {
  6 + const arr: string[] = [];
  7 + for (let i = 0; i < count; i++) {
  8 + arr.push(Random.image('800x600', Random.color(), Random.color(), Random.title()));
  9 + }
  10 + return arr;
  11 +}
  12 +
4 13 const demoList = (() => {
5 14 const result: any[] = [];
6 15 for (let index = 0; index < 60; index++) {
... ... @@ -18,6 +27,9 @@ const demoList = (() =&gt; {
18 27 name6: '@cname()',
19 28 name7: '@cname()',
20 29 name8: '@cname()',
  30 + avatar: Random.image('400x400', Random.color(), Random.color(), Random.first()),
  31 + imgArr: getRandomPics(Math.ceil(Math.random() * 3) + 1),
  32 + imgs: getRandomPics(Math.ceil(Math.random() * 3) + 1),
21 33 date: `@date('yyyy-MM-dd')`,
22 34 time: `@time('HH:mm')`,
23 35 'no|100000-10000000': 100000,
... ...
src/views/demo/table/CustomerCell.vue
... ... @@ -8,32 +8,12 @@
8 8 </Tag>
9 9 </template>
10 10 <template #avatar="{ record }">
11   - <Avatar
12   - :size="60"
13   - :src="'http://api.btstu.cn/sjtx/api.php?lx=c1&format=images&id=' + record.id"
14   - />
  11 + <Avatar :size="60" :src="record.avatar" />
15 12 </template>
16   - <template #img>
17   - <TableImg
18   - :size="60"
19   - :simpleShow="true"
20   - :imgList="[
21   - 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
22   - 'https://picsum.photos/id/66/346/216',
23   - 'https://picsum.photos/id/67/346/216',
24   - ]"
25   - />
26   - </template>
27   - <template #imgs>
28   - <TableImg
29   - :size="60"
30   - :imgList="[
31   - 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?1622962250222',
32   - 'https://picsum.photos/id/66/346/216',
33   - 'https://picsum.photos/id/67/346/216',
34   - ]"
35   - />
  13 + <template #img="{ text }">
  14 + <TableImg :size="60" :simpleShow="true" :imgList="text" />
36 15 </template>
  16 + <template #imgs="{ text }"> <TableImg :size="60" :imgList="text" /> </template>
37 17  
38 18 <template #category="{ record }">
39 19 <Tag color="green">
... ... @@ -75,7 +55,7 @@
75 55 },
76 56 {
77 57 title: '图片列表1',
78   - dataIndex: 'img',
  58 + dataIndex: 'imgArr',
79 59 helpMessage: ['这是简单模式的图片列表', '只会显示一张在表格中', '但点击可预览多张图片'],
80 60 width: 140,
81 61 slots: { customRender: 'img' },
... ... @@ -109,6 +89,7 @@
109 89 setup() {
110 90 const [registerTable] = useTable({
111 91 title: '自定义列内容',
  92 + titleHelpMessage: '表格中所有头像、图片均为mock生成,仅用于演示图片占位',
112 93 api: demoListApi,
113 94 columns: columns,
114 95 bordered: true,
... ...