vue+vux 모 바 일 파일 업로드 스타일 구현

2367 단어 이동 단파일 업로드
스타일 은 vux 의 cell 구성 요 소 를 사용 합 니 다.아래 그림 의 공식 demo 모양 과 같 습 니 다.

위의 그림 의 스타일 을 수정 해 야 합 니 다.보호 대 를 그림 으로 수정 하고 하나input type=‘file'  를 삽입 하면 예 쁜 스타일 의 파일 을 업로드 할 수 있 습 니 다.

<!--    -->
import { Cell } from 'vux'
<!--          -->
<group>
  <cell title="title" value="value"></cell>
</group>
셀 을 저희 가 원 하 는 결과 로 바 꿔 보도 록 하 겠 습 니 다.

<cell title="  " @click.native.stop="openFile">
     <input type="file" @change="fileChange()" style="display: none" ref="file"multiple="multiple">
     <i class="fa fa-file"></i>
</cell>
설명:
@v-on 의 줄 임 말 입 니 다.구성 에서 어 쿠 스틱 clik 를 호출 하려 면 native 를 추가 해 야 합 니 다.stop 설명 이 잘 안 돼 요.
input 은 숨겨 진 것 과 같 습 니 다.다 시 는 그렇게 추 한 스타일 을 볼 수 없습니다.
i 라벨 은 그림 입 니 다.fontawesome스타일 을 사용 하여 main.js 에 도입 합 니 다.

import '../node_modules/font-awesome/css/font-awesome.min.css'
사용 하지 않 으 면fontawesome스타일 을 추가 할 수 있 습 니 다.

style="background: url("    ../../   ");"
현재 이동 식 파일 업로드 html+css 가 완료 되 었 습 니 다.
js 코드 는 다음 과 같 습 니 다:

openFile(){
    this.$refs.file.click();
}
설명:
html 에서 input 에 속성ref = ‘file' 을 연결 하 였 습 니 다.저 는 개인 적 으로 input 에 id 를 부여 하 는 것 과 같다 고 생각 합 니 다.this.$refs.file 를 통 해document.getElementById('file'); 에 해당 하 는 것 은 모두 vue 특유 의 기능 이다.비교적 특별한 dom 조작
그리고 click()방법 으로 파일 을 엽 니 다.
@change()방법 은 계속!!!이 방법 은 대중화 되 지 않 으 니 단독으로 써 야 한다!
위 에서 말 한 것 은 편집장 이 소개 한 vue+vux 가 모 바 일 파일 업로드 스타일 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
React Native 포트 번호 수정 해결 방법
Vue 2.0 vue-resource 를 이용 하여 일곱 소의 인 스 턴 스 코드 에 파일 을 업로드 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage