0

单击按钮时，我试图打开“选择文件”对话框，可以this.$refs.fileInput.click()在 VUE 中使用，但这在组合 API 中不起作用。

以下是参考代码：https ://codepen.io/imjatin/pen/zYvGpBq

脚本

    const { ref, computed, watch, onMounted, context } = vueCompositionApi;

    Vue.config.productionTip = false;
    Vue.use(vueCompositionApi.default);

    new Vue({
      setup(context) {    
        const fileInput = ref(null);
        const trigger = () => {
          fileInput.click()
        }; 

        // lifecycle
        onMounted(() => {     
        });
        // expose bindings on render context
        return {
          trigger,fileInput 
        };
      }
    }).$mount('#app');

模板

    <div id="app">
      <div>
        <div @click="trigger" class="trigger">Click me</div>
      <input type="file" ref="fileInput"/>
        </div>
    </div>

谢谢你。

4

2 回答 2

0

您是否尝试使用 访问它context.refs.fileInput.click();？

不要忘记 it'ssetup(props, context)和 not setup(context)。

在这里尝试我的编辑：https ://codepen.io/ziszo/pen/oNxbvWW

祝你好运！:)

于 2020-08-12T15:22:02.243 回答
0

我正在使用 Vue 3 CLI 并尝试了几种不同的建议，发现以下是最可靠的。

<template>  
    <input class="btnFileLoad" type="file" ref="oFileHandler" @change="LoadMethod($event)" />
    <button class="btn" @click="fileLoad">Load</button>
</template>

<script>
import {ref} from "vue";
export default{
    setup(){
         const hiddenFileElement = ref({})
         return {hiddenFileElement }
    }
    methods:{
        fileLoad() {
        this.hiddenFileElement = this.$refs.oFileHandler;
        this.hiddenFileElement.click();
        },
    }
}
</script>
<style>
.btn{ background-color:blue; color:white; }
.btnFileLoad{ display:none }
</style>

我还在 Chrome 中发现，如果从按钮元素到隐藏文件处理程序的调用需要很长时间，则会显示一条错误消息，内容为“文件选择器对话框只能在用户激活时显示”。显示在源视图中。通过在设置中定义 hiddenFileElement 问题就消失了。

于 2021-11-25T20:21:45.790 回答