slider组件

example/docs/zh-CN/components/slider.md

@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-slider></lay-slider>
+  <lay-slider v-model="value"></lay-slider>
 </template>
 
 <script>
@@ -9,8 +9,9 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-
+    const value = ref(50)
     return {
+      value
     }
   }
 }

package.json

@@ -28,27 +28,28 @@
   "author": "就眠儀式",
   "license": "MIT",
   "peerDependencies": {
-    "vue": "^3.2.24",
+    "@layui/hooks-vue": "^0.1.6",
-    "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.7",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/hooks-vue": "^0.1.6"
+    "@layui/layer-vue": "^1.1.7",
+    "vue": "^3.2.24",
+    "vue-router": "^4.0.12"
   },
   "dependencies": {
-    "vue": "^3.2.24",
+    "@layui/hooks-vue": "^0.1.6",
-    "vue-router": "^4.0.12",
-    "@layui/layer-vue": "^1.1.7",
     "@layui/icons-vue": "^1.0.1",
-    "@layui/hooks-vue": "^0.1.6"
+    "@layui/layer-vue": "^1.1.7",
+    "evtd": "^0.2.3",
+    "vue": "^3.2.24",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-typescript": "^7.15.0",
     "@rollup/plugin-babel": "^5.3.0",
-    "@types/node": "^16.11.9",
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.4",
+    "@types/node": "^16.11.9",
     "@vitejs/plugin-vue": "^1.9.3",
     "@vue/compiler-sfc": "^3.2.24",
     "@vue/server-renderer": "^3.2.24",

src/module/slider/index.less

@@ -0,0 +1,34 @@
+.layui-slider-v {
+    width: 100%;
+    height: 50px;
+    /* background-color: palevioletred; */
+  }
+  
+  .layui-slider-track-v {
+    width: 100%;
+    height: 16px;
+    position: relative;
+    cursor: pointer;
+    z-index: 30;
+  }
+  
+  .layui-slider-btn-v {
+    width: 12px;
+    height: 12px;
+    background-color: white;
+    position: absolute;
+    // top: -7px;
+    border: 2px solid rgb(0, 150, 136);
+    border-radius: 50%;
+    cursor: pointer;
+    left: 0%;
+  }
+  
+  .layui-slider-rate-v {
+    width: 0%;
+    height: 4px;
+    position: absolute;
+    top: 6px;
+    left: 0;
+    background-color: rgb(0, 150, 136);
+  }

src/module/slider/index.vue

@@ -1,38 +1,89 @@
 <template>
   <div class="layui-slider layui-slider-vertical" style="height: 200px" v-if="vertical">
     <div class="layui-slider-tips"></div>
-    <div
+    <div class="layui-slider-bar" style="background: #009688; height: 0%; bottom: 0"></div>
-      class="layui-slider-bar"
-      style="background: #009688; height: 0%; bottom: 0"
-    ></div>
     <div class="layui-slider-wrap" style="bottom: 0%">
-      <div
+      <div class="layui-slider-wrap-btn" style="border: 2px solid #009688"></div>
-        class="layui-slider-wrap-btn"
-        style="border: 2px solid #009688"
-      ></div>
     </div>
   </div>
 
-  <div class="layui-slider" v-else>
+  <div class="layui-slider-v" v-else>
-    <div class="layui-slider-tips"></div>
+    <div ref="tracker" @mousedown.stop="handle_mousedown" class="layui-slider-track-v">
-    <div
+      <lay-tooltip :content="modelValue + ''">
-      class="layui-slider-bar"
+        <div :style="{ left: modelValue + '%' }" class="layui-slider-btn-v"></div>
-      style="background: #009688; width: 0%; left: 0"
+      </lay-tooltip>
-    ></div>
+
-    <div class="layui-slider-wrap" style="left: 0%">
+      <div :style="{ width: modelValue + '%' }" class="layui-slider-rate-v"></div>
-      <div
-        class="layui-slider-wrap-btn"
-        style="border: 2px solid #009688"
-      ></div>
     </div>
   </div>
 </template>
+<script setup lang="ts">
+import { defineProps, reactive, ref } from 'vue'
+import { on, off } from 'evtd'
+import './index.less'
 
-<script setup name="LaySlider" lang="ts">
+const emit = defineEmits(["update:modelValue"]);
-import { defineProps } from 'vue'
+
+interface LaySliderProps {
+  vertical?: boolean,
+  modelValue?: number,
+  min?: number,
+  max?: number,
+}
+
+const props = withDefaults(defineProps<LaySliderProps>(), {
+  vertical: false,
+  modelValue: 0,
+})
+
+const tracker = ref<HTMLElement | null>(null)
+const style = reactive({
+  left: props.modelValue,
+  width: props.modelValue
+})
+
+function handle_mousedown() {
+  on('selectstart', window, handle_select, { once: true })
+  on('mouseup', window, handle_mouseup)
+  on('mousemove', window, handle_mousemove)
+
+}
+
+function handle_mousemove(e: MouseEvent) {
+  if (!tracker.value) {
+    return
+  }
+  let tracker_rect = tracker.value.getBoundingClientRect()
+  let origin_left = tracker_rect.left
+  let point_left = e.clientX
+  let distance = point_left - origin_left
+  if (distance < 0) {
+    style.left = 0
+    style.width = 0
+    props.modelValue = 0
+  } else {
+    let rate = (distance / tracker_rect.width) * 100
+    style.left = Math.floor(rate)
+    style.width = Math.floor(rate)
+    props.modelValue = Math.floor(rate)
+    if (style.left > 100) {
+      style.left = 100
+      style.width = 100
+      props.modelValue = 100
+    }
+  }
+  emit('update:modelValue', style.left)
+}
+
+function handle_mouseup() {
+  // off('selectstart', document, handle_select)
+  off('mouseup', window, handle_mouseup)
+  off('mousemove', window, handle_mousemove)
+
+}
+
+function handle_select(e: Event): void {
+  e.preventDefault()
+}
 
-const props =
-  defineProps<{
-    vertical?: boolean
-  }>()
 </script>