103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
import { defineComponent } from 'vue'
|
|
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
|
import { MdUpload, FaEye } from 'oh-vue-icons/icons'
|
|
import upload from './upload'
|
|
import 'viewerjs/dist/viewer.css'
|
|
import { api as showViewer } from 'v-viewer'
|
|
import { globalToast } from '@/main'
|
|
import useUserStore from '@/user/useUserStore'
|
|
import useRouterStore from '@/useRouterStore'
|
|
|
|
addIcons(MdUpload, FaEye)
|
|
|
|
// !清 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 el = e.target as any
|
|
const file: File | undefined = el.files?.[0]
|
|
el.value = ''
|
|
if (!file) return
|
|
if (file.size > props.size * 1000 * 1000) {
|
|
globalToast.warning(`大小不得超过${props.size}mb`)
|
|
return
|
|
}
|
|
upload(file, 'test').then((res) => {
|
|
ctx.emit('update:value', res)
|
|
})
|
|
}}
|
|
/>
|
|
<div
|
|
class="flex justify-center items-center rounded bg-slate-200 hover:bg-slate-300 transition-all bg-cover bg-no-repeat bg-center cursor-pointer shadow"
|
|
style={{
|
|
width: props.width + 'px',
|
|
height: props.width / props.ratio + 'px',
|
|
backgroundImage: `url('${props.value}')`
|
|
}}
|
|
onClick={() => {
|
|
if (useUserStore().isLogin) {
|
|
input?.click()
|
|
} else {
|
|
globalToast.warning('请先登录')
|
|
useRouterStore().go('global-login')
|
|
}
|
|
}}
|
|
>
|
|
{props.value ? (
|
|
<div class="w-full h-full opacity-0 hover:opacity-100 relative transition-all bg-slate-800/20 flex justify-center items-center">
|
|
<div
|
|
class="px-1 rounded hover:bg-white/20"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
showViewer({
|
|
images: [props.value],
|
|
options: {
|
|
navbar: false,
|
|
toolbar: false
|
|
}
|
|
})
|
|
}}
|
|
>
|
|
<OhVueIcon name="fa-eye" scale={1.2} fill="rgba(255,255,255,.4)" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<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>
|
|
)
|
|
}
|
|
})
|