css - 在 VueJS 上使用 Element UI 上传单个文件

Question

我有一个关于使用 elementUI 在 vuejs 上上传图像的问题el-upload。我想在选择一张图像后隐藏选定的框（+）。

我必须按照这个网站上的说明一步一步来https://programmersought.com/article/59531832236/;jsessionid=6B629FE55DAE317A6E98B9049DAAEECC，但不幸的是我一直无法实现它

可以在这里的每个人都帮我解决这个问题吗？
谢谢你

Answer 1

您必须自行管理以跟踪您是否选择了某些内容：

<div id="app">
<el-upload
  action="#"
  list-type="picture-card"
  :auto-upload="false"
  :on-change="toggleUpload" 
  :on-remove="toggleUpload"   
  :class="{ hideUpload: !showUpload }" >
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
    </div>
</el-upload>
</div>

JS：

var Main = {
    data() {
      return {
        showUpload: true
      };
    },
    methods: {
      toggleUpload() {
        this.showUpload = !this.showUpload
      },
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

CSS

.hideUpload > div {
  display: none;
}

代码笔： https ://codepen.io/reijnemans/pen/rNxeKeY