Slider.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <div class="slider-container" ref="slider-container">
  3. <div class="slider-track">
  4. <span class="slider-internalValue-text">{{ min }}</span>
  5. <div
  6. class="slider-progress"
  7. :style="{ width: `${progressWidth}%` }"
  8. @touchstart.stop="startDrag"
  9. @touchmove.stop="onDrag"
  10. @touchend.stop="endDrag">
  11. <span class="slider-progress-line"></span>
  12. </div>
  13. <span
  14. v-if="isFollow && showValue && suffixNormal"
  15. class="slider-internal-text"
  16. :style="{
  17. left: isFollow && progressWidth < 86 ? `calc(${progressWidth}% + 10px)` : 'auto',
  18. color: followColor
  19. }"
  20. >{{ showValue ? internalValue : max }}{{ suffix }}
  21. </span>
  22. <!-- <span
  23. v-if="isFollow && showValue && !suffixNormal"
  24. class="slider-internal-text"
  25. :style="{ left: isFollow && progressWidth < 86 ? `calc(${progressWidth}% + 10px)` : 'auto', color: followColor }"
  26. >{{ showValue ? internalValue : max }}<sup class="slider-internal-text-suffix">{{ suffix }}</sup>
  27. </span
  28. > -->
  29. <span v-else class="slider-max-text" :style="{ color: maxColor }">{{ max }}</span>
  30. </div>
  31. </div>
  32. </template>
  33. <script setup>
  34. import { computed, defineModel, defineProps, onMounted, ref, useTemplateRef, watch } from "vue"
  35. const emit = defineEmits(["onEnd", "onStart"])
  36. const props = defineProps({
  37. min: {
  38. type: Number,
  39. default: 0
  40. },
  41. max: {
  42. type: Number,
  43. default: 100
  44. },
  45. isFollow: {
  46. type: Boolean,
  47. default: false
  48. },
  49. suffixNormal: {
  50. type: Boolean,
  51. default: false
  52. },
  53. suffix: {
  54. type: String,
  55. default: ""
  56. },
  57. showValue: {
  58. type: Boolean,
  59. default: false
  60. }
  61. })
  62. const model = defineModel()
  63. watch(
  64. () => model.value,
  65. newValue => {
  66. if (newValue) {
  67. internalValue.value = newValue
  68. }
  69. }
  70. )
  71. const internalValue = ref(model.value || props.min)
  72. const isDragging = ref(false)
  73. let animationFrameId = null
  74. const sliderContainer = useTemplateRef("slider-container")
  75. const progressWidth = computed(() => {
  76. const percentage = ((internalValue.value - props.min) / (props.max - props.min)) * 100
  77. return `${Math.max(percentage, 10)}`
  78. })
  79. // const computedTrackBackground = computed(() => {
  80. // const percentage = ((internalValue.value - props.min) / (props.max - props.min)) * 100
  81. // return `linear-gradient(to right, #ff4d4f ${percentage}%, #e0e0e0 ${percentage}%)`
  82. // })
  83. const followColor = computed(() => {
  84. const percentage = ((internalValue.value - props.min) / (props.max - props.min)) * 100
  85. return percentage >= 95 ? "rgba(255, 255, 255, 0.6)" : "var(--Blue, #001428)"
  86. })
  87. const maxColor = computed(() => {
  88. const percentage = ((internalValue.value - props.min) / (props.max - props.min)) * 100
  89. return percentage >= 95 ? "rgba(255, 255, 255, 0.6)" : "rgb(116, 128, 141)"
  90. })
  91. const startDrag = event => {
  92. isDragging.value = true
  93. emit("onStart", internalValue.value)
  94. }
  95. const onDrag = event => {
  96. if (!isDragging.value) return
  97. const touch = event.touches[0]
  98. const sliderRect = sliderContainer.value.getBoundingClientRect()
  99. const offsetX = touch.clientX - sliderRect.left + 16
  100. // console.log(touch, sliderRect, offsetX)
  101. // 计算百分比并确保在 0 到 1 之间
  102. const percentage = Math.min(Math.max(offsetX / sliderRect.width, 0), 1)
  103. const newValue = Math.round(percentage * (props.max - props.min) + props.min)
  104. // 更新 internalValue
  105. if (animationFrameId) {
  106. cancelAnimationFrame(animationFrameId)
  107. }
  108. animationFrameId = requestAnimationFrame(() => {
  109. model.value = internalValue.value = newValue
  110. // emit('update:modelValue', internalValue.value) // 确保使用正确的事件名称
  111. })
  112. }
  113. const endDrag = () => {
  114. isDragging.value = false
  115. if (animationFrameId) {
  116. cancelAnimationFrame(animationFrameId)
  117. }
  118. emit("onEnd")
  119. }
  120. onMounted(() => {
  121. // 这里可以添加初始化逻辑
  122. })
  123. </script>
  124. <style scoped lang="scss">
  125. @mixin text-middle($left: auto, $right: auto) {
  126. position: absolute;
  127. top: 50%;
  128. left: $left;
  129. right: $right;
  130. transform: translate(0, -50%);
  131. font-size: 11px;
  132. z-index: 6;
  133. color: rgba(255, 255, 255, 0.6);
  134. pointer-events: none;
  135. }
  136. .slider {
  137. &-container {
  138. position: relative;
  139. box-sizing: border-box;
  140. width: 100%;
  141. height: 100%;
  142. border-radius: 12px;
  143. background: rgba(255, 255, 255, 0.6);
  144. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  145. }
  146. &-track {
  147. position: absolute;
  148. box-sizing: border-box;
  149. width: calc(100% - 4px);
  150. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  151. /* padding: 2px; */
  152. height: 100%; /* 设置轨道高度为 20px */
  153. border-radius: 10px; /* 圆角 */
  154. top: 50%;
  155. transform: translateY(-50%);
  156. z-index: 1;
  157. }
  158. &-progress {
  159. display: flex;
  160. align-items: center;
  161. color: rgba(255, 255, 255, 0.6);
  162. padding: 0 6px;
  163. font-size: 11px;
  164. position: absolute;
  165. background: linear-gradient(95.5deg, #99282b 21.44%, #a95459 84.95%);
  166. left: 2px;
  167. top: 50%;
  168. transform: translateY(-50%);
  169. z-index: 1;
  170. min-width: 4px;
  171. height: calc(100% - 4px);
  172. border-radius: 10px;
  173. position: relative;
  174. min-width: 30px;
  175. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  176. &-line {
  177. position: absolute;
  178. height: 12px;
  179. width: 2px;
  180. background: rgba(255, 255, 255, 0.8);
  181. position: absolute;
  182. right: 6px;
  183. transform: translate(-50%, 0);
  184. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  185. }
  186. }
  187. &-internalValue-text {
  188. @include text-middle(6px, auto);
  189. font-family: Jost;
  190. }
  191. &-max-text {
  192. @include text-middle(auto, 10px);
  193. color: rgb(116, 128, 141);
  194. font-family: Jost;
  195. }
  196. &-internal-text {
  197. @include text-middle(auto, 10px);
  198. color: #001428;
  199. font-family: Jost;
  200. font-size: 20px;
  201. font-style: normal;
  202. font-weight: 300;
  203. &-suffix {
  204. font-size: 11px;
  205. font-weight: 400;
  206. line-height: 15px;
  207. }
  208. }
  209. }
  210. </style>