127 lines
2.7 KiB
TypeScript
127 lines
2.7 KiB
TypeScript
/*
|
|
* @Author: zhaojinfeng 121016171@qq.com
|
|
* @Date: 2023-08-16 17:33:41
|
|
* @LastEditors: zhaojinfeng 121016171@qq.com
|
|
* @LastEditTime: 2023-09-14 13:21:59
|
|
* @FilePath: \vue3\stories\UploadList.stories.ts
|
|
* @Description:
|
|
*
|
|
*/
|
|
import type { Meta, StoryObj } from '@storybook/vue3'
|
|
import ThUploadList from '../packages/upload-list/index.vue'
|
|
import avatar from './assets/avatar.jpeg'
|
|
|
|
interface Config {
|
|
onUploadProgress: (e: Pick<ProgressEvent, 'loaded' | 'total'>) => void
|
|
}
|
|
|
|
// 模拟2秒钟的接口请求
|
|
function request(formData: FormData, config?: Config) {
|
|
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) => {
|
|
let loaded = 0
|
|
const t = setInterval(() => {
|
|
loaded += 100
|
|
config && config.onUploadProgress && config.onUploadProgress({
|
|
loaded,
|
|
total: 2000,
|
|
})
|
|
if (loaded === 2000) {
|
|
clearInterval(t)
|
|
resolve({
|
|
id: Date.now(),
|
|
name,
|
|
url,
|
|
createdBy: 'user',
|
|
})
|
|
}
|
|
}, 100)
|
|
})
|
|
}
|
|
const meta = {
|
|
title: '表单组件/UploadList',
|
|
component: ThUploadList,
|
|
args: {
|
|
accept: '*',
|
|
disabled: false,
|
|
fileList: [],
|
|
request,
|
|
filePath: '/',
|
|
maxsize: 100,
|
|
listType: 'text',
|
|
},
|
|
argTypes: {
|
|
listType: {
|
|
control: 'inline-radio',
|
|
options: ['text', 'picture-card', 'picture'],
|
|
},
|
|
},
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof ThUploadList>
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Base: Story = {
|
|
name: '基本使用',
|
|
}
|
|
|
|
export const VModel: Story = {
|
|
name: '双向绑定',
|
|
args: {
|
|
accept: '*',
|
|
disabled: false,
|
|
fileList: [],
|
|
request,
|
|
filePath: '/',
|
|
maxsize: 100,
|
|
listType: 'text',
|
|
},
|
|
argTypes: {
|
|
listType: {
|
|
control: 'inline-radio',
|
|
options: ['text', 'picture-card', 'picture'],
|
|
},
|
|
},
|
|
render: args => ({
|
|
components: { ThUploadList },
|
|
setup() {
|
|
return { args }
|
|
},
|
|
template: `
|
|
值：{{ args.fileList }}
|
|
<th-upload-list
|
|
v-model:file-list="args.fileList"
|
|
:accept="args.accept"
|
|
:disabled="args.disabled"
|
|
:request="args.request"
|
|
:file-path="args.filePath"
|
|
:maxsize="args.maxsize"
|
|
/>
|
|
`,
|
|
}),
|
|
}
|
|
|
|
export const Disabled: Story = {
|
|
name: '禁用',
|
|
args: {
|
|
disabled: true,
|
|
fileList: [{
|
|
id: Date.now(),
|
|
name: avatar,
|
|
url: avatar,
|
|
createdBy: 'user',
|
|
}],
|
|
},
|
|
}
|