欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+vux實(shí)現(xiàn)移動端文件上傳樣式

 更新時間：2017年07月28日 10:00:09   作者：勤奮的搬運(yùn)工  
這篇文章主要介紹了vue+vux實(shí)現(xiàn)移動端文件上傳樣式,樣式使用的是vux的cell組件，需要的朋友可以參考下

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

上圖的樣式需要修改一下，把 保護(hù)中 修改成一個圖片 并且內(nèi)嵌一個input type=‘file'  就可以擁有好看的樣式的文件上傳了

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

下面我們要改造cell變成我們想要的結(jié)果

<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的縮寫；在組建中調(diào)用原聲clik要加native；stop解釋不清楚，請讀者百度

input相當(dāng)于隱藏了，再也看不到那么丑陋的樣式了

i標(biāo)簽是圖片，使用了fontawesome的樣式，在main.js里邊引入

import '../node_modules/font-awesome/css/font-awesome.min.css'

如果不使用fontawesome也可以添加樣式

style="background: url("圖標(biāo)地址../../的形式");"

現(xiàn)在移動端的文件上傳html+css已經(jīng)寫完了

js代碼如下：

openFile(){
    this.$refs.file.click();
}

解釋一下：

html中給input綁定了一個屬性ref = ‘file' 我個人覺得相當(dāng)于 給input賦值一個id

在通過this.$refs.file 就相當(dāng)于document.getElementById('file'); 這個都是vue特有的功能；比較特別的dom操作

然后click()方法就會打開文件；

至于@change()方法待續(xù)！?。∵@個方法不大眾化，需要單獨(dú)寫！

以上所述是小編給大家介紹的vue+vux實(shí)現(xiàn)移動端文件上傳樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論