复制
最后更新:
2023年2月10日11:57
通过管理
史蒂文
上创建:
2023年2月6日15:40
类别:
Blazor的UI
类型:
功能要求
为Telerik上传Blazor组件自定义上传文本和图标
这是不可能自定义文本和图标为teleerik上传Blazor组件。它总是没有选择文件。这不是一眼就能看出来的。
请求:
- 添加一个标题属性到上传组件，该组件允许您从默认的“选择文件”中更改文本。
- 增加了在上传按钮上设置图标的功能。
提出的代码:
<TelerikUpload标题＝“上传文件”图标＝“@SvgIcon。上传”…/>
我必须编写一些蹩脚的JavaScript互操作来实现这一点:
函数setTelerikUploadButtonText(文本） {//查找页面上所有的telerik blazor上传组件并更改上传按钮的文本。让取代了=0;常量defaultText =“上传”;//查找所有类为"k-upload-button"的按钮。每个上传组件都应该有一个。常量按钮=文档．getElementsByClassName(“k-upload-button”);为(让我=0;我<按钮。长度;我+ +){//找到类为"k-button-text"的span，并更改其文本。常量span = buttons[i]。getElementsByClassName(“k-button-text”);如果(跨越。长度>0） {//为span添加水平边距。跨越(0]。班级名册．添加(“px-2”);//修改文本。跨越(0]。innerHTML= text ??defaultText;//插入一个字体awesome图标。跨越(0]。insertAdjacentHTML(“afterbegin”，' ');//跟踪有多少按钮被更新。取代+ +;}}控制台．信息(”setTelerikUploadButtonText:“+代替+“按钮更新了。”);返回取代;}
///<摘要>///找到页面上的所有teleerik blazor上传组件并更改上传按钮的文本。///> < /总结///<返回>找到的上传组件按钮文本的数量&更换。< / >返回公共静态异步任务SetTelerikUploadButtonText(这IJSRuntime jSRuntime,字符串文本=“上传文件”）{等待jSRuntime。InvokeVoidAsync (“setTelerikUploadButtonText”、文本);}
截图:
复制
0评论