Layui 总结（1）弹出层

mac2022-06-30 69

1.弹出小提示tips 默认吸附在自己地方控制弹出的位置可以让其吸附在其他元素附近，在内容后面增加一个jq选择器

<input type="text"> <span id="ss">asdasdasdasdweq</span> <script> function tan() { layer.tips('我是另外一个tips，只',"#ss" ,{ tips: [1, '#3c3c3c'], time: 4000}); } $("input:text").focusout(tan) </script>

2.进度条动态调整

layui.use('element', function(){ var element = layui.element; $("input").focusout(function (event) { element.progress('demo', event.target.value); }) });

　进一步扩展思路如下：

　用一个计时器设置每隔多久时间执行一次函数，让demo 动态更新一下子这里获取input值用的jquery的方法 $(" input ").val()

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <link rel="stylesheet" href="./layui/css/layui.css"> <script src="./layui/layui.js"></script> </head> <body> <div class="test"> <p >{{age}}</p> <input type="text" v-on:input="changeName"> <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true"> <div class="layui-progress-bar" lay-percent="0" ></div> </div> </div> <script> new Vue({ el:".test", data:{ name:"laoli", age:10 }, methods:{ changeName:function (event) { // this.name=event.target.value; this.age=event.target.value; } } }) layui.use('element', function(){ var element = layui.element; setInterval(function () { element.progress('demo', $(" input ").val()); },10) // $("input").focusout(function (event) { // element.progress('demo', $(" input ").val()); // }) }); </script> </body> </html>

转载于:https://www.cnblogs.com/nice2018/p/10011306.html

相关资源：JAVA上百实例源码以及开源项目

最新回复(0)

Layui 总结（1） 弹出层

Layui 总结（1）弹出层