89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
/*
|
|
* @Author: zhaojinfeng 121016171@qq.com
|
|
* @Date: 2023-07-18 12:23:37
|
|
* @LastEditors: zhaojinfeng 121016171@qq.com
|
|
* @LastEditTime: 2023-07-22 15:51:39
|
|
* @FilePath: \vue3\stories\UploadTable.stories.ts
|
|
* @Description:
|
|
*
|
|
*/
|
|
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
import ThUploadTable from '../packages/upload-table/index.vue'
|
|
import avatar from './assets/avatar.jpeg'
|
|
|
|
// 模拟2秒钟的接口请求
|
|
function request(formData: FormData) {
|
|
let name = '佚名文件'
|
|
let url = avatar
|
|
const fileName = formData.get('name')
|
|
const file = formData.get('file')
|
|
if (typeof fileName === 'string') {
|
|
name = fileName
|
|
}
|
|
else if (typeof file !== 'string' && file) {
|
|
name = file.name
|
|
url = URL.createObjectURL(file)
|
|
}
|
|
return new Promise<FileVO>((resolve) => {
|
|
setTimeout(() => {
|
|
resolve({
|
|
id: Date.now(),
|
|
name,
|
|
url,
|
|
createdBy: 'user',
|
|
})
|
|
}, 2000)
|
|
})
|
|
}
|
|
|
|
const meta = {
|
|
title: '表单组件/UploadTable',
|
|
tags: ['表单组件', 'autodocs'],
|
|
args: {
|
|
accept: '.jpeg,.jpg,.png,.bmp',
|
|
addText: '新增一行',
|
|
hideActions: false,
|
|
allowDelete: true,
|
|
allowReplace: false,
|
|
disabled: false,
|
|
emptyText: '暂无上传文件',
|
|
hideAdd: false,
|
|
label1: '文件名称',
|
|
label2: '图片上传',
|
|
label3: '操作',
|
|
fileList: [],
|
|
replacePopconfirm: '是否重新本行文件？',
|
|
deletePopconfirm: '是否删除本行？',
|
|
request,
|
|
},
|
|
render: args => ({
|
|
components: { ThUploadTable },
|
|
setup() {
|
|
return { args }
|
|
},
|
|
template: `<th-upload-table
|
|
v-model:file-list="args.fileList"
|
|
v-model:disabled="args.disabled"
|
|
:accept="args.accept"
|
|
:add-text="args.addText"
|
|
:allow-delete="args.allowDelete"
|
|
:allow-replace="args.allowReplace"
|
|
:hide-add="args.hideAdd"
|
|
:hide-actions="args.hideActions"
|
|
:label1="args.label1"
|
|
:label2="args.label2"
|
|
:label3="args.label3"
|
|
:replace-popconfirm="args.replacePopconfirm"
|
|
:delete-popconfirm="args.deletePopconfirm"
|
|
:request="args.request"
|
|
/>`,
|
|
}),
|
|
} satisfies Meta<typeof ThUploadTable>
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Base: Story = {
|
|
name: '基本使用',
|
|
}
|