增加上传组件
parent
a10f3ccd63
commit
1cab17cd5f
|
|
@ -4,16 +4,21 @@
|
|||
* @date 2023/04/28 16:14:10
|
||||
*/
|
||||
|
||||
import { css, html, Component, bind, unbind } from 'wkit'
|
||||
import '../base/button.js'
|
||||
import { css, html, Component, bind, unbind, styleMap } from 'wkit'
|
||||
import '../base/icon.js'
|
||||
|
||||
function uuid() {
|
||||
return Math.random().toString(16).slice(2)
|
||||
}
|
||||
|
||||
class Uploader extends Component {
|
||||
static props = {
|
||||
value: [],
|
||||
tips: 'str!',
|
||||
allow: '*/*',
|
||||
accept: '*/*',
|
||||
maxSize: 0,
|
||||
limit: 0,
|
||||
grid: false,
|
||||
drag: false,
|
||||
multiple: false,
|
||||
disabled: false
|
||||
|
|
@ -24,23 +29,177 @@ class Uploader extends Component {
|
|||
:host {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 6px 0;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
--wc-icon-size: 14px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: block;
|
||||
line-height: 2;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
.upload-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 108px;
|
||||
height: 32px;
|
||||
gap: 4px;
|
||||
border: 1px solid var(--color-grey-2);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s linear, border-color 0.1s linear;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-grey-1);
|
||||
}
|
||||
&:active {
|
||||
background: var(--color-plain-1);
|
||||
}
|
||||
}
|
||||
.hidden-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: inherit;
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`,
|
||||
css`
|
||||
.file-list {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
line-height: 24px;
|
||||
gap: 4px;
|
||||
transition: background 0.15s linear;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-plain-1);
|
||||
|
||||
wc-icon.del {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
}
|
||||
wc-icon {
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.15s linear;
|
||||
|
||||
&.del {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
color: var(--color-red-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
// grid
|
||||
css`
|
||||
:host([grid]) {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: row-reverse;
|
||||
justify-content: start;
|
||||
gap: 12px;
|
||||
|
||||
--size: var(--wc-uploader-size, 96px);
|
||||
--border-color: var(--wc-uploader-border-color, var(--color-grey-2));
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 6px;
|
||||
--wc-icon-size: 18px;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.item {
|
||||
justify-content: center;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
gap: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
background: none no-repeat center;
|
||||
background-size: contain;
|
||||
|
||||
--wc-icon-size: 20px;
|
||||
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
wc-icon {
|
||||
padding: 3px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
background: rgba(64, 64, 64, 0.75);
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
wc-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
// drag
|
||||
css`
|
||||
:host([drag]) {
|
||||
.upload-button {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-style: dashed;
|
||||
--wc-icon-size: 64px;
|
||||
|
||||
&.in {
|
||||
border-color: var(--color-orange-1);
|
||||
background: var(--color-drag-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
// thumb
|
||||
|
|
@ -59,15 +218,125 @@ class Uploader extends Component {
|
|||
`
|
||||
]
|
||||
|
||||
#files = []
|
||||
|
||||
#fileChange(ev) {
|
||||
let files = [...ev.target.files]
|
||||
let { limit } = this
|
||||
if (limit > 0) {
|
||||
files = files.slice(0, limit - this.#files.length)
|
||||
}
|
||||
|
||||
files = files.map(file => ({ file, id: uuid(), url: '', stat: 0 }))
|
||||
|
||||
this.#files = this.#files.concat(files)
|
||||
|
||||
this.$emit('upload', {
|
||||
files,
|
||||
send: args => {
|
||||
for (let it of args) {
|
||||
it.stat = 1
|
||||
}
|
||||
this.value = this.#files.map(it => it.url)
|
||||
}
|
||||
})
|
||||
|
||||
ev.target.value = ''
|
||||
this.$requestUpdate()
|
||||
}
|
||||
|
||||
#remove(ev, it, id) {
|
||||
for (let i in this.#files) {
|
||||
if (it === this.#files[i]) {
|
||||
this.#files.splice(i, 1)
|
||||
break
|
||||
}
|
||||
}
|
||||
this.$requestUpdate()
|
||||
}
|
||||
|
||||
#dragover() {
|
||||
this.$refs.drag.classList.toggle('in', true)
|
||||
}
|
||||
#dragleave() {
|
||||
this.$refs.drag.classList.toggle('in', false)
|
||||
}
|
||||
|
||||
#drop(ev) {
|
||||
this.$refs.drag.classList.toggle('in', false)
|
||||
|
||||
// let files = await resolveFiles(ev.dataTransfer.items)
|
||||
|
||||
// for (let it of files) {
|
||||
// if (it.file.type.startsWith('image/')) {
|
||||
// this.img = it.file
|
||||
// this.init()
|
||||
// break
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
mounted() {}
|
||||
|
||||
render() {
|
||||
let { grid, drag } = this
|
||||
let limited = this.limit > 0 && this.#files.length >= this.limit
|
||||
|
||||
return html`
|
||||
<main class="container">
|
||||
<header>
|
||||
<div class="action-area">
|
||||
<wc-button icon="upload"></wc-button>
|
||||
<header
|
||||
class="action-area"
|
||||
style=${styleMap({
|
||||
display: (grid || drag) && limited ? 'none' : ''
|
||||
})}
|
||||
>
|
||||
<div
|
||||
ref="drag"
|
||||
class="upload-button"
|
||||
@dragover.prevent=${this.#dragover}
|
||||
@dragleave.prevent=${this.#dragleave}
|
||||
@drop.prevent=${this.#drop}
|
||||
>
|
||||
<wc-icon name=${grid ? 'plus' : 'upload'}></wc-icon>
|
||||
<span>${grid ? '' : '选择文件'}</span>
|
||||
<input
|
||||
class="hidden-input"
|
||||
title
|
||||
type="file"
|
||||
accept=${this.accept}
|
||||
multiple=${this.multiple}
|
||||
disabled=${limited}
|
||||
@change=${this.#fileChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<cite class="tips">${this.tips}</cite>
|
||||
</header>
|
||||
|
||||
<footer
|
||||
class="file-list"
|
||||
style=${styleMap({ display: this.#files.length ? '' : 'none' })}
|
||||
>
|
||||
${this.#files.map(
|
||||
it => html`
|
||||
<section
|
||||
class="item"
|
||||
style=${styleMap({ backgroundImage: `url(${it.url})` })}
|
||||
>
|
||||
<wc-icon
|
||||
name=${it.stat === 0 ? 'loading' : grid ? 'search' : 'doc'}
|
||||
></wc-icon>
|
||||
<span class="name">${it.file.name}</span>
|
||||
<wc-icon
|
||||
class="del"
|
||||
name="trash"
|
||||
data-id=${it.id}
|
||||
@click=${ev => this.#remove(ev, it, it.id)}
|
||||
></wc-icon>
|
||||
</section>
|
||||
`
|
||||
)}
|
||||
</footer>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue