[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 自定义弹层

信息弹层

提示

底部提示弹层

询问弹层

原文地址:https://www.cnblogs.com/frost-yen/p/9607115.html

时间: 2024-10-07 12:14:51

[vuejs] vue2.0-layer-mobile移动端弹层的相关文章

弹层组件-layer

layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上任意版本,和laye.js 通过简单的例子能加深理解和学习,首先引入基本的css和js <link rel="stylesheet" href="css/reset.css"> <script src="http://libs.baidu.c

jquery layer弹窗弹层插件 小巧强大

/* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两

layer ----- 弹层

模块加载名称:layer,layer独立组件官网:layer.layui.com layer可以独立使用,也可以通过Layui模块化使用.按照实际需求来选择.只使用layer,你可以去layer独立组件官网下载组件包.你需要在你的页面引入jQuery1.8以上的任意版本,并引入layer.js.如果你使用的是Layui,那么你直接在官网下载layui框架即可,无需引入jQuery和layer.js,但需要引入layui.css和layui.js ,解压后可放在extend下, , layer提供

jquery layer弹窗弹层插件 (转)

/* 先去官网下载最新的js  http://sentsin.com/jquery/layer/ ①引用jquery ②引用layer.min.js */ 触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: [信息框]: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两

手机端弹出层:Layer Mobile API文档手册v1.2

原文地址:http://sentsin.com/jquery/layer/ 参数 即核心接口:layer.open(options) 中的options: type 类型:Number 默认:0,设置弹层的类型,0表示信息框,1表示页面层,2表示加载层 content 类型:String 必选参数,控制弹层内容 title 类型:String或Array 默认:空,控制层的标题,值为字符串或者数组,例子: [javascript] view plain copy print? layer.ope

初试 vue2.0——9.项目开发_better-scroll 实现移动端滑动2

写在前面的话: 上一篇文章实现了滑动效果,这部分来试试左右联动效果的实现方法吧 九.better-scroll + vue2.0 实现移动端滑动2--左右联动 效果:滑动右侧时,左侧也能有相应的变化:点击左侧时,右侧也能自动定位到相应的位置. 如下图所示界面,左侧为分栏,右侧为分栏详情. 滑动右边使左边联动的大概的思路: 1)要知道右侧的列表中,每一个分栏所占的高度,存进一个数组中. 2)实现左边联动,则必须要监控 "scroll"事件,获取其高度 3)将scroll 的高度与右侧分栏

vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版

在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://www.cnblogs.com/sichaoyun/p/6647458.html <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(st

jQuery Layer mobile 弹出层

layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选择使用. 无需依赖任何库,只加载layer.m.js即可 小巧玲珑,性能卓越.柔情似水- 具备无以伦比的自适应功能 灵活的皮肤自定义支撑,充分确保弹层风格多样化 丰富.科学的接口,让弹弹弹层无所不能 版本Layer mobile1.8 作者:闲心贤 github 在线实例 实例预览 layer弹层组

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║实战二:初探SSR服务端渲染(个人博客二)

缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大家增加点儿学习的动力,每天提醒下,完全没有提纲或者安排说明什么的,就是按照我自己学的方向走,正好发现了一个规律就是:每一个系列正好是 1 个引子 + 12 篇正文,不知道大家对这个有没有感觉,大家可能看到我的头像就知道了,哈哈,其实我是一个红迷,正好这里机缘巧合,两个系列都形成了这样的,我自私的给自