theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

slider组件

Browse Source
This commit is contained in:
wang 2021-12-15 21:24:40 +08:00
parent e11a8d41e0
commit 81afabf411
4 changed files with 123 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
example/docs/zh-CN/components/slider.md
View File

@ -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
}
}
}

19
package.json
View File

@ -28,27 +28,28 @@
"author": "就眠儀式",
"license": "MIT",
"peerDependencies": {
"vue": "^3.2.24",
"vue-router": "^4.0.12",
"@layui/layer-vue": "^1.1.7",
"@layui/hooks-vue": "^0.1.6",
"@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",
"vue-router": "^4.0.12",
"@layui/layer-vue": "^1.1.7",
"@layui/hooks-vue": "^0.1.6",
"@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",

34
src/module/slider/index.less Normal file
View File

@ -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);
}

101
src/module/slider/index.vue
View File

@ -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
class="layui-slider-bar"
style="background: #009688; height: 0%; bottom: 0"
></div>
<div class="layui-slider-bar" style="background: #009688; height: 0%; bottom: 0"></div>
<div class="layui-slider-wrap" style="bottom: 0%">
<div
class="layui-slider-wrap-btn"
style="border: 2px solid #009688"
></div>
<div class="layui-slider-wrap-btn" style="border: 2px solid #009688"></div>
</div>
</div>
<div class="layui-slider" v-else>
<div class="layui-slider-tips"></div>
<div
class="layui-slider-bar"
style="background: #009688; width: 0%; left: 0"
></div>
<div class="layui-slider-wrap" style="left: 0%">
<div
class="layui-slider-wrap-btn"
style="border: 2px solid #009688"
></div>
<div class="layui-slider-v" v-else>
<div ref="tracker" @mousedown.stop="handle_mousedown" class="layui-slider-track-v">
<lay-tooltip :content="modelValue + ''">
<div :style="{ left: modelValue + '%' }" class="layui-slider-btn-v"></div>
</lay-tooltip>
<div :style="{ width: modelValue + '%' }" class="layui-slider-rate-v"></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">
import { defineProps } from 'vue'
const emit = defineEmits(["update:modelValue"]);
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>