Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IxUpload] 默认配置下,list插槽中的下载按钮显示不出来 #1703

Open
1 task done
dabuside opened this issue Sep 25, 2023 · 3 comments
Open
1 task done
Labels

Comments

@dabuside
Copy link
Contributor

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

link

Steps to reproduce

What is expected?

显示下载按钮

What is actually happening?

不显示下载按钮

Environment Info

Any additional comments? (optional)

默认配置没有download icon

uploadFiles: {
type: 'text',
icon: {
preview: 'zoom-in',
file: 'paper-clip',
remove: 'delete',
retry: 'edit',
},
},

const downloadNode = renderIcon(icons.value.download, {
class: `${cpmClasses.value}-icon-opr ${cpmClasses.value}-icon-download`,
onClick: () => fileOperation.download(file),
title: locale.upload.download,
})

@idux-bot idux-bot bot added the IxUpload label Sep 25, 2023
@idux-bot
Copy link

idux-bot bot commented Sep 25, 2023

Translation of this issue:

[Xupload] Under the default configuration, the download button in the list slot cannot be displayed

REPRODUCTION LINK

[link] (https://playground.idux.site/#eyjqbgf5z3jvdw5kqxbwlnz1zSi6ijx0ZW1WBGF0ZT5CBIAGPEL4RHD2VDMLKZXI +xg4g 4TM90A Wzpy2f0aw9uuhjvdmlkzxi+xg4gicagica8sxhnb2rhbfbyb3zgvyPlxuicagicAgicAgicAgica8sxhnzywdluhjvdmlkzxi+XG4GICAGAGPEFWCCAVPLXU ICAGICAGICA8L0L0L4TWVZC2FNZVBYB3ZPZGVYPLXUICAGICAGPC9jee1vzgfsuhjvdmlkzxi+XG4GICAGPC9jee5vdglmdglVBLXPLXUICA8L0L0L0L0L0L 4RHJHD2VYUHJVDMLKZXI+XG48L3RLBXBSYXRLPLXUXG48C2NYAXB0IGXHBMC9XCJ0C1wiihhnldhvwPlxuaw1wb3j0iHSGC2V0DXIH0GZBSANLI9ZZXR 1CELKDXGUANMNXG5PBXBVCNQGQXBWIGZYB20GJY4VQXBWLNZ1ZSDCBNNLDHVWR1ECGPXG48L3NNNNLWDD5CBIISISIK52DGVTCGXHDGU+XG4GIDXJJ EFVWBG9HZCB2LB2LB2LBZGVSOMZPBGVZPVWIZMLSZXNCIIBHY3RPB249XCJODHRWCZL3J1BI5TB2NR LHZTMZNTRCIJ5CBIAGICA8SXHCDXR0B24+VXBSB2FKPC9jej1DHRVBJ5CBIAGICA8DGVTCGXHDGUGI2XPC3Q+XG4GICGXHVCGXVYWRCYBAZG93B93B MXVYWQ9XCJKBFILZ5CBIAGICA8L3RLBXBSYXRLPLXUICA8L4VXBSBSB2FKPLXUICBCBIAGA8SXHVCGXWQGDPMAWXLCZ1CIMZZXCIGYWN0N0 AW9UPVWIHR0CHM6LY9YDW4UBW9JA3KUAW8VDJMVNZU2NGJJNGYTNZS00M2Y3LWJJNTGTNDY3LWUZMZU0XCI+XG4GICAGPEL4QNVWBBG9Hzdwvs XHCDXR0B24+XG4GICAGPHRLBXBSYXRLICNSAXN0PLXUICAGPEL4VXBSB2FKRMLSZMGQGRVD25SB2FKPVWNVBJ1CIMLJB25CII8+XG4GICAGP C90ZW1WBGF0ZT5CBIAGPC9jefvWBG9Hzd5CBJWVDGVTCGXHDGU+XG5CBJXZY3JPCHQGC2V0DXAGBGFUZZ1CINRZXCI+XG5PBXBCNQGFSBMCM9TICD2D Wunxg5cbmnvbnvn0igzpbgvzid0cmvmvmkFTCBIAGE1XUICAGTLETOGJ3RC3QXJYXCBIAGICBUYW1LOIANAWR1EC5ZDMCNLFXR1CZOGJ3NLC3 Mnlfxuicb9lfxSLCBMNVBNBNN0IGLJB24GPSB7ZG93BMXVYWQ6icdkb3Dubg9Hzcd9xg5cbmnnnn0igrsid0gkkge1xuGXUFVXUPC9ZY 3jpchq+xg4ifq ==)

STEPS To Reproduce

What is exfected?

Show the download button

What is actually happy?

Do not display the download button

ENVIRONMENT Info

ANY Additional Comments? (Optional)

The default configuration is not download icon
https://github.com/iduxfe/idux/blob/b03eadde3c9a119EAD5F440AC96FC5EE03E5DB7B/packages/Comfig/defaultConfig.ts#L416 -L424
https://github.com/iduxfe/idux/blob/b03eadde3c9a119EAD5F440AC96FC5EE03E5DB7B7B7B7B/packages/compload/Src/UTILS/ICON.TS#L60-L60-l6 4

@threedayAAAAA
Copy link
Contributor

因为现在按钮处于file状态,你配置file状态的icon就好了

<template>
  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
    <IxButton>Upload</IxButton>
    <template #list>
      <IxUploadFiles @download="dl"/>
    </template>
  </IxUpload>
  <!-- <IxUploadFiles @download="dl" :icon="icon"/> -->
  <IxIcon name="download" />
    <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
    <IxButton>Upload</IxButton>
    <template #list>
      <IxUploadFiles @download="dl" :icon="icon"/>
    </template>
  </IxUpload>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const files = ref([
  {
    key: 'test1',
    name: 'idux.svg',
    status: 'success',
  },
])
const icon = {
  file: 'download',
}
const dl = () => {
  alert(1)
}
</script>

@dabuside
Copy link
Contributor Author

因为现在按钮处于file状态,你配置file状态的icon就好了

<template>
  <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
    <IxButton>Upload</IxButton>
    <template #list>
      <IxUploadFiles @download="dl"/>
    </template>
  </IxUpload>
  <!-- <IxUploadFiles @download="dl" :icon="icon"/> -->
  <IxIcon name="download" />
    <IxUpload v-model:files="files" action="https://run.mocky.io/v3/7564bc4f-780e-43f7-bc58-467959ae3354">
    <IxButton>Upload</IxButton>
    <template #list>
      <IxUploadFiles @download="dl" :icon="icon"/>
    </template>
  </IxUpload>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const files = ref([
  {
    key: 'test1',
    name: 'idux.svg',
    status: 'success',
  },
])
const icon = {
  file: 'download',
}
const dl = () => {
  alert(1)
}
</script>

是idux配置里面,默认值少配置了属性导致的。
理想情况下,应该显示file icon + 右侧 关闭 icon 以及 下载 icon

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants