AttachmentDialog

组件描述组件描述组件描述组件描述组件描述组件描述。

基础用法

基础用法基础用法基础用法基础用法基础用法基础用法。

basic.vue

<template>
  <dk-attachment-dialog ref="attachmentDialog" @confirm="onConfirm" />
  <p><el-button type="primary" @click="show()">点击显示附件弹窗</el-button></p>
  <p class="m-b">选中的图片:</p>
  <ul class="attachment-dialog-demo">
    <li v-for="(item, key) in files" :key="key">
      <el-image
        :src="item.url"
        alt=""
        style="width: 100px; height: 100px"
        fit="cover"
      />
    </li>
  </ul>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const attachmentDialog = ref()

const files: any = ref([])

const show = () => {
  // 显示 附件弹窗
  attachmentDialog.value.open()
}

// 选择附件后的回调
const onConfirm = (chooseFileList: any) => {
  files.value = chooseFileList
}
</script>
<style scoped lang="scss">
.attachment-dialog-demo {
  display: flex;
  flex-wrap: wrap;

  li {
    width: 100px;
    margin: 5px;
  }
}
</style>

组件配置

AttachmentDialog Props

属性	说明	类型	默认值
title	弹窗的标题	string	对应type名称
type	参数类型	string	number
accept	附件上传的accept	string	对应type类型

AttachmentDialog Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void
confirm	选择附件回调	(chooseFileList: Array) => void