XAttachment 附件

示例

基础用法

• 

  food.jpeghttp://dummyimage.com/120x90
• 

  http://dummyimage.com/200x300food.jpeghttp://dummyimage.com/200x300
• 

  food.jpeghttp://dummyimage.com/300x300/FF0000
• 

<template>
  <div>
    <XAttachment
      size="small"
      v-model="fileList"
      v-model:select-value="selected"
      :limit="5"
      @change="onChange"
      @click="onClick"
      :uploader="uploader"
      :addable="true"
      clickable
      selectable
      :previewable="true"
      :removable="true"
      :downloadable="true"
      :multiple="true">
    </XAttachment>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { XAttachment, type AttachmentFile } from '@vtj/ui';
  import { delay } from '@vtj/utils';

  const fileList = ref<AttachmentFile[]>([
    {
      url: 'http://dummyimage.com/120x90',
      name: 'food.jpeg'
      // type: 'img'
    },
    {
      url: 'http://dummyimage.com/200x300',
      name: 'http://dummyimage.com/200x300food.jpeg'
      // type: 'img'
    },
    {
      url: 'http://dummyimage.com/300x300/FF0000',
      name: 'food.jpeg',
      type: 'img'
    },
    {
      url: 'http://dummyimage.com/300x300'
      // name: 'food.docx'
      // type: 'word'
    }
  ]);

  const selected = ref({
    url: 'http://dummyimage.com/120x90'
  });

  const onChange = (files: any) => {
    console.log('onChange', files);
  };

  const onClick = (file: any) => {
    console.log('click', file);
  };

  const uploader: any = async () => {
    await delay(1000);
    // return null;
    return 'https://oss.newpearl.com/newpearl/image/2024-07-15/acd6ff3e0bf8fce74d795a870c9069e6.png';
  };
</script>

模式用法

列表模式

• 

  food.jpeghttp://dummyimage.com/120x90
• 

  http://dummyimage.com/200x300food.jpeghttp://dummyimage.com/200x300
• 

  food.jpeghttp://dummyimage.com/300x300/FF0000
• 

  http://dummyimage.com/300x300

---

卡片模式

• 

  food.jpeghttp://dummyimage.com/120x90
• 

  http://dummyimage.com/200x300food.jpeghttp://dummyimage.com/200x300
• 

  food.jpeghttp://dummyimage.com/300x300/FF0000
• 

• 

  food.jpeghttp://dummyimage.com/120x90
• 

  http://dummyimage.com/200x300food.jpeghttp://dummyimage.com/200x300
• 

  food.jpeghttp://dummyimage.com/300x300/FF0000
• 

<template>
  <div>
    <h1>列表模式</h1>
    <XAttachment
      size="large"
      list-type="list"
      v-model="fileList"
      v-model:select-value="selected"
      @change="onChange"
      @click="onClick"
      :uploader="uploader"
      :addable="true"
      clickable
      selectable
      :previewable="true"
      :removable="true"
      :downloadable="true"
      :multiple="true"></XAttachment>
    <hr />
    <h1>卡片模式</h1>
    <XAttachment v-model="fileList"></XAttachment>
    <XAttachment size="large" v-model="fileList"></XAttachment>

    <XAttachment
      multiple
      :formatter="formatter"
      :valueFormatter="valueFormatter"
      :uploader="uploader"
      v-model="files"
      :auto-upload="true"
      style="
        border: 1px red solid;
        display: flex;
        justify-content: center;
      "></XAttachment>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { XAttachment, type AttachmentFile } from '@vtj/ui';
  import { delay } from '@vtj/utils';

  const fileList = ref<AttachmentFile[]>([
    {
      url: 'http://dummyimage.com/120x90',
      name: 'food.jpeg'
    },
    {
      url: 'http://dummyimage.com/200x300',
      name: 'http://dummyimage.com/200x300food.jpeg'
    },
    {
      url: 'http://dummyimage.com/300x300/FF0000',
      name: 'food.jpeg',
      type: 'img'
    },
    {
      url: 'http://dummyimage.com/300x300'
    }
  ]);

  const selected = ref({
    url: 'http://dummyimage.com/120x90'
  });

  const onChange = (files: any) => {
    console.log('onChange', files);
  };

  const onClick = (file: any) => {
    console.log('click', file);
  };

  const uploader: any = async () => {
    await delay(1000);
    return 'https://oss.newpearl.com/newpearl/image/2024-07-15/acd6ff3e0bf8fce74d795a870c9069e6.png';
  };

  const formatter: any = async (files: any) => {
    console.log('formatter', files);
    for (const file of files) {
      file.__url = file.url;
      file.url = file.url + '?only=true';
    }
    return files;
  };

  const valueFormatter: any = async (files: any) => {
    console.log('valueFormatter', files);
    return files.map((n: any) => {
      return {
        url: n.url,
        name: n.name
      };
    });
  };

  const files = ref([]);
