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

evrscar2  于 12个月前  发布在  其他
关注(0)|答案(2)|浏览(103)

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


的数据
我必须按照指示一步一步在这个网站https://programmersought.com/article/59531832236/;jsessionid=6B629FE55DAE317A6E98B9049DAAEECC,但不幸的是,我没有能够实现它
这里的每个人都能帮我解决这个问题吗?
谢谢你

os8fio9y

os8fio9y1#

你必须自己管理它,以保持跟踪你是否选择了一些东西:

<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;
}


Codepen:https://codepen.io/reijnemans/pen/rNxeKeY

cvxl0en2

cvxl0en22#

如果你只是想消除选择图像后出现的区域,这个简单的css代码就可以了。

<style>
.el-upload-list > .is-success + * {
  display: none;
}
</style>

字符集

相关问题