73 lines
2.0 KiB
TypeScript
73 lines
2.0 KiB
TypeScript
|
import { defineComponent } from 'vue'
|
||
|
|
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||
|
|
import { MdUpload } from 'oh-vue-icons/icons'
|
||
|
|
import { message } from 'ant-design-vue'
|
||
|
|
import upload from './upload'
|
||
|
|
|
||
|
|
addIcons(MdUpload)
|
||
|
|
|
||
|
|
// !清 asyncLoader 加载使用
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
ratio: {
|
||
|
|
type: Number,
|
||
|
|
default: 1
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: Number,
|
||
|
|
default: 64
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
size: {
|
||
|
|
type: Number,
|
||
|
|
default: 4
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emits: {
|
||
|
|
'update:value': (() => true) as (val: string) => boolean
|
||
|
|
},
|
||
|
|
setup(props, ctx) {
|
||
|
|
let input: HTMLInputElement | null = null
|
||
|
|
return () => (
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
accept=".png,.jpeg,.jpg,.svg"
|
||
|
|
style="display:none"
|
||
|
|
ref={(el) => (input = el as any)}
|
||
|
|
onChange={(e) => {
|
||
|
|
const file: File | undefined = (e.target as any).files?.[0]
|
||
|
|
if (!file) return
|
||
|
|
console.log(file.size, props.size)
|
||
|
|
if (file.size > props.size * 1000 * 1000) {
|
||
|
|
message.warn(`大小不得超过${props.size}mb`)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
upload(file, 'test').then((res) => {
|
||
|
|
console.log(res)
|
||
|
|
ctx.emit('update:value', res)
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all cursor-pointer bg-cover bg-no-repeat bg-center"
|
||
|
|
style={{
|
||
|
|
width: props.width + 'px',
|
||
|
|
height: props.width / props.ratio + 'px',
|
||
|
|
backgroundImage: `url('${props.value}')`
|
||
|
|
}}
|
||
|
|
onClick={() => {
|
||
|
|
input?.click()
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{!props.value && <OhVueIcon name="md-upload" scale={2} fill="rgba(0,0,0,0.2)" />}
|
||
|
|
</div>
|
||
|
|
<div class="text-xs mt-1 text-black/60">支持上传 .png, .jpeg, .jpg, .svg</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
})
|