在vue框架下,怎么给原生js添加的dom元素添加@click点击事件(el upload添加图片上传数量显示)
在vue框架下,怎么给原生js添加的dom元素添加@click点击事件先说下问题出现的场景,vue框架下,在elementui里的upload创建一个组件后面显示图片数量,所以想着添加一个span标签(后期实现是利用elment里面提供的一个slot插槽实现的)// 部分代码隐藏了// vue图片上传组件<el-form-item label="图片"><el-uploadact
·
在vue框架下,怎么给原生js添加的dom元素添加@click点击事件
先说下问题出现的场景,vue框架下,在elementui里的upload创建一个组件后面显示图片数量,所以想着添加一个span标签(后期实现是利用elment里面提供的一个slot插槽实现的)
// 部分代码隐藏了
// vue图片上传组件
<el-form-item label="图片">
<el-upload
action="#"
list-type="picture-card"
:on-preview="handlePicture"
:on-remove="handleRemove"
:limit="3"
:http-request="httpRequest"
:file-list="pictureList"
:on-change="handleChange"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
默认的效果是这样的
想实现的是这样的
方法1:
代码实现的效果不对,失败
方法2
通过控制台可以知道,可以尝试通过原生js给 图片列表的那个div添加一个子节点
该方法有个缺点,图片数量变化时,后面的数据不变。
后期想到 可以先写一个span标签,先display为none,后期再把它给到 图片列表里
// 部分代码隐藏了
setPicNum() {
this.$nextTick(() => {
let parentDom = document.querySelector(".el-upload").parentNode;
let childDom = document.querySelector(".test")
childDom.setAttribute("style", "block");
childDom.innerHTML = "<span>888<>";
parentDom.appendChild(childDom);
console.log("999", parentDom);
});
},
该方法还可以个通过原生js添加的元素,绑定vue里的@click等事件
方法3
// 部分代码隐藏了
// vue图片上传组件
<el-form-item label="图片">
<el-upload
action="#"
list-type="picture-card"
:on-preview="handlePicture"
:on-remove="handleRemove"
:limit="3"
:http-request="httpRequest"
:file-list="pictureList"
:on-change="handleChange"
>
<i class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">
{{ pictureList.length }}/3
</div>
</el-upload>
</el-form-item>
利用 element里提供的slot实现了
更多推荐
已为社区贡献1条内容
所有评论(0)