0.0.3-rc.2 • Published 2 years ago
sam-terminal v0.0.3-rc.2
sam-terminal
sam-terminal
是一个网页命令控制器。
它期望通过命令交互来提高业务使用体验。
sam-terminal
是低命令
概念的一个实现。低命令
的理念是命令高效驱动业务。
Getting Started 使用指南
Prerequisites 项目使用条件
Chrome >= 66
Node.js >= 10.x
Installation 安装
npm i sam-terminal --save
API讲解
import terminal, { parseLowcommand } from 'sam-terminal';
const cmd = new terminal({
cmdList: [
{
cmdName: '命令名', argList: [{ argName: '参数名', list:['参数值1','参数值2'] }],
}
],
zIndex: 999,
className: 'helloLowCommand',
cb({ cmd, ref }) {
console.log('解析结果', parseLowcommand(cmd));
console.log('terminal引用', ref);
}
});
cmd.genDom({
appendToSelector: 'body'
});
cmd.show();
cmd.hide();
上述代码中,我们从sam-terminal
引入了terminal
类和parseLowcommand
方法。terminal
类的构造函数入参有cmdList
,cb
,zIndex
,className
。cmdList
是一个对象数组。它采用LCS(最长公共子序列)算法实时匹配用户的输入。
其中,数组项对象的cmdName
是命令名称,argList
是命令对应的参数对象数组。argList
数组项对象的argName
是参数名称,list
则是参数候选值。
cb
是一个回调函数。是用户回车Enter之后调用的函数。
其注入的参数是一个对象,包含两个字段cmd
和ref
。cmd
是一个字符串,即用户输入的字符串。ref
是一个自带的jQuery对象,即terminal
类实例生成的命令输入控制器。
zIndex
属性用来指定命令输入控制器的层级。通常用来防止被页面UI库的遮罩层给覆盖掉。className
属性用来指定命令输入控制器的class名称。名称需要唯一性。
terminal
类的实例有三个常用方法genDom
,show
,hide
。genDom
方法用来生成命令输入控制器的dom,并通过参数appendToSelector
把命令输入控制器的dom插入css选择器指定的位置。show
方法顾名思义显示命令输入控制器。hide
方法则与show
相反,隐藏命令输入控制器。
Usage example 使用示例
参考项目demo的文件demo\src\pages\index.tsx
License 授权协议
这个项目 MIT 协议, 请点击 LICENSE.md 了解更多细节。