layer.tips()是Layer中的一个方法,用于在指定元素旁边显示气泡提示框,常用于提示表单输入内容的规则。
使用方法如下:
-
首先需要引用Layer的js和css文件,与layer.msg()使用方法一样。
-
然后在需要显示提示框的元素中添加 “lay-tips” 属性,并将值设置为需要显示的提示内容即可。例子:
<input type="text" lay-tips="请输入用户名" />
- 调用 layer.tips() 方法,传入需要显示的提示内容和配置项即可。例子:
layer.tips('请输入用户名', 'input[type="text"]',{
tips: [1, '#FF5722'], //1表示tips在下方,#FF5722表示颜色
time: 2000 //2秒后自动关闭
});
在例子中:
- 第一个参数为需要显示的提示内容。
- 第二个参数是需要显示提示框的元素,可以是一个 CSS 选择器,也可以是 DOM 对象。
- options 对象用于设置一些配置项,其中tips属性用于设定提示框的方向和颜色。
除了tips属性之外,还可以设置以下配置项:
- area:设置提示框的宽度和高度,可以使用数组或者字符串,如:‘200px’,[‘100px’, ‘50px’]。
- time:提示框延迟多少毫秒关闭,如:2000即为2秒。
- zIndex:提示框层级,值越大显示越在上面。
- maxWidth:设置提示框的最大宽度。
- skin:设置提示框的皮肤风格,值为类名,如‘layui-layer-tipsxxx’。
- anim:设置提示框的弹出动画,值为 0-6 ,默认无动画。
以上就是使用 Layer.tips() 方法的简要步骤和配置项介绍。