refactor(mock): remove third-party images

vbenjs · Jun 6, 2021 · aee6130 · aee6130
1 parent d677729
commit aee6130
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 25 deletions.
diff --git a/mock/demo/table-demo.ts b/mock/demo/table-demo.ts
@@ -1,6 +1,15 @@
 import { MockMethod } from 'vite-plugin-mock';
+import { Random } from 'mockjs';
 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 result: any[] = [];
   for (let index = 0; index < 60; index++) {
@@ -18,6 +27,9 @@ const demoList = (() => {
       name6: '@cname()',
       name7: '@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')`,
       time: `@time('HH:mm')`,
       'no|100000-10000000': 100000,

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