最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的,很多用法都一样,可以看看哦!
//当前最新版本1.2.0
npm安装vue-layer-mobile//如新版遇到问题可回退旧版本
npm安装vue-layer-mobile@1.0.0
<强>二、调整配置:因为这个组件中有woff, ttf,埃托奥,svg类型文件,所以要配置一些装载机,
//在webpack.config.js中配置如下,首先安装url-loader和file-loader:
{测试:/\。woff/美元的装载机:“url-loader& # 63;限制=10000,mimetype=应用程序/font-woff "},
{测试:/\。ttf/美元,装载机:“url-loader& # 63;限制=10000,mimetype=应用程序/八进制"},
{测试:/\。测试结束/美元,装载机:“file-loader”},
{测试:/\。svg/美元,装载机:“url-loader& # 63;限制=10000,mimetype=图像/svg + xml”}
<强>三,引入和使用
进口vue-layer-mobile/需要/layer.css '
从“vue-layer-mobile”进口层
Vue.use(层)
<强>四,具体使用介绍:——这个组件一共有6个方法,并不是完全仿layer-mobile,一些简单的弹框还是很好用的。
//吐司:文字和图标:
testLayerToast () {
美元。layer.toast ({
图标:“icon-check ',//图标clssName如果为空吐司位置位于下方,否则居中
内容:“提示文字”,
时间:2000//自动消失时间吐司类型默认消失时间为2000毫秒
})
},//加载:
testLayerLoading1 () {
var _this=;
layer.loading美元。(“加载中…”);
setTimeout(函数(){
_this。美元layer.close ();
},3000);
},//对话框:
testLayerDialog () {
美元。layer.dialog ({
标题:['这是标题','背景:红色;'],//第一个是标题内容第二个是标题栏的样式(可以为空)
内容:“这是内容”,
contentClass:“名字”,
btn:['取消”、“确定的),//时间:2000
})//如果有btn
不要犹豫(函数(res) {//res为0时是用户点击了左边为1时用户点击了右边
让位置====0 & # 63;‘左’:‘正确的’
console.log(位置)
})
},//页脚:
testLayerFooter () {
美元。layer.footer ({
内容:“这是内容”,
btn:['取消”、“选项1 ','选项2》)
})//如果有btn
不要犹豫(函数(res) {
var文本===0 & # 63;“取消”:“选”项+ res
console.log(文本)
})
},//打开
testLayerOpen () {
美元。layer.open ({
风格:“边境:没有;background - color: # 78 ba32;颜色:# fff;”
内容:“内容的
})
},//关闭
testLayerClose () {
var _this=;
layer.loading美元。(“测试关闭方法”);
setTimeout(函数(){
_this。美元layer.close ();
},3000);
}
以上这篇vue移动端弹框组件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
