npm私有包:键盘事件监听


编   写:袁 亮
时   间:2017-08-17
说   明:复杂页面交互,键盘快捷键监听组件

一、功能描述
    1、事件监听
        默认绑定keydown事件
        绑定单例,防止多次绑定,导致多次触发
            ps:vue如果代码自动刷新,会导致又绑定一次
    2、触发条件
        配置条件
            inInput:光标在输入框内是否触发
                true:触发,false:不触发,默认true
            needCtrl:是否需要同时按下ctrl键
                不传,不限制
                true:必须按下Ctrl
                false:不能按下Ctrl
            needShift:是否需要同时按下shift键
                同needCtrl
            needAlt:是否需要同时按下alt键
                同needCtrl
        自定义方法
            触发的时候,会执行该方法判断是否要执行,返回true或者false
            不传,默认true
    3、事件触发执行
        同一事件,多次绑定
            后绑定的优先级更高
        事件冒泡
            如果事件没有被响应,自动按绑定顺序冒泡
        事件互斥
            同一事件,只会触发一次,捕获后,不再冒泡
        默认行为阻止
            事件被捕获,默认行为将被阻止
    4、事件定义
        内置常见事件
            esc:取消
            backspace
            enter
            delete
            up
            down
            increase
            decrease
            
            number:数字
            float:浮点数
            letter:字母
        支持自定义事件配置
            优先级高于内置事件
        
二、使用方法
    1、安装包
        npm install @duomai/keylisten --save
        ps:先切换到多麦的源
    2、代码
        import KeyListen from '@duomai/keyListen'
        
        // 在created钩子里,使用内置事件,不需要setConfig
        KeyListen.setConfig(config.shortcutKey).add({
          up: function () {
            // todo up
          },
          down: function () {
            // todo down
          }
        })
        
    

npm私有仓库3:项目中使用


编   写:袁 亮
时   间:2017-08-15
说   明:npm私有仓库3:项目中使用

一、修改dns地址 192.168.0.224
    1、linux
        vim /etc/resolv.conf
        nameserver 192.168.0.224
    2、windows
        网络设置
        清除缓存 cmd命令行
            ipconfig /flushdns
            
二、nrm管理npm源
    1、安装
        npm install -g nrm
    2、添加私有源
        nrm add duomai http://npm.duomai.com
    3、查看所有源
        nrm ls
    4、使用私有源
        nrm use duomai
        
三、安装包
    1、私有包(跟其他包一样,只是多了一个统一的前缀)
        npm install @duomai/urls
    2、普通包
        npm install vue
    3、包查看
        http://npm.duomai.com
    4、注意事项
        如果私有包使用es6的语法写,webpack打包的时候,需要将其使用babel转换,否则打包的时候会报错
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: [resolve('src'), resolve('test'), resolve('node_modules/\@duomai')]
        }
    
四、使用参考 @duomai/urls
    1、安装
        npm install @duomai/urls --save
    2、全局引入,设置
        import Urls from '@duomai/urls'
        
        Urls.init({
          store_id: Login.state.data ? Login.state.data.store_id : '' // 链接公共参数注入
        }, {
          shop: process.env.SHOP_BASE_URL, // 测试链接前缀注入,可以不写,默认正式环境
          seller: process.env.SELLER_BASE_URL,
          dealer: process.env.DEALER_BASE_URL
        })
    3、组件中使用
        import Urls from '@duomai/urls'
        console.log(Urls.shop.item(1921))