在vue框架下，怎么给原生js添加的dom元素添加@click点击事件（el upload添加图片上传数量显示）

在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实现了