1+ <template >
2+
3+ <div class =" layui-slider-wrap"
4+ :style =" (vertical ? 'bottom: ' + left + '%' : 'left: ' + left + '%')"
5+ <div class =" layui-slider-wrap-btn"
6+ :class =" ['layui-bd-' + this.theme, {'layui-disabled': disabled}]"
7+ style =" border 2px ; border-style solid "
8+ @mousedown =" onDragStart"
9+ @mouseenter =" handleMouseEnter"
10+ @mouseleave =" handleMouseLeave"
11+ </div >
12+ </div >
13+ </template >
14+
15+ <script >
16+ export default {
17+ name: " LaySliderBtn"
18+ data (){
19+ return {
20+ left: 0 ,
21+ btnValue: 0 ,
22+ isMouseDown: false ,
23+ startX: 0 ,
24+ startLeft: 0
25+ }
26+ },
27+ props: {
28+ value: {
29+ type: Number ,
30+ requires: true
31+ },
32+ max: {
33+ type: Number ,
34+ default : () => 100
35+ },
36+ min: {
37+ type: Number ,
38+ default : () => 0
39+ },
40+ step: {
41+ type: Number ,
42+ default : () => 1
43+ },
44+ sliderWidth: {
45+ type: Number ,
46+ },
47+ steps: {
48+ type: Array
49+ },
50+ vertical: {
51+ type: Boolean
52+ },
53+ theme: String ,
54+ disabled: Boolean
55+ },
56+ mounted () {
57+ this .setData ()
58+ },
59+ methods: {
60+ setData (){
61+ const {value , max , min } = this
62+ this .btnValue = value
63+
64+ let left = ((value - min) / (max - min) || 0 ) * 100
65+ if (left > 100 ) left = 100 ;
66+
67+ if (left < 0 ) left = 0 ;
68+ this .left = left
69+ },
70+ handleMouseEnter () {
71+
72+ this .$emit (' tip' true , this .left , this .btnValue ])
73+ },
74+ handleMouseLeave () {
75+ if (! this .isMouseDown ) this .$emit (' tip' false , this .left , parseInt (this .btnValue )])
76+ },
77+ handleChange (){
78+ const {btnValue , max , min } = this
79+ if (btnValue > max) this .btnValue = max
80+ if (btnValue < min) this .btnValue = min
81+ this .$emit (' tip' true , this .left , this .btnValue ])
82+ this .$emit (' input' parseInt (this .btnValue ))
83+ },
84+ onDragStart (e ) {
85+ e .preventDefault ();
86+ this .isMouseDown = true
87+ this .startX = this .vertical ? - e .screenY : e .screenX
88+ this .startLeft = this .left
89+
90+ window .addEventListener (' mousemove' this .onDragging );
91+ window .addEventListener (' mouseup' this .onDragEnd );
92+
93+ },
94+ onDragging (e ) {
95+ if (this .disabled ) {
96+ return false
97+ }
98+ const {startX , isMouseDown , sliderWidth , startLeft , max , min , steps } = this ;
99+ const screenX = this .vertical ? - e .screenY : e .screenX
100+ if (! isMouseDown) return false ;
101+
102+ let left = startLeft + ((screenX - startX) / sliderWidth) * 100 ;
103+
104+ if (left > 100 ) left = 100 ;
105+
106+ if (left < 0 ) left = 0 ;
107+
108+ left = steps .filter (o => o <= left).pop ()
109+ this .left = left;
110+ this .btnValue = Math .round (min + left * (max - min) / 100 )
111+ this .handleChange ()
112+ },
113+ onDragEnd (e ) {
114+ e .returnValue = false ;
115+
116+ this .isMouseDown = false ;
117+ this .$emit (' tip' false , this .left , this .btnValue ])
118+ window .removeEventListener (' mousemove' this .onDragging );
119+ window .removeEventListener (' mouseup' this .onDragEnd );
120+ }
121+ },
122+ watch: {
123+ value () {
124+ this .setData ()
125+ }
126+ }
127+ }
128+ script >
129+
130+ <style scoped>
131+
132+ style >
0 commit comments