JcRange.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <div class="jc-component__range">
  3. <div class="jc-range" :class="rangeStatus?'success':''" >
  4. <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
  5. <span style="margin-left: 20px;">{{rangeStatus?successText:startText}}</span>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. props: {
  12. // 成功之后的函数
  13. successFun: {
  14. type: Function
  15. },
  16. //成功图标
  17. successIcon: {
  18. type: String,
  19. default: 'el-icon-success'
  20. },
  21. //成功文字
  22. successText: {
  23. type: String,
  24. default: '验证成功'
  25. },
  26. //开始的图标
  27. startIcon: {
  28. type: String,
  29. default: 'el-icon-d-arrow-right'
  30. },
  31. //开始的文字
  32. startText: {
  33. type: String,
  34. default: '请拖住滑块,拖动到最右边'
  35. },
  36. //失败之后的函数
  37. errorFun: {
  38. type: Function
  39. },
  40. //或者用值来进行监听
  41. status: {
  42. type: String
  43. }
  44. },
  45. data(){
  46. return {
  47. disX : 0,
  48. rangeStatus: false
  49. }
  50. },
  51. methods:{
  52. //滑块移动
  53. rangeMove(e){
  54. let ele = e.target;
  55. let startX = e.clientX;
  56. let eleWidth = ele.offsetWidth;
  57. let parentWidth = ele.parentElement.offsetWidth;
  58. let MaxX = parentWidth - eleWidth;
  59. if(this.rangeStatus){//不运行
  60. return false;
  61. }
  62. document.onmousemove = (e) => {
  63. let endX = e.clientX;
  64. this.disX = endX - startX;
  65. if(this.disX<=0){
  66. this.disX = 0;
  67. }
  68. if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
  69. this.disX = MaxX;
  70. }
  71. ele.style.transition = '.1s all';
  72. ele.style.transform = 'translateX('+this.disX+'px)';
  73. e.preventDefault();
  74. }
  75. document.onmouseup = ()=> {
  76. if(this.disX !== MaxX){
  77. ele.style.transition = '.5s all';
  78. ele.style.transform = 'translateX(0)';
  79. //执行成功的函数
  80. this.errorFun && this.errorFun();
  81. }else{
  82. this.rangeStatus = true;
  83. if(this.status){
  84. this.$parent[this.status] = true;
  85. }
  86. //执行成功的函数
  87. this.successFun && this.successFun();
  88. }
  89. document.onmousemove = null;
  90. document.onmouseup = null;
  91. }
  92. }
  93. }
  94. };
  95. </script>
  96. <style scoped>
  97. .jc-flex{
  98. display: flex;
  99. justify-content: center;
  100. align-items: center;
  101. }
  102. .jc-flex >>> .el-form-item__content {
  103. line-height: 70px !important;
  104. }
  105. .jc-component__range i{
  106. position: absolute;
  107. left: 0;
  108. width: 50px;/*no*/
  109. height: 70px;
  110. color: #3fcd26;
  111. background-color: #fff;
  112. border: 1px solid #d8d8d8;
  113. cursor: pointer;
  114. line-height: 70px;
  115. font-size: 24px;
  116. }
  117. .success{
  118. background-color: #3bc923;
  119. color: #fff;
  120. line-height: 70px;
  121. }
  122. .jc-component__range.jc-range{
  123. background-color: #e9e9e9;
  124. position: relative;
  125. transition: 1s all;
  126. user-select: none;
  127. color: #585858;
  128. @include jc-flex;
  129. height: 70px; /*no*/
  130. }
  131. .jc-range {
  132. line-height: 70px !important;
  133. }
  134. .success i{
  135. color: #3bc923;
  136. line-height: 70px;
  137. margin-left: 10px;
  138. }
  139. .el-icon-d-arrow-right:before,
  140. .el-icon-success:before {
  141. margin-left: 10px;
  142. }
  143. </style>