vue+vux實現(xiàn)移動端文件上傳樣式
樣式使用的是vux的cell組件 如下圖的官方demo樣子
上圖的樣式需要修改一下，把 保護中 修改成一個圖片 并且內(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相當于隱藏了，再也看不到那么丑陋的樣式了
i標簽是圖片，使用了fontawesome的樣式，在main.js里邊引入
import '../node_modules/font-awesome/css/font-awesome.min.css'
如果不使用fontawesome也可以添加樣式
style="background: url("圖標地址../../的形式");"
現(xiàn)在移動端的文件上傳html+css已經(jīng)寫完了
js代碼如下：
openFile(){
this.$refs.file.click();
}
解釋一下：
html中給input綁定了一個屬性ref = ‘file' 我個人覺得相當于 給input賦值一個id
在通過this.$refs.file 就相當于document.getElementById('file'); 這個都是vue特有的功能；比較特別的dom操作
然后click()方法就會打開文件；
至于@change()方法待續(xù)?。。∵@個方法不大眾化，需要單獨寫！
以上所述是小編給大家介紹的vue+vux實現(xiàn)移動端文件上傳樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue與后臺Api進行交互通常是利用vue-resource來實現(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項目配置eslint保存自動格式化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue mounted()函數(shù)中無法定義初始化樣式的原因分析
這篇文章主要介紹了vue mounted()函數(shù)中無法定義初始化樣式的原因分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實現(xiàn)導出Word文件(數(shù)據(jù)流方式)
這篇文章主要介紹了vue實現(xiàn)導出Word文件(數(shù)據(jù)流方式)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
今天小編就為大家分享一篇vue 實現(xiàn)移動端鍵盤搜索事件監(jiān)聽，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
本文主要介紹了Vite圖片資源打包優(yōu)化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實現(xiàn)
本文主要介紹了VantUI封裝自定義Tabbar路由跳轉(zhuǎn)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05