tino-design-ui v0.2.10

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
}