H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue动态创建dom并且绑定事件

  • 想要实现

    1.拖拽图片到容器中,动态生成img;生成的img可以被拖动到另一个容器中。
    2.动态创建img标签,并且绑定事件。
    

TRheiZ.png

drop:function(ev){
            // console.log(this);
            console.log("drop",ev.offsetX,ev.offsetY,ev)

      ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
            this.changeXY(document.getElementById(data),ev.offsetX,ev.offsetY);
        if(ev.target.id==data)return;
        ev.target.appendChild(document.getElementById(data));
    },
    drag:function(ev){
            console.log('drag');
            this.selectId=ev.target.id;
      ev.dataTransfer.setData("Text",ev.target.id);
    },
  • 遇到问题

    1.挂载到'#img_list'的时候,发现this.parent为undefined。
    2.无法与组件进行通讯。

    代码逻辑:

     var MyComponent = Vue.extend({
         template:'<img src="'+data+'" draggable="true" style="position:absolute" v-on:dragstart="drag($event)" id="A'+Math.floor(Math.random()*1000)+'"/>',
         methods:{
             drag(evt){
                 this.$parent.drag.call(this.$parent,evt);
             }
         }
     })
     new MyComponent().$mount().$appendTo('#img_list')
   }

本文地址:H5W3 » vue动态创建dom并且绑定事件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址