vue手机端回退_vue移动端弹框组件，vue-layer-mobile
最近做一個移動端項目，彈框寫的比較麻煩，查找資料，找到了這個組件，但是說明文檔比較少，自己研究了下，把我碰到的錯，和詳細用法分享給大家！有疑問可以打開組件看一看，這個組件是仿layer-mobile的，很多用法都一樣，可以看看哦！
一、npm?安裝
//?當前最新版本?1.2.0
npm?install?vue-layer-mobile
//?如新版遇到問題可回退舊版本
npm?install?vue-layer-mobile@1.0.0
二、調整配置：因為這個組件中有woff,ttf,eto,svg類型文件，所以要配置一些loader，
//在webpack.config.js中配置如下，首先安裝url-loader和file-loader：
{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
三、引入和使用
import?'vue-layer-mobile/need/layer.css'
import?layer?from?'vue-layer-mobile'
Vue.use(layer)
四、具體使用介紹：——這個組件一共有6個方法，并不是完全仿layer-mobile,一些簡單的彈框還是很好用的。
// toast: 文字和圖標:
testLayerToast(){
this.$layer.toast({
icon:?'icon-check',?//?圖標clssName?如果為空?toast位置位于下方,否則居中
content:?'提示文字',
time:?2000?//?自動消失時間?toast類型默認消失時間為2000毫秒
})
},
// loading:
testLayerLoading1(){
var _this = this;
this.$layer.loading('加載中...');
setTimeout(function(){
_this.$layer.close();
},3000);
},
// dialog:
testLayerDialog(){
this.$layer.dialog({
title:?['這是標題',?'background:red;'],?//?第一個是標題內容??第二個是標題欄的style(可以為空)
content:?'這是內容',
contentClass:?'className',
btn:?['取消','確定'],
// ??time:?2000
})
//?如果有btn
.then(function?(res){
//?res為0時是用戶點擊了左邊??為1時用戶點擊了右邊
let?position?=?res?===?0???'left'?:?'right'
console.log(position)
})
},
// footer:
testLayerFooter(){
this.$layer.footer({
content:?'這是內容',
btn:?['取消',?'選項1',?'選項2']
})
//?如果有btn
.then(function?(res){
var?text?=?res==0???'取消'?:?'選項'+res
console.log(text)
})
},
//open
testLayerOpen(){
this.$layer.open({
style: 'border:none; background-color:#78BA32; color:#fff;',
content:'內容'
})
},
//close
testLayerClose(){
var _this = this;
this.$layer.loading('測試關閉方法');
setTimeout(function(){
_this.$layer.close();
},3000);
}
幾種效果展示：
??
??
公司項目不可公開，也沒時間單獨整理，所以源碼就不上傳了。
組件地址：https://www.npmjs.com/package/vue-layer-mobile
.
總結
以上是生活随笔為你收集整理的vue手机端回退_vue移动端弹框组件，vue-layer-mobile的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 挂接CreateProcessW实现对进
- 下一篇： CCleaner 2.11.636 -