[vuejs] vue2.0-layer-mobile移动端弹层
vue2.0-layer-mobile移动端弹层
本次组件升级支持slot内容分发功能,实现高定制内容风格的弹层
安装方法
npm install vue2-layer-mobile -S
初始化
import layer from 'vue2-layer-mobile'
Vue.use(layer)
该组件是基于开源插件layer-mobile用vue重新改写的,并且扩展了一些便捷方法 具体的API与layer-mobile高度保持一值,大家可以放心使用
组件使用
// 普通使用
<layer v-model="showLayer" @sure="yesFn" :btn="['确定使用', '放弃']" :content="'欢迎使用vue2-layer-mobile'"></layer> // 利用 slot,自定义风格各异的弹层
// 扩展支持 slot 是为了解决以 plugin 形式时,通过 content 属性传入生成的内容不支持 vue 特性的问题
<layer v-model="showLayer" @sure="yesFn" :btn="['确定使用', '放弃']" :content="'欢迎使用vue2-layer-mobile'">
<div class="input-pwd-layer">
<h2 class="f16 gray">请输入支付密码</h2>
<div class="int-pwd-outer">
<input @input="changeFn($event)" type="password" class="int-pwd" maxlength="6">
</div>
</div>
</layer> export default {
data() {
return {
showLayer: true
}
}
}
plugin形式调用
// 询问层
const index = this.$layer.open({
btn: ['确认', '取消'],
content: 'hello word',
className: 'good luck1',
shade:true,
success(layer) {
console.log('layer id is:',layer.id)
},
yes(index, $layer) {
console.log(arguments)
// 函数返回 false 可以阻止弹层自动关闭,需要手动关闭
// return false;
},
end() {
console.log('end')
}
}) // 关闭层
this.$layer.close(index) // loading层
const index = this.$layer.open({
type:2,
content: '加载中...',
success(layer) {
console.log('layer id is:',layer.id)
},
end() {
console.log('end')
}
}) // 底部对话框
this.$layer.open({
content: '这是一个底部弹出的询问提示',
btn: ['删除', '取消'],
skin: 'footer',
yes: (index) => {
this.$layer.open({content: '执行删除操作'})
}
}) // 页面层
this.$layer.open({
type: 1,
content: '可传入任何内容,支持html。一般用于手机页面中',
anim: 'up',
// 特别注意,这个styles属性跟 layer-mobile 有点区别多加了个s,因为style在vue中是保留关键词
styles: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
})
扩展方法
以下方法都可以通过 this.$layer.open 这个方法来实现.
提示层(msg)
this.$layer.msg('hello world', () => console.log('end!!!'))
信息层(alert)
this.$layer.alert('您确定要刷新页面吗', () => window.location.reload())
询问层(confirm)
const index = this.$layer.confirm('您确定要删除吗?', () => alert('yes'), () => alert('no')) setTimeout(() => {
this.$layer.close(index)
}, 3000)
API
Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 弹层的类型 | Number | 0表示信息框,1表示页面层,2表示加载层 | 0 |
content | 弹层内容 | String | 必选参数 | 无 |
title | 弹层标题 | String或Array | 值可以为字符串或者数组 | |
time | 控制自动关闭层所需秒数 | Number | 整数和浮点数 | 默认不开启 |
styles | 自定义层的样式 | String | 如'border:none; color:#fff;' | |
skin | 弹层显示风格 | String | footer(即底部对话框风格)、msg(普通提示) | |
className | 自定义一个css类 | String | custom-class | |
btn | 按钮 | String/Array | 字符串或者数组(目前最多支持两个) | |
anim | 动画类型 | String/Boolean | scale(默认)、up(从下往上弹出),如果不开启动画,设置false即可 | scale(默认) |
shade | 控制遮罩展现 | Boolean | true/false | true |
shadeClose | 是否点击遮罩时关闭层 | Boolean | true/false | true |
fixed | 是否固定层的位置 | Boolean | true/false | true |
top | 控制层的纵坐标 | Number | 整数和浮点数(一般情况下不需要设置,因为层会始终垂直水平居中,只有当fixed: false时top才有效) | 无 |
success | 层成功弹出层的回调(只要以插件形式使用才有效),该回调参数返回一个参数为当前层元素对象 | Function | Function/null | null |
yes | 点确定按钮触发的回调函数,返回一个参数为当前层的索引(只要以插件形式使用才有效) | Function | Function/null | null |
no | 点取消按钮触发的回调函数(只要以插件形式使用才有效) | Function | Function/null | null |
end | 层彻底销毁后的回调函数(只要以插件形式使用才有效) | Function | Function/null | null |
Slots
name | 描述 |
---|---|
default | 弹出框的内容 |
Events
name | 说明 | 回调参数 |
---|---|---|
sure | 点击确认按钮时触发 | 无 |
cancel | 点击取消按钮时触发 | 无 |
show | 弹窗可见时触发 | 无 |
close | 弹窗关闭时触发 | 无 |
这些事件不适用于以插件形式调用的事件监听处理(它有自己的处理事件方法见以上api如yes、no等)
插件形式的内置方法/属性
返回当前使用的layer mobile版本号
this.$layer.v
用于关闭特定层,index为该特定层的索引
layer.close(index)
关闭页面所有layer的层
layer.closeAll()
说明
1.参数(options)
style改成styles
shade不支持自定义透明度与背景色
特别注意,这个styles属性跟 layer-mobile 有点区别多加了个s,因为style在vue中是保留关键词
2.扩展方法[msg、alert、confirm] 只有当你调用以上扩展方法时,会自动给层添加一个css类'layui-m-'+方法名[msg、alert、confirm]
效果图
利用 slot 自定义弹层
信息弹层
提示
底部提示弹层
询问弹层
[vuejs] vue2.0-layer-mobile移动端弹层的更多相关文章
- 关于移动端弹层下的body滚动
关于移动端弹层下的body滚动 这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦) ps: 本文的例子都是用vu ...
- 关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案
楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包.首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere ...
- 弹层组件-layer
layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...
- Vue2.0 中,“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?(转)
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- jquery layer弹窗弹层插件 小巧强大
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- jquery layer弹窗弹层插件 (转)
/* 先去官网下载最新的js http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id ...
- vue-touch不支持vue2.0的替换方法
当你想用vue-touch时,却发现官网这句话 Touch events plugin for Vue.js. This plugin does not support Vue 2.0 yet. 但是 ...
- layer重复弹出(layui弹层同时存在多个)的解决方法
layer.open() 同时存在多个;解决 layui 弹层 layer 同时存在多个页面层(iframe)的问题 这个问题其实是疏忽了一些 基础参数(仔细看文档,仔细看文档,仔细看文档) 一.ty ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
随机推荐
- linux_添加一个普通用户
useradd 用户名 passwd 密码 su 用户名 可以切换用户 exit 返回之前登录的用户 sodu用户 --> 不用告诉普通用户root的密码 可以查看所有的系统文件 包括root下 ...
- mysql之练习题4
准备表: create table class(cid int primary key auto_increment, caption ) not null unique); INSERT into ...
- mysql之表的查看操作
一 补充一些杂碎的知识 1 插入数据: create table 新表名(字段 数据类型[约束条间]...) select 字段... from 旧表名 create table 新表名(字段 数据类 ...
- 关于页面传值页面的跳转,以及spring mvc 框架的流程问题
list页面 1.点击页面后,进入后台的list方法中,通过findPage()查询数据的,findPage中含有findList(): 2.如果页面没有输入查询条件,那么则显示所有数据集合,如果页面 ...
- c# devexpress学习绘图
用字典方式存储数据并绘图:http://www.xuebuyuan.com/465384.html 数据库存储数据,并对图形作各种设置:http://www.cnblogs.com/xuhaibiao ...
- GHOST完成后出现GRUB解决方法
1.试一下这个命令: grub> rootnoverify (hd0,0)(注意空格!!!) 或者 grub>makeacrive (hd0,0)grub> chainloader ...
- MySQL RR模式下如何加锁
锁的算法有三种,如下: record lock.gap lock.next_key lock 在不同的隔离级别下,所使用的锁的算法如下: RC:仅有record 锁 RR:有record和next_k ...
- java项目显示红叉,程序却没有错误
转 http://blog.sina.com.cn/s/blog_825b7d7c0102w7rq.html (2016-07-02 11:38:38) 分类: javaWeb 电脑换了不同版本的 ...
- 学习node.js的C++扩展
本想买本书,可是太贵,了一下作者可惜没有回应,不然也会去支持一下.于是自己baidu罗.先是从这个入手 安装好环境 https://github.com/nodejs/node-gyp#install ...
- php apache
php与Apache配置基础知识 1.在 AllowOverride 设置为 None 时,.htaccess 文件将被完全忽略.当此指令设置为All时,所有具有“.htaccess” 作用域的指令都 ...