vue & button & refs & click & bug

vue & button & refs & click & bug

$refs.btn.click() ???

vue & refs

$refs.btn.$emit("click")

https://vuejs.org/v2/api/#vm-refs
https://vuejs.org/v2/api/#ref

https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements

$emit("click") & click()

ok

https://codepen.io/webgeeker/pen/rPQyMN?editors=1010

https://codepen.io/webgeeker/pen/BMGWmq?editors=1010

bug

https://codepen.io/webgeeker/pen/vbQxZW?editors=1010

vue & emit

https://vuejs.org/v2/api/#vm-emit

---

this.$refs.btn.$emit("click"')

this.$refs.inputResult.$emit('click')

http://www.imooc.com/wenda/detail/418881

---

OK

vue & keyboard Shortcut Keys

    // shortcut keys
    keyboardShortcutKeys() {
        // // operType: "1",// 0 上一页； 1 下一页
        let that = this;
        // bug ??? range conflict ???
        let body = document.querySelector(`body`);
        // let body = document.querySelector(`[data-body="common-handle"]`);
        let bindFlag = body.dataset.bindFlag;
        if (bindFlag === "true") {
            // console.log(`only need binding once!`);
        } else {
            body.dataset.bindFlag = "true";
            // bind once
            body.addEventListener("keyup", function(e) {
                let key = e.which || e.keyCode;
                if(e.which === 17) {
                    // init
                    this.isCtrlPressed = false;
                }
            });
            body.addEventListener("keydown", function(e) {
                let key = e.which || e.keyCode;
                if(e.which === 17) {
                    this.isCtrlPressed = true;
                }
                let isCtrl = this.isCtrlPressed;
                if(e.which === 83 && isCtrl) {
                    if (that.onClickButton) {
                        that.onClickButton(`save`);
                    }
                }
                if(e.which === 68 && isCtrl) {
                    if (that.clickGetNewsInfos) {
                        if (!that.isFirstNews) {
                            // that.clickGetNewsInfos(`prev`);
                            // that.$refs.commom_handle_prev.click();
                            that.$refs.commom_handle_prev.$emit("click");
                            // that.$refs["commom_handle_prev"].click();
                            console.log(`prev btn click ok!`);
                        } else {
                            // btn bug
                            console.log(`prev btn bug!`);
                        }
                    }
                }
                if(e.which === 70 && isCtrl) {
                    if (that.clickGetNewsInfos) {
                        if (!that.isLastNews) {
                            // that.clickGetNewsInfos(`next`);
                            // that.$refs.commom_handle_next.click();
                            that.$refs.commom_handle_next.$emit("click");
                            // that.$refs["commom_handle_next"].click();
                            console.log(`next btn click ok!`);
                        } else {
                            // btn bug
                            console.log(`next btn bug!`);
                        }
                    }
                }
                if(e.which === 88 && isCtrl) {
                    if (that.clickShowResureModal) {
                        that.clickShowResureModal(`passed`);
                    }
                }
            });
        }
    },