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

evrscar2  于 2024-01-09  发布在  其他
关注(0)|答案(2)|浏览(130)

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


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

os8fio9y

os8fio9y1#

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

  1. <div id="app">
  2. <el-upload
  3. action="#"
  4. list-type="picture-card"
  5. :auto-upload="false"
  6. :on-change="toggleUpload"
  7. :on-remove="toggleUpload"
  8. :class="{ hideUpload: !showUpload }" >
  9. <i slot="default" class="el-icon-plus"></i>
  10. <div slot="file" slot-scope="{file}">
  11. <img
  12. class="el-upload-list__item-thumbnail"
  13. :src="file.url" alt=""
  14. >
  15. </div>
  16. </el-upload>
  17. </div>

字符集
JS:

  1. var Main = {
  2. data() {
  3. return {
  4. showUpload: true
  5. };
  6. },
  7. methods: {
  8. toggleUpload() {
  9. this.showUpload = !this.showUpload
  10. },
  11. }
  12. }
  13. var Ctor = Vue.extend(Main)
  14. new Ctor().$mount('#app')


CSS

  1. .hideUpload > div {
  2. display: none;
  3. }


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

展开查看全部
cvxl0en2

cvxl0en22#

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

  1. <style>
  2. .el-upload-list > .is-success + * {
  3. display: none;
  4. }
  5. </style>

字符集

相关问题