From 40d3ce1898a48014de1dbb2cbcb31d3a0138b3b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B4=A4=E5=BF=83?= <3277200+sentsim@users.noreply.github.com> Date: Mon, 29 Aug 2022 23:53:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20slider=20=E7=9A=84=20done?= =?UTF-8?q?=20=E5=9B=9E=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/slider.html | 30 +++++++++++---------- src/modules/slider.js | 61 +++++++++++++++++++++++++++---------------- 2 files changed, 54 insertions(+), 37 deletions(-) diff --git a/examples/slider.html b/examples/slider.html index 2c5a9571..c638d123 100644 --- a/examples/slider.html +++ b/examples/slider.html @@ -1,16 +1,14 @@ - - -滑块 - layui + + + 滑块 - layui - - - + + @@ -31,14 +29,18 @@ layui.use('slider', function(){ //,type: 'vertical' //,min: -20 //最小值 //,max: 20 //最大值 - //,value: 10 //[40, 60] //初始值 - //,step: 10 //间隔值 + //,value: 11 //[40, 60] //初始值 + //,step: 1 //间隔值 //,showstep: true //间隔点 //,tips: false //关闭提示文本 ,input: true //输入框 //,range: true //范围选择 - ,change: function(value){ //回调实时显示当前值 - console.log(value) + //,theme: '#FF5722' + ,change: function(value){ // 选中值发生改变的回调 + console.log('change', value) + } + ,done: function(value){ // 值完成选中的回调 -- v2.8.0 新增 + console.log('done', value); } ,setTips: function(value){ //自定义提示文本 return value + '%'; @@ -51,7 +53,7 @@ layui.use('slider', function(){ //,theme: '#c00' //主题色 }); - sliderInst.setValue(30); + //sliderInst.setValue(30); slider.render({ diff --git a/src/modules/slider.js b/src/modules/slider.js index 6cae3ea6..541b8a80 100644 --- a/src/modules/slider.js +++ b/src/modules/slider.js @@ -3,53 +3,64 @@ */ layui.define('jquery', function(exports){ - "use strict"; + 'use strict'; + var $ = layui.$ - //外部接口 - ,slider = { + // 外部接口 + var slider = { config: {} ,index: layui.slider ? (layui.slider.index + 10000) : 0 - //设置全局项 + // 设置全局项 ,set: function(options){ var that = this; that.config = $.extend({}, that.config, options); return that; } - //事件 + // 事件 ,on: function(events, callback){ return layui.onevent.call(this, MOD_NAME, events, callback); } - } + }; - //操作当前实例 - ,thisSlider = function(){ + // 操作当前实例 + var thisSlider = function(){ var that = this ,options = that.config; return { - setValue: function(value, index){ //设置值 + setValue: function(value, index){ // 设置值 options.value = value; return that.slide('set', value, index || 0); } ,config: options } - } + }; - //字符常量 - ,MOD_NAME = 'slider', DISABLED = 'layui-disabled', ELEM_VIEW = 'layui-slider', SLIDER_BAR = 'layui-slider-bar', SLIDER_WRAP = 'layui-slider-wrap', SLIDER_WRAP_BTN = 'layui-slider-wrap-btn', SLIDER_TIPS = 'layui-slider-tips', SLIDER_INPUT = 'layui-slider-input', SLIDER_INPUT_TXT = 'layui-slider-input-txt', SLIDER_INPUT_BTN = 'layui-slider-input-btn', ELEM_HOVER = 'layui-slider-hover' + // 字符常量 + var MOD_NAME = 'slider'; + var DISABLED = 'layui-disabled'; + var ELEM_VIEW = 'layui-slider'; + var SLIDER_BAR = 'layui-slider-bar'; + var SLIDER_WRAP = 'layui-slider-wrap'; + var SLIDER_WRAP_BTN = 'layui-slider-wrap-btn'; + var SLIDER_TIPS = 'layui-slider-tips'; + var SLIDER_INPUT = 'layui-slider-input'; + var SLIDER_INPUT_TXT = 'layui-slider-input-txt'; + var SLIDER_INPUT_BTN = 'layui-slider-input-btn'; + var ELEM_HOVER = 'layui-slider-hover'; - //构造器 - ,Class = function(options){ + // 构造器 + var Class = function(options){ var that = this; that.index = ++slider.index; that.config = $.extend({}, that.config, slider.config, options); that.render(); }; - //默认配置 + // 默认配置 Class.prototype.config = { type: 'default' //滑块类型，垂直：vertical ,min: 0 //最小值 @@ -217,7 +228,7 @@ layui.define('jquery', function(exports){ ,sliderTxt = sliderAct.next('.' + SLIDER_INPUT) ,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val() ,step = 100 / ((options.max - options.min) / Math.ceil(options.step)) - ,change = function(offsetValue, index){ + ,change = function(offsetValue, index, from){ if(Math.ceil(offsetValue) * step > 100){ offsetValue = Math.ceil(offsetValue) * step }else{ @@ -257,9 +268,12 @@ layui.define('jquery', function(exports){ ]; if(arrValue[0] > arrValue[1]) arrValue.reverse(); //如果前面的圆点超过了后面的圆点值，则调换顺序 } - - //回调 - options.change && options.change(options.range ? arrValue : selfValue); + + that.value = options.range ? arrValue : selfValue; // 最新值 + options.change && options.change(that.value); // change 回调 + + // 值完成选中的事件 + if(from === 'done') options.done && options.done(that.value); } ,valueTo = function(value){ var oldLeft = value / sliderWidth() * 100 / step @@ -276,6 +290,7 @@ layui.define('jquery', function(exports){ var upCall = function(){ up && up(); elemMove.remove(); + options.done && options.done(that.value); }; $('#LAY-slider-moving')[0] || $('body').append(elemMove); elemMove.on('mousemove', move); @@ -283,7 +298,7 @@ layui.define('jquery', function(exports){ }; //动态赋值 - if(setValue === 'set') return change(value, i); + if(setValue === 'set') return change(value, i, 'done'); //滑块滑动 sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){ @@ -341,7 +356,7 @@ layui.define('jquery', function(exports){ } else { index = 0; }; - change(reaLeft, index); + change(reaLeft, index, 'done'); e.preventDefault(); } }); @@ -360,7 +375,7 @@ layui.define('jquery', function(exports){ : Number(inputValue) + options.step; }; var inputScale = (inputValue - options.min) / (options.max - options.min) * 100 / step; - change(inputScale, 0); + change(inputScale, 0, 'done'); }); }); @@ -372,7 +387,7 @@ layui.define('jquery', function(exports){ realValue = realValue > options.max ? options.max : realValue; this.value = realValue; var inputScale = (realValue - options.min) / (options.max - options.min) * 100 / step; - change(inputScale, 0); + change(inputScale, 0, 'done'); }; sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){ if(e.keyCode === 13){