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相关推荐
- vue手机端回退_华为官方教程:以 P40 为例,鸿蒙 OS 2.0 Beta 版本回退到 EMUI 11 稳定版...
12月16日,华为举行 HarmonyOS 2.0 手机开发者 Beta 活动.现场正式发布了 HarmonyOS 2.0 手机开发者 Beta 版本.同时,HarmonyOS 2.0 手机开发者 B ...
- vue手机端回退_推荐3个快速开发平台 前后端都有 接私活又有着落了
经常性逛github,发现了一些优秀的开源项目,其中的框架及代码非常不错,现在给大家推荐三个快速开发平台. 第一个就是优秀的Jeecg-boot快速开发平台 前端采用阿里的ant-design-vue ...
- vue移动端弹框组件
这里说一下 vue-layer-mobile插件的使用 一.npm 安装 // 当前最新版本 1.2.0 npm install vue-layer-mobile // 如新版遇到问题可回退旧版本 n ...
- vue手机端回退_从外链回退到vue应用不触发生命周期、beforeRouterEnter等钩子函数的问题...
在iphoneX及以上版本从外链回退不触发事件,7P,7没发现这个bug 安卓上自测没有发现这个问题 最近做项目中发现了一个问题,iphoneX及以上版本从当前vue应用中跳转到外部链接然后在回退到v ...
- vant组件搜索并选择_Vue.js自定义弹层组件|vue仿微信/ios弹窗
最近趁着国庆假期给自己充充电,一直在捣鼓Nuxt.js项目,由于项目中需要用到定制化弹窗功能,本来是想着使用Vant组件库,经过再三考虑,最后决定还是自己重新造一个,于是就有了Vue自定义弹出层VPo ...
- vue手机端布局纵向布局_Vue中的黄金布局集成
vue手机端布局纵向布局 金色的布局 (vue-golden-layout) Integration of the golden-layout to Vue. 将黄金布局整合到Vue. 安装 (Ins ...
- 【Android RTMP】RTMP 直播推流阶段总结 ( 服务器端搭建 | Android 手机端编码推流 | 电脑端观看直播 | 服务器状态查看 )
文章目录 安卓直播推流专栏博客总结 一. 服务器搭建 二. 手机端推流 三. 电脑端观看直播 四. RTMP 服务器端状态 安卓直播推流专栏博客总结 Android RTMP 直播推流技术专栏 : 0 ...
- 亚马逊手机端测评软件/PC端测评软件各有什么优缺点?
亚马逊手机端测评软件/PC端测评软件各有什么优缺点? 亚马逊测评氛围手机端测评和web端测评.之前用的更多的还是手机端测评,因为这比较符合真实用户的操作习惯,但是随着亚马逊网页端的不断优化,不少欧美国 ...
- js判断手机端还是电脑PC端(以及注意事项)
在router.index中声明方法,在导航守卫中调用并跳转 要注意跳转的网址必须加上 http 或https 1: 不加是不会打开外网的连接,会在你服务内找localhost:XX/XX, 2:加上 ...
最新文章
- 2021年大数据Spark(十四):Spark Core的RDD操作
- 无门槛领取80本圣经级技术书籍!技术改变世界!
- WPF入门(六)样式Style
- GNS3中不同型号路由器支持的模块表
- iphonex如何关机_iPhoneX怎么关机 iPhoneX如何强制重启【详细步骤】
- java 读取excel 文件 Unable to recognize OLE stream 错误
- Webpack 中 css import 使用 alias 相对路径
- 资产负债表 公式总结
- 【JavaWeb】【笔记】《JavaWeb入门经典》 第15章 Struts框架
- 一文看懂量子十问(上篇)
- mac误删文件恢复可靠教程
- Linux系统中VCS、Dve Verdi的使用
- 微信、公总号、企业微信开发
- 软件定义网络基础(SDN①)
- short 在JAVA_short在java中是什么类型的
- 【Vue3源码学习】响应式源码解析:reactive、effect、ref
- 微软服务器安装显卡驱动,适用于 Windows 的 Azure N 系列 NVIDIA GPU 驱动程序安装 - Azure Virtual Machines | Microsoft Docs...
- Git系列:管理、撤销以及删除
- 安卓拨号界面查询*#代码大全(由于最近普通用户爱玩这些黑科技,于是在网上找了些)
- iOS 允许http请求 关于NSAppTransportSecurity 和 NSExceptionDomains 的关系