最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦!
一、npm 安装
1
2
3
4
|
// 当前最新版本 1.2.0
npm install vue-layer-mobile
// 如新版遇到问题可回退旧版本
npm install vue-layer-mobile@1.0.0
|
二、调整配置:因为这个组件中有woff,ttf,eto,svg类型文件,所以要配置一些loader,
前端精品教程:百度网盘下载
1
2
3
4
5
|
//在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"
}
|
三、引入和使用
1
2
3
|
import
'vue-layer-mobile/need/layer.css'
import layer from
'vue-layer-mobile'
Vue.use(layer)
|
四、具体使用介绍:——这个组件一共有6个方法,并不是完全仿layer-mobile,一些简单的弹框还是很好用的。
前端精品教程:百度网盘下载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
// 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; color:#fff;'
,
content:
'内容'
})
},
//close
testLayerClose(){
var
_this =
this
;
this
.$layer.loading(
'测试关闭方法'
);
setTimeout(
function
(){
_this.$layer.close();
},3000);
}
|
几种效果展示:
前端精品教程:百度网盘下载