为什么在容器里面放置input，点击无法focus

[alicecoding]

在vue-drag-resize 中放置input类型的组件，点击该组件区域，无法触发focus，请问下有没有什么办法解决；

[Shenlianxi]

VueDragResize 有一个@activated="activateEv(index)"
给input设置ref , 当触发@activated 事件的时候 获取input焦点就ok了 上代码

` <VueDragResize class="test-class-item-wrapper2" :w="500" :h="200" :x="10" :y="200" @activated="activateEv(index)"> </VueDragResize>

methods: {
  activateEv(index) {
    console.log('activateEv' + index);
    this.$refs['drag-input'].focus();
  }

}, `

[alicecoding]

谢谢您的解答，我也是永这个方法解决的，就是我不知道为什么在这个组件内部的点击，聚焦事件会失效？

[alicecoding]

点击可以被动聚焦，但是如果是想随意的点击input的某个位置进行修改呢？没有办法，focus光标只能在最后面

[elevenwangyang]

使用的同样的方法 没有得到解决

[elevenwangyang]

[elevenwangyang]

事件没有触发

[gorkys]

@Angelinanay 你没有this.$refs['drag-input'].focus(); 我修改了一个版本来支持冲突检测和吸附对齐。如果不需要这两个功能可以用这个组件vue-draggable-resizable，我是基于它来修改的。 See https://github.com/gorkys/vue-draggable-resizable-gorkys 安装 npm install vue-draggable-resizable-gorkys

[beginnerV]

事件没有触发

我的加了this.$refs['drag-input'].focus();事件也没有触发

[KnownRock]

可以在上级节点中阻止mouse事件冒泡，

<vue-drag-resize :isActive="false" :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize"> 
    <div @mousedown="mousedown" @mouseup="mouseup">
       <h3>Hello World!</h3>
       <p>{{ top }} х {{ left }} </p>
       <p>{{ width }} х {{ height }}</p>
       <input></input>
    </div>
</vue-drag-resize>

new Vue({
    el:container,
    data(){
        return {
            width: 0,
            height: 0,
            top: 0,
            left: 0
        }
    },
    methods: {
        resize(newRect) {
            this.width = newRect.width;
            this.height = newRect.height;
            this.top = newRect.top;
            this.left = newRect.left;
        },
        mousedown(e){
            e.stopPropagation()
        },
        mouseup(e){
            e.stopPropagation()
        }
    }
})

[Calerme]

解决方法：手动使 input 获取焦点：

<input ref="input" @click="$refs.input.focus()" />