layui前端布局框架之layer弹出层插件中常用函数

最新推荐文章于 2022-09-07 14:29:57 发布

你好啊cbw

最新推荐文章于 2022-09-07 14:29:57 发布

阅读量1.1k

点赞数

分类专栏：前端 JavaWeb 文章标签： java

本文链接：https://blog.csdn.net/qq_40454863/article/details/115336560

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

JavaWeb

17 篇文章 1 订阅

订阅专栏

layer - msg函数
用于弹出信息提示框
格式1.
layer.msg("文本");

格式2. 抖动显示
layer.msg("文本",function(){
//弹窗结束后会执行
});

layer - load函数
格式:
弹出loading:
var index = layer.load(数字0-2);
// 参数表示 loading的图表
//loading窗口在弹出时, 不允许进行操作.
关闭loading:
layer.close(index);
格式2.
超时自动关闭的loading
var index = layer.load(数字0-2,{time:毫秒数字})
//在指定的毫秒后 ,如果没有使用layer.close关闭, 则自动关闭

layer - msg函数(load效果)
格式:
弹出的格式:
var index = layer.msg("文本",{icon:16,shade:0.01})
//因为是msg函数, 所以此窗口会自动消失.
关闭的格式:
layer.close(index);

layer - alert函数信息提示窗
格式:
layer.alert("文本内容",{icon:图片编号});
//图片编号: 0-16之间

layer - tips函数提示层
格式:
layer.tips("文本内容","选择器",{tipsMore:true,tips:数字});
参数:
1. 参数: tipsMore : 是否允许同时存在多个弹出的tips
2. 参数: tips : 取值为数字1-4 , 分别表示弹出在元素的上/右/下/左 . 默认弹出在右边

layer 所有弹出层的关闭
layer.closeAll();

作用: 用于在网页中循环展示固定的布局数据 .

格式1.
给元素添加属性: v-for="item of 数组名"
格式2.
给元素添加属性: v-for="(item,index) of 数组名"

注意: 上述格式中的
数组名指的是: data中的数据key , 这个key对应的数据必须是数组
item 指的是: 每次循环时, 从数组中取出的数据的key , 可以使用插值表达式来显示 {{item}}
index 指的是: 循环的轮数, 类似数据的下标.

案例:

<body>
    <div id="content">
         <ul>
            <li v-for="item of msgs">{{item}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    var v1 = new Vue({
        el:"#content",
        data:{
            msgs:["打打打发顺丰","敖德萨多撒","规定的法定","请问奥所多",水电费方法"]
        }
    });
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery2.1.4.js"></script>
    <script src="layer/layer.js"></script>
    <script>
        //提示信息的弹出层
        function msgTest(){
            //layer.msg("提示的文字");
            layer.msg("提示的文字",function () {
                //回调函数，弹出层关闭时被执行(监听)
            })
        }
        //加载弹出层
        function loadTest(){
            var windowId=layer.load(0);//0-16不同数字加载效果不同，返回弹出层的id
            setTimeout(function () { //设置超时2秒后关闭弹出层
                layer.close(windowId);//关闭弹出层
            },2000);
        }
        //提示信息与加载弹出层一体
        function msg_loadTest(){
            layer.msg("提示的文字",{icon:16,shade:0.01});//icon图标0-16表示不同图标
        }
        function alertTest(){
            layer.alert("文字内容",{icon: 10});
        }
        function tipsTest(){
            layer.tips("提示","#span",{tipsMore:true,tips:2});
        }
    </script>
</head>
<body>
<button onclick="msgTest()">msg函数(重点)</button><br>
<button onclick="loadTest()">load函数(重点)</button><br>
<button onclick="msg_loadTest()">msg函数(+load效果)</button><br>
<button onclick="alertTest()">alert函数</button><br>
<button onclick="tipsTest()">tips函数</button><br>
<p>今天天气<span id="span">很好啊</span></p>
</body>

你好啊cbw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
layui前端布局框架之layer弹出层插件中常用函数

layer - msg函数用于弹出信息提示框格式1. layer.msg("文本"); 格式2. 抖动显示 layer.msg("文本",function(){ //弹窗结束后会执行 });layer - load函数格式: 弹出loading: var index = layer.load(数字0-2); // 参数表示 loading的图表 .
复制链接

扫一扫