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 了解更多细节。