移動端文件上傳-樣式

使用技術：

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()方法待續！！！這個方法不大眾化，需要單獨寫！

下期更新圖片上傳到內存中！