上传与编辑器

拖放上传，支持校验（类型、大小、数量——提示已翻译）、预览和进度（list 与 single 两种形式）。Editor 是基于 contenteditable 的轻量富文本编辑器。

Upload

Upload

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlUpload multiple :max-size="2 * 1024 * 1024" accept="image/*" :request="fakeRequest" /></div>
  <div class="thl-col-12 thl-col-md-6"><ThlUpload variant="single" /></div>
</div>

React

<Upload multiple maxSize={2 * 1024 * 1024} accept="image/*"
  request={(file, onProgress) => api.upload(file, onProgress)} onChange={setFiles} />
<Upload variant="single" />

Angular

<thl-upload multiple [maxSize]="2 * 1024 * 1024" accept="image/*" [request]="upload" (filesChange)="files.set($event)" />
<thl-upload variant="single" />

Editor

Editor

Vue

<div><ThlEditor v-model="html" :min-height="140" /><pre style="font-size:12px;margin-top:8px;white-space:pre-wrap">{{ html }}</pre></div>

React

<Editor value={html} onChange={setHtml} minHeight={140} />

Angular

<thl-editor [(value)]="html" [minHeight]="140" />

API

Upload

<ThlUpload> · import { ThlUpload } from '@thl-ui/vue'

Prop	类型	默认值
accept	string	—
maxSize	number	—
multiple	boolean	—
maxFiles	number	—
request	function	—
variant	string	"list"
hint	string	—

事件: change

Editor

<ThlEditor> · import { ThlEditor } from '@thl-ui/vue'

Prop	类型	默认值
modelValue	string	""
placeholder	string	—
minHeight	number	—
ariaLabel	string	—

事件: update:modelValue