首页 > 其他分享 >Vue 打开窗口输出文件路径

Vue 打开窗口输出文件路径

时间:2022-10-05 18:35:29浏览次数:49  
标签:文件 Vue 窗口 路径 打开 getElementById document open

下面实现的是打开在Electron 中弹出窗口选择文件,

实现的功能:

打开本地窗口,选择文件路径进行输出文件

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <div class="inputfile">
      <a-button type="primary" v-on:click="openFile()">选择文件</a-button>
      <a-input id="textbox" placeholder="open file" v-model="textarea" />
      <input
        type="file"
        name="filename"
        id="open"
        @change="specifiName($event)"
        @input="specifiName($event)"
        style="display: none"
      />
    </div>
  </div>
</template>

<script >
export default {
  data() {
    return {
      textarea: '',
    };
  },
  methods: {
    openFile() {
      document.getElementById('open').click();
    },
    specifiName(e) {
      document.getElementById('textbox').value = document.getElementById('open').files[0].path;
    },
  },
};
</script>
<style >
.inputfile {
  display: flex;
  margin: 10px;
}
#textbox{
  margin-left: 10px;
}
</style>

标签:文件,Vue,窗口,路径,打开,getElementById,document,open
From: https://www.cnblogs.com/androllen/p/16756079.html

相关文章

  • vue(8)v-model与JavaScript中array对象的配合使用
    序实现了之前代码的删除功能,并加入了对于复选框的全选,全不选,反选等功能示例代码展开查看<!DOCTYPEhtml><html> <head> <meta......
  • 高级vue 组合api setup watch监听用法
    <script>import{computed,watch}from'vue';import{ref,reactive,toRefs}from'vue'exportdefault{  setup(){   letdata=reactive({   ......
  • 高级vue 组合api setup computed 用法
    <script>import{computed}from'@vue/reactivity';import{ref,reactive,toRefs}from'vue'exportdefault{  setup(){   letdata=reactive({  ......
  • 高级vue 组合api setup toRefs 用法
    <script>import{ref,reactive,toRefs}from'vue'exportdefault{  setup(){   letdata=reactive({    mes:0,    userObj:{   ......
  • 62.unique-paths 不同路径
    问题描述62.不同路径解题思路还是找递推关系:\(dp_{mn}=dp_{(m-1)n}+dp_{m(n-1)}\)代码#include<vector>usingstd::vector;classSolution{public:i......
  • 63.unique-paths-ii 不同路径II
    题目描述63.不同路径II解题思路相比62.不同路径II,主要是多了障碍物地判断,设\(obstacleGrid[i][j]=0\),则\(dp_{{i}{j}}=0\),其余递推关系相同。注意for循环遍历地过......
  • 高级vue 组合api setup reactive用法
    <script>import{reactive}from'vue'exportdefault{  setup(){   letdata=reactive({    mes:0   });   constadd=()=>{ ......
  • LeetCode 09 - 滑动窗口
    3.无重复字符的最长子串方法:滑动窗口使用左右两指针表示一个窗口,窗口中没有重复字符。每次向右移动right指针以扩大窗口范围,在该过程中:如果最新添加的字符在窗口中......
  • Vue2 下 Echarts的使用
    Vue2下Echarts的使用1、安装组件npminstallechartsvue-echarts--save2、使用2.1、配置为全局组件方式全局配置为公有组件//main.jsimport"echarts"import......
  • vue3组合式API
     选项API生命周期选项和组合式API之间的映射beforeCreate ->use setup()created ->use setup()beforeMount -> onBeforeMountmounted -> onMo......