vue+vux實現移動端檔案上傳樣式，vuevux

vue+vux實現移動端檔案上傳樣式，vuevux

樣式使用的是vux的cell組件 如的官方demo樣子

的樣式需要修改一下，把 保護中 修改成一個圖片 並且內嵌一個input type=‘file'  就可以擁有好看的樣式的檔案上傳了

<!--引入組件-->import { Cell } from 'vux'<!--官網的組件是這麼寫的--><group>  <cell title="title" value="value"></cell></group>

下面我們要改造cell變成我們想要的結果

<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實現移動端檔案上傳樣式，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！