Vue.js에 input 탭을 표시하지 않고 임의의 단추를 누르면 DLG 선택

개시하다

vue.js뿐만 아니라 UI 프레임워크를 사용하고 표준적인 input 라벨을 설정하면 외관이 통일되지 않는다는 점(브라우저의 변화에 따라 UI 프레임워크의 외관과 통일성이 없음)이 궁금하다.
따라서 input 탭을 직접 사용하지 않고 파일 선택 대화상자를 표시합니다.
왼쪽: 일반적인 input 탭을 사용할 때
오른쪽: input 태그를 사용하지 않는 경우

코드

※ vuetify 사용(v-x 라벨)은 이번 설명과 직접적인 관계가 없습니다.
다른 프레임을 사용할 때, 이 프레임 등 단추로 v-btn을 바꾸십시오.
sample.vue

<template>
  <v-container>
    // 非表示のinputタグを格納
    <input
      style="display: none"
      ref="input"
      type="file"
      accept="image/jpeg, image/jpg, image/png"
      @change="selectedFile()"
    >
    <v-layout text-xs-center wrap>
      // 略
      <v-flex xs12>
        <!-- ファイルの選択 -->
        <v-btn color="primary" @click="btnclick">select image</v-btn>
      </v-flex>
      // 略
    </v-layout>
  </v-container>
</template>
<script>
export default {
  data() {
    return {
      // 略
    };
  },
  methods: {
    // selectfileボタン押下時
    btnclick() {
      this.$refs.input.click();
    },
    async selectedFile() {
      this.isUploading = true;

      const file = this.$refs.input.files[0]
      if (!file) {
        return;
      }
　　　// 以下ファイルの操作

    }
  }
};
</script>

방법은 다음과 같다.

숨겨진 input 탭 배치하기(ref 방식으로 참조)

배치 버튼, 클릭 이벤트에서 1 호출 클릭

참조