移動端檔案上傳-樣式，端檔案上傳樣式

移動端檔案上傳-樣式，端檔案上傳樣式

使用技術：

vue+vux

樣式使用的是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()方法待續！！！這個方法不福士化，需要單獨寫！

下期更新圖片上傳到記憶體中！