Blazor组件自做八 : 使用JS隔离封装屏幕键盘kioskboard.js组件
1. 运行截图
演示地址
2. 在文件夹wwwroot/lib,添加kioskboard子文件夹,添加kioskboards.js文件
2.1 常规操作,懒加载js库, ??
export function addScript(url) {
let scriptsIncluded = false;
let scriptTags = document.querySelectorAll('head > script');
scriptTags.forEach(scriptTag => {
if (scriptTag) {
let srcAttribute = scriptTag.getAttribute('src');
if (srcAttribute && srcAttribute.startsWith(url)) {
scriptsIncluded = true;
return true;
}
}
});
if (scriptsIncluded) { //Prevent adding JS scripts to page multiple times.
//if (window.KioskBoard)
return true;
}
let script = document.createElement('script');
script.src = url;
document.head.appendChild(script);
return false;
}
export function init(className, option) {
console.info(className, option);
KioskBoard.run('.' + className, option);
return true;
}
2.2 打开项目源码下载复制相关键盘配置json: kioskboard-keys-*.json ,库文件: kioskboard-aio-2.1.0.min.js 放到wwwroot/lib/kioskboard文件夹
项目源码 Github | Gitee
kioskboard-aio-2.1.0.min.js
kioskboard-keys-*.json
3. 打开Components文件夹 , 新建三个文件
3.1 KeyboardOption 键盘配置类
KeyboardOption.cs代码
using System.Text.Json.Serialization;
namespace Blazor100.Components
{
///
/// 键盘语言布局
///
public enum KeyboardKeysType
{
arabic,
english,
french,
german,
hungarian,
persian,
russian,
spanish,
turkish
}
///
/// 键盘类型,全键盘 || 字母 || 小数字键盘
///
public enum KeyboardType
{
all,
keyboard,
numpad,
}
///
/// 对齐, 顶端 || 底部
///
public enum KeyboardPlacement
{
bottom,
top
}
///
/// 特殊符号键盘类型, 默认 || 欧洲 || 自定义
///
public enum KeyboardSpecialcharacters
{
all,
europe,
customer
}
///
/// 键盘主题
///
public enum KeyboardTheme
{
light,
dark,
flat,
material,
oldschool
}
///
/// 打开或关闭键盘的 CSS 动画样式
///
public enum KeyboardCssAnimationsStyle
{
slide,
fade,
flat,
material,
oldschool
}
public class KeyboardOption
{
///
/// 必需:必须为自定义键定义一个对象数组。
public List>? keysArrayOfObjects { get; set; } = null;
///
/// 键盘类型
[JsonIgnore]
public KeyboardKeysType KeyboardKeysType { get; set; } = KeyboardKeysType.english;
///
/// 仅当“keysArrayOfObjects”为“null”时才需要。
public string? keysJsonUrl { get => keysArrayOfObjects == null ? $"./lib/kioskboard/kioskboard-keys-{KeyboardKeysType}.json" : null; }
///
/// 特殊符号键盘类型, 默认 || 欧洲 || 自定义
///
[JsonIgnore]
public KeyboardSpecialcharacters KeyboardSpecialcharacters { get; set; } = KeyboardSpecialcharacters.all;
///
/// 自定义特殊符号键盘 , 字符串数组覆盖内置的特殊字符。
[JsonIgnore]
public string[]? CustomerKeyboardSpecialcharacters { get; set; }
string[] KeyboardSpecialcharactersEurope { get; set; } = { "#", "€", "?" };
///
/// 可选：自定义特殊符号键盘
///
public string[]? keysSpecialCharsArrayOfStrings
{
get =>
CustomerKeyboardSpecialcharacters != null ?
CustomerKeyboardSpecialcharacters :
KeyboardSpecialcharacters == KeyboardSpecialcharacters.europe ?
KeyboardSpecialcharactersEurope :
null;
}
///
/// 可选：可以设置一个数字数组来覆盖内置的小键盘键。（从 0 到 9，顺序不限。）
/// 例如 [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
///
public string? keysNumpadArrayOfNumbers { get; set; } = null;
///
///可选：自定义键的语言代码 (ISO 639-1)（用于语言支持）
///
public string language { get; set; } = "en";
///
/// 键盘主题
[JsonIgnore]
public KeyboardTheme Theme { get; set; } = KeyboardTheme.light;
public string theme { get => Theme.ToString(); }
///
/// 大写或小写锁定。默认false小写
///
public bool capsLockActive { get; set; } = false;
///
/// 允许或阻止真实/物理键盘的使用。“false”时被阻止
public bool allowRealKeyboard { get; set; } = true;
///
/// 允许或阻止使用移动键盘。当 "false"
///
public bool allowMobileKeyboard { get; set; } = true;
///
/// 打开或关闭键盘的 CSS 动画
///
public bool cssAnimations { get; set; } = true;
///
/// CSS 动画持续时间为毫秒
///
public int cssAnimationsDuration { get; set; } = 360;
///
/// 打开或关闭键盘的 CSS 动画样式 => "slide" || "fade"
///
[JsonIgnore]
public KeyboardCssAnimationsStyle CssAnimationsStyle { get; set; } = KeyboardCssAnimationsStyle.slide;
public string cssAnimationsStyle { get => CssAnimationsStyle.ToString(); }
///
/// 启用或禁用键盘上的空格键功能。
///
public bool keysAllowSpacebar { get; set; } = true;
///
/// 空格键（空格键）的文本。不设置显示为" "
///
public string keysSpacebarText { get; set; } = "Space";
///
/// 键的字体系列
///
public string keysFontFamily { get; set; } = "sans-serif";
///
/// 按键的字体大小
///
public string keysFontSize { get; set; } = "22px";
///
/// 按键的字体粗细
///
public string keysFontWeight { get; set; } = "normal";
///
/// 图标键的大小
///
public string keysIconSize { get; set; } = "25px";
///
/// 将文档滚动到 input/textarea 元素的顶部或底部（通过放置选项）
///
public bool autoScroll { get; set; } = false;
}
}
3.2 OnScreenKeyboard.razor文件
由于不需要界面代码,就留一行命名空间
@namespace Blazor100.Components
3.3 OnScreenKeyboard.razor文件
代码summary为屏幕键盘 OnScreenKeyboard 组件基类,以便有需要时可以直接继承新建个性化独立键盘类
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
namespace Blazor100.Components;
///
/// 屏幕键盘 OnScreenKeyboard 组件基类
///
public partial class OnScreenKeyboard : IAsyncDisposable
{
[Inject] IJSRuntime? JS { get; set; }
private IJSObjectReference? module;
private DotNetObjectReference? InstanceWebApi { get; set; }
///
/// 获得/设置 组件class名称
///
[Parameter]
public string ClassName { get; set; } = "virtualkeyboard";
///
/// 获得/设置 键盘语言布局
///
[Parameter]
public KeyboardKeysType? KeyboardKeys { get; set; } = KeyboardKeysType.english;
///
/// 获得/设置 键盘类型
///
[Parameter]
public KeyboardType Keyboard { get; set; } = KeyboardType.all;
///
/// 获得/设置 对齐
///
[Parameter]
public KeyboardPlacement Placement { get; set; } = KeyboardPlacement.bottom;
///
/// 获得/设置 对齐
///
[Parameter]
public string Placeholder { get; set; } = "";
///
/// 获得/设置 对齐
///
[Parameter]
public bool Specialcharacters { get; set; } = true;
///
/// 获得/设置 配置
///
[Parameter]
public KeyboardOption? Option { get; set; } = new KeyboardOption();
protected override async Task OnAfterRenderAsync(bool firstRender)
{
try
{
if (firstRender)
{
module = await JS!.InvokeAsync("import", "./lib/kioskboard/kioskboards.js");
InstanceWebApi = DotNetObjectReference.Create(this);
await module.InvokeVoidAsync("addScript", "./lib/kioskboard/kioskboard-aio-2.1.0.min.js");
Option??= new KeyboardOption();
if (KeyboardKeys != null) Option.KeyboardKeysType = KeyboardKeys!.Value;
try
{
await module.InvokeVoidAsync("init", ClassName, Option);
}
catch (Exception)
{
await Task.Delay(200);
await module.InvokeVoidAsync("init", ClassName, Option);
}
}
}
catch (Exception e)
{
if (OnError != null) await OnError.Invoke(e.Message);
}
}
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
await module.DisposeAsync();
}
}
///
/// 获得/设置 错误回调方法
///
[Parameter]
public Func? OnError { get; set; }
}
4. Pages文件夹添加OnScreenKeyboards.razor文件,用于演示组件调用.
这里演示了六种不同的键盘风格参数调用,差别大家可以自己调试一下代码体会.
@page "/onscreenkeyboards"
keys1 = new Dictionary() { { "0", "L" }, { "1", "O" } };
static Dictionary keys2 = new Dictionary() { { "0", "V" }, { "1", "E" } };
static List> keysArray = new List>() { keys1, keys2 };
KeyboardOption Option1 = new KeyboardOption()
{
//keysArrayOfObjects = keysArray,
keysFontFamily = "Barlow",
keysFontWeight = "500",
Theme = KeyboardTheme.dark,
};
KeyboardOption Option2 = new KeyboardOption()
{
KeyboardSpecialcharacters = KeyboardSpecialcharacters.europe
};
KeyboardOption Option3 = new KeyboardOption()
{
CustomerKeyboardSpecialcharacters = new string[] { "中", "国", "女", "足", "牛啊" }
};
protected override void OnInitialized()
{
base.OnInitialized();
}
}
5. _Imports.razor加入一行引用组件的命名空间.
@using Blazor100.Components
6. 首页引用组件演示页 Shared/NavMenu.razor 添加导航
7. F5运行程序
至此,使用JS隔离封装屏幕键盘kioskboard.js组件大功告成! Happy coding!
Blazor组件自做系列