标签：svga url list upload item file antd preview icon

node_modules\ant-design-vue\es\upload\UploadList.js

修改源码render函数，其实改的是渲染出来的样式，包括背景图和预览icon

    var list = items.map(function (file) {
       // 重点这里判断svga
       const svgaFlg = file.name.includes('svga')
         if(file.status === 'done' && file.response){
        file.url = 'https://qnp.chumanapp.com/' + file.response.key
       }
      
      var _classNames, _classNames2;

      var progress = void 0;
      var icon = h(Icon, {
        attrs: { type: file.status === 'uploading' ? 'loading' : 'paper-clip' }
      });

      if (listType === 'picture' || listType === 'picture-card') {
        if (listType === 'picture-card' && file.status === 'uploading') {
          icon = h(
            'div',
            { 'class': prefixCls + '-list-item-uploading-text' },
            [locale.uploading]
          );
        } else if (!file.thumbUrl && !file.url  && !svgaFlg ) {    // 重点这里，当不是svga的时候，跳过这里
          icon = h(Icon, { 'class': prefixCls + '-list-item-thumbnail', attrs: { type: 'picture', theme: 'twoTone' }
          });
        } else {
          var thumbnail = isImageUrl(file) ? h('img', {        // 重点这里， 是svga的时候 
            attrs: {
              src: file.thumbUrl || file.url,
              alt: file.name
            },
            'class': prefixCls + '-list-item-image'
          }) : h(Icon, {
            attrs: { type: 'file', theme: 'twoTone' },
            'class': prefixCls + '-list-item-icon' });
          icon = h(
            'a',
            {
              'class': prefixCls + '-list-item-thumbnail',
              on: {
                'click': function click(e) {
                  return _this2.handlePreview(file, e);
                }
              },
              attrs: {
                href: file.url || file.thumbUrl,
                target: '_blank',
                rel: 'noopener noreferrer'
              }
            },
            [thumbnail]
          );
        }
      }

....

最后解决的办法，并没有改源码，只是改了css样式

<style lang="less">
.uploadByFanWrap .uploadByFanItem{
  .ant-upload-list-item-actions{
      a{
        pointer-events: auto !important;
        opacity: 1 !important;
      }
    }
}
</style>

 

// 预览函数

    <a-modal       v-if="giftVisible"       destroyOnClose       v-model="giftVisible"       @cancel="giftVisible = false"       title="查看SVGA动效"       :footer="null">       <div id="svga" style="max-height: 300px;"></div >     </a-modal>

    handlePreviewFile (file) {
      if (!file.url) {
        file.url = `${this.constv.QINIU_OFFICIAL_CDN_URL}${file.response.key}`
      }
      this.giftVisible = true
      this.$nextTick(() => {
        showSVGA('#svga', file.url)
      })
    },

        import { showSVGA } from '@/utils/util'                 "svgaplayerweb": "^2.3.1",

 

标签：svga,url,list,upload,item,file,antd,preview,icon
来源： https://www.cnblogs.com/dhjy123/p/15320231.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。