這篇文章給大家分享的是有關(guān)vue+vux如何實(shí)現(xiàn)移動(dòng)端文件上傳樣式的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、國(guó)際域名空間、網(wǎng)站空間、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進(jìn)步。

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

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

import { Cell } from 'vux'


  

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

解釋一下：

@是v-on的縮寫(xiě)；在組建中調(diào)用原聲clik要加native；stop解釋不清楚，請(qǐng)讀者百度

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

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

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

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

圖標(biāo)地址../../的形式");"

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

js代碼如下：

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

解釋一下：

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

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

然后click()方法就會(huì)打開(kāi)文件；

至于@change()方法待續(xù)！??！這個(gè)方法不大眾化，需要單獨(dú)寫(xiě)！

感謝各位的閱讀！關(guān)于“vue+vux如何實(shí)現(xiàn)移動(dòng)端文件上傳樣式”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：vue+vux如何實(shí)現(xiàn)移動(dòng)端文件上傳樣式-創(chuàng)新互聯(lián)
文章分享：http://weahome.cn/article/ihhdd.html