如何把一个已经写好的dom极其内容拷贝到另一个节点里。如：把一个已经写的视频div塞到另一个dom节点中

最新推荐文章于 2024-07-03 17:18:15 发布

海马区

最新推荐文章于 2024-07-03 17:18:15 发布

阅读量838

点赞数

分类专栏： vue dom克隆

本文链接：https://blog.csdn.net/qq_40820382/article/details/109530749

版权

vue 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

dom克隆

1 篇文章 0 订阅

订阅专栏

1、先写一个div，在里面写上自己想要的样式。使用v-show = false控制，使其加载但不显示。注意，即将拷贝的id为resetIds的dom

<div v-show="false" >
    <div id="resetIds"  @click="testSZ" style="z-index: 99999999;position: absolute;top:-35px;" class="esri-widget--button esri-widget esri-interactive" role="button" tabindex="0" title="复位">
      <span aria-hidden="true" role="presentation" class="esri-icon esri-icon-plus"></span>
      <span class="esri-icon-font-fallback-text">复位</span>
    </div>
</div>

2、在vue 的methods里定义一个方法，

  resetId() {
	var _this = this
	// 获取要拷贝的dom
	var oldDomOfPeople = $('#resetIds');
	// 克隆dom，true表示连同事件一起克隆，但是这里似乎事件克隆不了
	var newDomPeople = oldDomOfPeople.clone(true)
	// 在适合的地方添加进上面克隆的节点。注意，我克隆时，克隆的节点点击事件失效
	$('.esri-zoom').append(newDomPeople);
	// 点击事件失效，所以在这里重新绑定了点击事件
	$("#resetIds").click(function(){
	_this.testSZ();
	});
	// $("#resetIds").css("z-index",12222200);
},

testSZ() {
	alert("点击事件绑定成功！！！")
},