<template>
    <div class="ht-base-upload-drag-demo">
        <ht-base-upload
                multiple
                type="drag"
                :max-size="20480"
                :on-exceeded-size="handleMaxSize"
                action="//jsonplaceholder.typicode.com/posts/">
            <ht-base-icon class="demo-upload-drag-icon" type='LiRa_upload'/>
            <p class="demo-upload-text">点击或将文件拖拽到这里上传</p>
            <p class="demo-upload-hint">支持单个或批量上传，大小不超过20MB</p>
        </ht-base-upload>
    </div>
</template>
<script>
    export default {
        name: 'HtBaseUploadDragDemo',
        methods: {
            handleMaxSize() {
                this.$HtBaseMessage.error('文件大小不超过20MB！')
            }
        }
    }
</script>
<style lang="less">
    .ht-base-upload-drag-demo {
        .ht-base-upload {
            .demo-upload-drag-icon {
                font-size: 24px;
                color: #595959;
            }

            .demo-upload-text {
                font-size: 12px;
                margin: 0 0 4px;
                color: #595959;
            }

            .demo-upload-hint {
                font-size: 12px;
                color: #ccc;
            }

            &:hover {
                .demo-upload-drag-icon, .demo-upload-text, .demo-upload-hint {
                    color: #228EF8;
                }
            }
        }
    }
</style>
