很多时候,组件的样式并非是产品所需,所以,我们需要具备修改组件样式的本事还要实现功能
比如:饿了吗上传组件
在这里插入图片描述
而需求是这样:
在这里插入图片描述
这时候就需要自己的布局,并且实现点击上传

<div class="offerList">
 <div class="offerList_left">
    <span class="offerList_txt">投标报价单:</span>
  </div>
  <div class="uploadBtn" @click="uploadOffer">  // 触发上传
    <span class="uploadBtn_txt">上传</span>
  </div>
  <div class="downloadOffer">
    <span class="downloadOffer_txt">下载报价单模板</span>
  </div>
</div>
<div class="uploadTips">
  <span class="uploadTips_txt">文件格式说明:pdf、ppt、word、execl等格式的文件。</span>
</div>
<div class="offerUpload">
  <div class="offerList_right">
    <el-upload
      class="upload-offer"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-change="handleOffer"
      :file-list="offerList">
      <el-button size="small" type="primary" ref="uploadOffer" class="offerUploadBtn"></el-button>   //  ref
    </el-upload>
  </div>
</div>

js

// 上传投标报价单
uploadOffer () {
  // 触发上传事件
  this.$refs.uploadOffer.$el.click()
},

拓展:
jquery:

 $("#a").click(function(){
   $("#b").trigger('click');
 })

原生js

document.getElementById('a').click();

登高易跌重,但是,你忘记了,高度的美景

Logo

前往低代码交流专区

更多推荐