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

dabuside commented 1 year ago

[x] 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 https://github.com/IDuxFE/idux/blob/b03eadde3c9a119ead5f440ac96fc5ee03e5db7b/packages/components/config/src/defaultConfig.ts#L416-L424 https://github.com/IDuxFE/idux/blob/b03eadde3c9a119ead5f440ac96fc5ee03e5db7b/packages/components/upload/src/utils/icon.ts#L60-L64

idux-bot[bot] commented 1 year ago

Translation of this issue:

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

[x] I have searched the [isSues] (https://github.com/iduxfe/idux/isSues) of this repository and believe that this is not a duplicate.

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 commented 1 year ago

因为现在按钮处于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 commented 1 year ago

因为现在按钮处于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

IDuxFE / idux