基于inquirer实现一个控制台多级选择交互功能( 二 )


叶子节点列表我们需要支持多选功能,这个功能我们可以直接复用中类型为的复选框来实现 。
const options1 = [{type: 'checkbox',name: 'choice',message: 'your choice:',default: 0,choices: [{ value: 1, name: '张三' },{ value: 2, name: '李四' }]}];const j = new JInquirer(options1);const res = j.prompt().then(res=>{console.log(res);});
运行结果如下图:
可以使用空格进行选择,ctrl + a 可以全选,ctrl + i 进行反选,回车确认选择内容 。
这里我们可以使用两个方案来实现:
(1)使用函数入参来记录选中的数据
我们可以将每次选中的数据在函数的入参中传入,每次回调时更新该参数即可 。
(2)在类中添加一个参数来记录 。
直接在类中添加一个公共参数来记录,这样读取会比较方便 。
比较了两种方法后,我觉得还是直接在类中添加一个公共参数来记录,这样读取会比较方便,所以最后选择了使用方案二来实现该功能 。
class JInquirer{constructor(options,config){this.options = options; //参数this.config = config || {}; //配置this.answer = {}; //输出结果容器this.tempList = {}; //中间值临时容器变量}}
使用方法 1、安装依赖
npm install @jyeontu/j-inquirer
2、在代码中引用
const JInquirer = require('@jyeontu/j-inquirer');
3、示例代码
const options1 = [{type:"input",message:"请输入你的姓名:",name:"name",notNull:true},{type: 'expandList',name: 'choice',message: '多级选择器测试:',choices:{'aa': [ 'aaa1', 'aaa2', 'aaa3', 'aaa4' ],'bb': [ 'bbb1', 'bbb2' ],'cc': [ 'ccc1' ]}}];const j = new JInquirer(options1);const res = j.prompt().then(res=>{console.log(res);});
源码地址
觉得有帮助的同学可以帮忙给我点个star,感激不尽~~~
有什么想法或者改良可以给我提个pr,十分欢迎~~~
有什么问题都可以在评论告诉我~~~
往期精彩
面试官:不使用怎么实现一个刮刮卡效果?
vue封装一个3D轮播图组件
vue实现一个鼠标滑动预览视频封面组件(精灵图版本)
node封装一个图片拼接插件
基于封装一个控制台文件选择器
node封装一个控制台进度条插件
密码太多不知道怎么记录?不如自己写个密码箱小程序
微信小程序实现一个手势图案锁组件
vue封装一个弹幕组件
为了学(mo)习(yu),我竟开发了这样一个插件
程序员的浪漫之——情侣日常小程序
vue简单实现词云图组件
说在后面
【基于inquirer实现一个控制台多级选择交互功能】这里是,喜欢算法,GDCPC打过卡;热爱羽毛球,大运会打过酱油 。毕业一年,两年前端开发经验,目前担任H5前端开发,算法业余爱好者,有空会刷刷算法题,平时喜欢打打羽毛球 ,也喜欢写些东西,既为自己记录,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解,写错的地方望指出,定会认真改进,在此谢谢大家的支持,我们下文再见 。