knockout.js 如何将dxFileUploader配置为像一个简单的按钮一样显示？

igetnqfo 于 2022-11-10 发布在其他

关注(0)|答案(3)|浏览(102)

我有一个dxFileUploader：

<div data-bind="dxFileUploader: { buttonText: 'Select file', labelText: 'Drop file here', accept: 'image/*' }"></div>

在UI上，我得到了一个周围的白色区域（div）。
如何摆脱它？我只需要一个简单的按钮，一个图标，没有文本，看起来像这样：

<div data-bind="dxButton: { icon: 'arrowup' }"></div>

knockout.js

来源：https://stackoverflow.com/questions/28582262/how-to-configure-dxfileuploader-to-show-up-like-a-simple-button

3条答案

按热度按时间

slwdgvem1#

为您的文件上载程序使用以下样式

.dx-fileuploader, 
.dx-fileuploader * {
    display: inline-block;    
    margin: 0;
    vertical-align: middle;
}
.dx-fileuploader-input-container {
    display: none;
}
.dx-fileuploader-wrapper, 
.dx-fileuploader-input-wrapper{
    padding: 0;
    border: none;
}

要将图标设置为按钮，请执行以下操作

$("#fileUploader").find(".dx-button").dxButton("option", "icon", "arrowup");

如果您还需要隐藏选定的文件信息，请再添加一个css规则

.dx-fileuploader-files-container {
    display: none;
}

看小提琴http://jsfiddle.net/tabalinas/uf5vzgdw/

赞(0）回复(0）举报 2022-11-10

pgx2nnw82#

只需设置[showFileList]="false"即可
例如：

<dx-file-uploader
  selectButtonText="Select File..."
   [showFileList]="false"
   labelText
   accept="image/*"
   uploadMode="useForm">
 </dx-file-uploader>

赞(0）回复(0）举报 2022-11-10

oyxsuwqo3#

你可以用fontawesome在

onContentReady = e => {
    const node = document.createElement('I');
    node.className = 'cstm-icon fas fa-upload'
    document.querySelector('.uploader-container .dx-button-text').appendChild(node);
}

并添加一些CSS

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 如何将dxFileUploader配置为像一个简单的按钮一样显示？

3条答案

相关问题

热门标签

最新问答