主页 / 问题 / 983503
Accepted
Дмытрык
Asked:2020-05-20 19:09:40 +0000 UTC2020-05-20 19:09:40 +0000 UTC

将接受值传递给组件

  • 772

有必要在单击按钮时打开文件上传窗口并带有一定的接受。在我的示例中，在下载窗口打开后应用接受。Element-ui 库 https://element.eleme.io/#/en-US/component/upload 

new Vue({
  el: '#app',
  data: function() {
    return { 
      visible: false, 
      accept: '' 
    };
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <div id="app">
  <el-upload class="upload-demo" :accept="accept" action="/">
    <el-button size="small"  @click.native="accept = '.txt'">Upload txt</el-button>
    <el-button size="small" @click.native="accept = '.png'">Upload png</el-button>
  </el-upload>
  
</div>

javascript

2 个回答

  1. Best Answer

    1通过单击元素打开文件选择窗口el-upload。你可以看到 - 按钮之间有一个距离，它也是可点击的。

    2您直接更改属性：accept = '.txt'。粗略地说，更改会进入 DOM 更新队列，直到当前事件完成。那些。在打开文件选择窗口时，DOM 尚未更新。

    提醒一下，Vue 异步更新 DOM。每次检测到数据中的更改时，都会创建一个队列，用作该事件循环的当前“滴答”迭代中发生的后续更改的缓冲区。... 在事件循环的下一次迭代中，Vue 解析队列并执行实际更新。——来源

    这正是人们可以申请的情况this.$nextTick。但是下面的示例使用了计算属性。

    // Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false
Vue.config.devtools = false

new Vue({
  el: '#app',
  data: {
    accept: ''
  },

  computed: {
    changedAccept() {
      return this.accept
    }
  },

  methods: {
    changeAccept(type, event) {
      this.accept = type
    },

    applyAccept(event) {
      // Если не выбран тип файлов,
      // то отменяем вызов окна выбора файлов.
      if (!this.accept) {
        event.preventDefault()
      }
    }
  }
})
    <div id="app">
  <el-upload class="upload-demo" :accept="changedAccept" action="/" @click.native="applyAccept">
    <el-button size="small" @click="changeAccept('audio/*', $event)">Upload audio</el-button>
    <el-button size="small" @click="changeAccept('image/png', $event)">Upload png</el-button>
  </el-upload>
</div>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

    • 2

  2. 这不能被视为答案，但是作为评论它太长了。

    如果您跟踪元素的渲染时间，则似乎每次都在运行组件的预生成副本。那些。组件的第一次渲染不会发生在按钮上，而是发生在第一次执行代码时，并且按钮会开始下一代组件，但会渲染上一个。如果假设这是组件的正确行为，那么我将假设为了能够通过一个按钮同时打开多个上传器。如果不应该同时打开，那么也许这是一个错误？

    如果你能找到答案，那将是非常有趣的。

    • 0

相关问题