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);
})
});
<!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>
<input type="text">
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
<div class="layui-progress-bar" lay-percent="0%"></div>
</div>
<script>
layui.use('element', function(){
var element = layui.element;
$("input").focusout(function (event) {
element.progress('demo', event.target.value);
})
});
</script>
</body>
</html>
进一步扩展思路如下：
用一个计时器 设置 每隔多久时间 执行一次函数，让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>