zoukankan      html  css  js  c++  java
  • Vue中使用layer.js做非模态弹窗(一)

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <!-- jquery需要v1.8以上 -->
     7         <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
     8         <!-- 需要从layui官网下载,将从https://layer.layui.com/下载的layer放入项目后进行引入layer.js -->
     9         <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
    10         
    11         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    12     </head>
    13     <body>
    14         <div id="app">
    15             <button @click="b">点击</button>
    16         </div>
    17         <script type="text/javascript">
    18             new Vue({
    19                 el: '#app',
    20                 data: {
    21                     name: '1'
    22                 },
    23                 methods: {
    24                     b() {
    25                         let content = '<h1>测试</h1>'
    26                         layer.open({
    27                             type: 1,//0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
    28                             area: ['600px', '360px'],//宽高
    29                             shade: false,//不需要遮罩层,设置模态与非模态的关键
    30                             content, //内容
    31                             cancel: function(index, layero){ //关闭弹窗时的回调函数
    32                               if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时,该层才会关闭
    33                                 layer.close(index)
    34                               }
    35                               return false; 
    36                             }  
    37                         });
    38                     }
    39                 },
    40             })
    41         </script>
    42     </body>
    43 </html>

    注:layer的参数:https://www.layui.com/doc/modules/layer.html

      layer.js的下载:https://layer.layui.com/

      下载后将图中标红文件放在自己创建的项目中即可

      由于element-ui的弹窗都是模态的,而在工作中需要用到非模态的一些弹窗,因此找到了Layui的layer.js,这里的vue是通过cdn方式引入,并没有通过vue-cli脚手架进行搭建项目,在下一篇博客中会介绍使用在vue-cli脚手架搭建的项目中使用layer.js

  • 相关阅读:
    使用Session防止表单重复提交
    Session
    使用Cookie进行会话管理
    Java邻接表表示加权有向图,附dijkstra最短路径算法
    web工程中URL地址的推荐写法
    Web工程中各类地址的写法
    HTTP中的重定向和请求转发的区别
    squid代理
    代理服务 squid 隐藏真实ip,也就是透明代理
    docker添加sshd 服务
  • 原文地址:https://www.cnblogs.com/lyt520/p/13510619.html
Copyright © 2011-2022 走看看