快捷導(dǎo)航

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)文章

Vue中的vue-resource示例詳解
Vue與后臺Api進(jìn)行交互通常是利用vue-resource來實(shí)現(xiàn)的，本質(zhì)上vue-resource是通過http來完成AJAX請求相應(yīng)的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以參考下
2018-11-11
vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)
這篇文章主要介紹了vue封裝自定義指令之動態(tài)顯示title操作(溢出顯示,不溢出不顯示)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue項(xiàng)目配置eslint保存自動格式化問題
這篇文章主要介紹了vue項(xiàng)目配置eslint保存自動格式化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue基礎(chǔ)之ElementUI表格詳解
這篇文章主要為大家詳細(xì)介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
vue mounted()函數(shù)中無法定義初始化樣式的原因分析
這篇文章主要介紹了vue mounted()函數(shù)中無法定義初始化樣式的原因分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue實(shí)現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式)
這篇文章主要介紹了vue實(shí)現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue 實(shí)現(xiàn)移動端鍵盤搜索事件監(jiān)聽
今天小編就為大家分享一篇vue 實(shí)現(xiàn)移動端鍵盤搜索事件監(jiān)聽，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2023-11-11
Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05