XImportButton 导入按钮

支持 el-button 的 属性

示例

基础用法

<template>
  <div class="page">
    <XImportButton
      multiple
      :uploader="uploaderJSON"
      parser="json"
      type="success"
      size="large">
      导入JSON</XImportButton
    >

    <XImportButton
      multiple
      :uploader="uploaderText"
      parser="text"
      type="danger">
      导入Text</XImportButton
    >

    <XImportButton
      multiple
      :uploader="uploaderBase64"
      parser="base64"
      type="primary"
      size="small">
      导入Base64</XImportButton
    >
  </div>
</template>

<script setup lang="ts">
  import { XImportButton } from '@vtj/ui';

  import { downloadJson, downloadBlob, downloadUrl } from '@vtj/utils';

  const uploaderJSON = async (content: any) => {
    console.log('uploaderJSON', content);

    downloadJson(content, 'vtj.json');
    return true;
  };

  const uploaderText = async (content: any) => {
    console.log('uploaderText', content);

    downloadBlob(content, 'vtj.text');
    return true;
  };

  const uploaderBase64 = async (content: any) => {
    console.log('uploaderBase64', content);

    downloadUrl(content, 'vtj.jpg');
    return true;
  };
</script>

<style scoped>
  .page {
    display: flex;
    gap: 20px;
  }
</style>

API

属性

属性名	说明	类型	默认值
uploader	文件上传函数	function	-
multiple	允许上传多个文件	boolean	-
accept	接受上传的文件类型	string	-
parser	文件解析器	string | function	-

parser 类型配置

type	value	default value
string	text | json | base64
function	(file: File) => Promise<any>