tino-design-ui
v0.2.10
Published
Tino Design UI: A Vue.js 3 UI Library
Downloads
11
Readme
Tino-Design-UI
这是一个vue3的UI框架,官网在努力制作中。
目前,已经上线的组件已经有四个:Space
、AdaptiveInput
、AdaptiveTextarea
、Upload
。
官方文档暂定:文档链接,目前此文档仅支持可以适配ipv6的设备使用。
一、安装
# npm
npm install tino-design-ui
# yarn
yarn add tino-design-ui
二、使用
// 加载所有组件
import UiComponents from 'tino-design-ui'
app.use(UiComponents)
// 按需加载 【推荐】
import { Upload } from 'tino-design-ui'
app.component(Upload.name, Upload)
三、版本更新内容
v0.2.1
Upload
完整版上传控件正式上线
1、基本使用
<script lang="ts" setup>
import { Upload as TUpload } from 'tino-design-ui'
</script>
<template>
<t-upload :files="[]" url="http://localhost:3000/upload" />
</template>
2、自定义上传
<script lang="ts" setup>
import axios from 'axios'
import { Upload as TUpload } from 'tino-design-ui'
const customRequest = async (options: UploadRequestOptions) => {
const { name, file, progressEvent, successEvent, errorEvent } = options
const formData = new FormData()
formData.append(name, file)
try {
const response = await axios.post('http://localhost/upload', formData, { onUploadProgress: (event) => progressEvent(event as any) })
successEvent(response.data)
} catch (err) {
errorEvent({ status: (err as any).response.status, errmsg: (err as any).response.statusText })
}
}
</script>
<template>
<t-upload
:files="[]"
:customRequest="customRequest"
/>
</template>
3、手动上传
<script lang="ts" setup>
import { ref } from 'vue'
const Upload = ref()
</script>
<template>
<t-upload
:files="[]"
:auto-upload="false"
ref="Upload"
url="http://localhost:3000/upload"
/>
<button @click="Upload!.upload()">点击上传</button>
</template>
4、更多api
export interface Upload {
/**
* 自定义类名前缀
*/
customClassPrefix?: string
/**
* 限制上传的文件数量
*/
limit?: number
/**
* 上传之前的钩子函数
*/
beforeUpload?: (files: FileList) => boolean
/**
* 上传地址
*/
url?: string
/**
* 自定义上传
*/
customRequest?: (options: UploadRequestOptions) => { abort: () => void }
/**
* 文件列表
*/
files: UploadFile[]
/**
* 上传的字段名
*/
name?: string
/**
* 上传按钮以何种形式展示
*/
type?: 'button' | 'card'
/**
* 限制上传的文件格式
*/
accept?: string
/**
* 是否允许拖拽上传,仅在type值为card时有效
*/
draggable?: boolean
/**
* 是否显示文件列表
*/
showFileList?: boolean
/**
* 是否在文件准备就绪后立即上传
*/
autoUpload?: boolean
/**
* 上传按钮文本,仅type类型为button生效
*/
btnText?: string
/**
* 卡片面板提示词,仅type类型为card生效
*/
cardDescription?: string
}