</script>

插槽用法

• 

  food.jpeghttp://dummyimage.com/120x90
• 

  http://dummyimage.com/200x300food.jpeghttp://dummyimage.com/200x300
• 

  food.jpeghttp://dummyimage.com/300x300/FF0000
• 

提示文字提示文字提示文字提示文字提示文字

<template>
  <div>
    <XAttachment
      size="small"
      v-model="fileList"
      v-model:select-value="selected"
      :limit="5"
      @change="onChange"
      @click="onClick"
      :uploader="uploader"
      :addable="true"
      clickable
      selectable
      :previewable="true"
      :removable="true"
      :downloadable="true"
      :multiple="true">
      <template #tip>
        <div>提示文字提示文字提示文字提示文字提示文字</div>
      </template>
    </XAttachment>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { XAttachment, type AttachmentFile } from '@vtj/ui';
  import { delay } from '@vtj/utils';

  const fileList = ref<AttachmentFile[]>([
    {
      url: 'http://dummyimage.com/120x90',
      name: 'food.jpeg'
    },
    {
      url: 'http://dummyimage.com/200x300',
      name: 'http://dummyimage.com/200x300food.jpeg'
    },
    {
      url: 'http://dummyimage.com/300x300/FF0000',
      name: 'food.jpeg',
      type: 'img'
    },
    {
      url: 'http://dummyimage.com/300x300'
    }
  ]);

  const selected = ref({
    url: 'http://dummyimage.com/120x90'
  });

  const onChange = (files: any) => {
    console.log('onChange', files);
  };

  const onClick = (file: any) => {
    console.log('click', file);
  };

  const uploader: any = async () => {
    await delay(1000);
    return 'https://oss.newpearl.com/newpearl/image/2024-07-15/acd6ff3e0bf8fce74d795a870c9069e6.png';
  };
</script>

API

属性

属性名	说明	类型	默认值
modelValue	列表显示的文件	array	-
selectValue	选中值，开启 selectable 有效	object | array	-
uploader	文件上传方法	function	-
multiple	支持多文件上传, 同时在selectable时控制多选	boolean	-
limit	允许上传文件的最大数量	number	-
accept	接受上传的文件类型	string	'image/* ,audio/* ,video/*,.zip,.svg,.pdf,.json,.docx,.xlsx,.pptx,.doc,.xls,.ppt'
disabled	禁止更改文件，不能上传和删除	boolean	-
size	图片显示尺寸	string	default
thumbnail	缩略图生成方法	function	-
addable	可增加	boolean	true
removable	可删除	boolean	true
downloadable	可下载	boolean	true
previewable	可预览	boolean	true
selectable	可选择	boolean	false
clickable	可点击	boolean	false
listType	列表类型	string<card | list>	card
beforeUpload	上传前守卫	function	-
limitSize	允许上传的文件大写最大值， 支持 K / M	string	10M
formatter	格式化	function	-
valueFormatter	列表数据格式化	function	-
previewer	预览器方法	function	-
downloader	下载器方法	function	-
autoUpload	是否自动上传文件	boolean	true

事件

名称	说明	参数
select	选择文件上传	-
click	点击文件	-
change	文件数据改变	-
remove	删除	-
download	下载	-
preview	预览	-

插槽

插槽名	说明	类型
tip	提示信息	-