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

add alpha branch

Browse Source
This commit is contained in:
就眠儀式
2022-01-27 16:18:16 +08:00
parent 5c79b2b9ba
commit 5ea8b7bf7c
103 changed files with 577 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/component/slider/index.ts
View File

@@ -1,9 +1,8 @@
import type { App } from "vue";
import Component from "./index.vue";
import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => {
app.component(Component.name || "LaySlider", Component);
app.component(Component.name, Component);
};
export default Component as IDefineComponent;
export default Component;

209
src/component/slider/index.vue
View File

@@ -1,105 +1,9 @@
<template>
<div class="layui-slider-vertical" v-if="vertical">
<div
ref="rangetracker2"
@mousedown.stop="handle_mousedown"
class="layui-slider-vrange"
v-if="range"
>
<div
:style="{ bottom: verticalRangeValue[1] + '%' }"
class="layui-slider-vertical-btn"
></div>
<div
:style="{ bottom: verticalRangeValue[0] + '%' }"
class="layui-slider-vertical-btn"
></div>
<div class="layui-slider-vertical-line"></div>
<div
:style="{
height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
bottom: verticalRangeValue[0] + '%',
}"
class="layui-slider-vertical-rate"
></div>
</div>
<script lang="ts">
export default {
name: "LaySlider"
}
</script>
<div
ref="verticaltracker"
@mousedown.stop="handle_mousedown"
class="layui-slider-vertical-track"
:class="[props.disabled ? 'layui-slider-disabled' : '']"
v-else
>
<lay-tooltip :content="modelValue + ''">
<div
:style="{ bottom: modelValue + '%' }"
class="layui-slider-vertical-btn"
:class="[props.disabled ? 'layui-slider-disabled' : '']"
></div>
</lay-tooltip>
<div
:style="{ height: modelValue + '%' }"
class="layui-slider-vertical-rate"
:class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
></div>
<div class="layui-slider-vertical-line"></div>
</div>
</div>
<div class="layui-slider-v" v-else>
<div
@mousedown.stop="handle_mousedown"
ref="rangetracker1"
class="layui-slider-srange"
v-if="range"
>
<lay-tooltip :content="rangeValue[0] + ''">
<div
:style="{ left: rangeValue[0] + '%' }"
class="layui-slider-btn-v"
></div>
</lay-tooltip>
<lay-tooltip :content="rangeValue[1]">
<div
:style="{ left: rangeValue[1] + '%' }"
class="layui-slider-btn-v"
></div>
</lay-tooltip>
<div class="layui-slider-line-v"></div>
<div
:style="{
width: rangeValue[1] - rangeValue[0] + '%',
left: rangeValue[0] + '%',
}"
class="layui-slider-rate-v"
></div>
</div>
<div
ref="standardtracker"
@mousedown.stop="handle_mousedown"
class="layui-slider-track-v"
:class="[props.disabled ? 'layui-slider-disabled' : '']"
v-else
>
<lay-tooltip :content="modelValue + ''">
<div
:style="{ left: modelValue + '%' }"
class="layui-slider-btn-v"
:class="[props.disabled ? 'layui-slider-disabled' : '']"
></div>
</lay-tooltip>
<div
:style="{ width: modelValue + '%' }"
class="layui-slider-rate-v"
:class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
></div>
<div class="layui-slider-line-v"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps, reactive, Ref, ref, toRef } from "vue";
import { on, off } from "evtd";
@@ -303,3 +207,106 @@ function moveNeighbors(rate: number, rangeValues: any) {
}
}
</script>
<template>
<div class="layui-slider-vertical" v-if="vertical">
<div
ref="rangetracker2"
@mousedown.stop="handle_mousedown"
class="layui-slider-vrange"
v-if="range"
>
<div
:style="{ bottom: verticalRangeValue[1] + '%' }"
class="layui-slider-vertical-btn"
></div>
<div
:style="{ bottom: verticalRangeValue[0] + '%' }"
class="layui-slider-vertical-btn"
></div>
<div class="layui-slider-vertical-line"></div>
<div
:style="{
height: verticalRangeValue[1] - verticalRangeValue[0] + '%',
bottom: verticalRangeValue[0] + '%',
}"
class="layui-slider-vertical-rate"
></div>
</div>
<div
ref="verticaltracker"
@mousedown.stop="handle_mousedown"
class="layui-slider-vertical-track"
:class="[props.disabled ? 'layui-slider-disabled' : '']"
v-else
>
<lay-tooltip :content="modelValue + ''">
<div
:style="{ bottom: modelValue + '%' }"
class="layui-slider-vertical-btn"
:class="[props.disabled ? 'layui-slider-disabled' : '']"
></div>
</lay-tooltip>
<div
:style="{ height: modelValue + '%' }"
class="layui-slider-vertical-rate"
:class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
></div>
<div class="layui-slider-vertical-line"></div>
</div>
</div>
<div class="layui-slider-v" v-else>
<div
@mousedown.stop="handle_mousedown"
ref="rangetracker1"
class="layui-slider-srange"
v-if="range"
>
<lay-tooltip :content="rangeValue[0] + ''">
<div
:style="{ left: rangeValue[0] + '%' }"
class="layui-slider-btn-v"
></div>
</lay-tooltip>
<lay-tooltip :content="rangeValue[1]">
<div
:style="{ left: rangeValue[1] + '%' }"
class="layui-slider-btn-v"
></div>
</lay-tooltip>
<div class="layui-slider-line-v"></div>
<div
:style="{
width: rangeValue[1] - rangeValue[0] + '%',
left: rangeValue[0] + '%',
}"
class="layui-slider-rate-v"
></div>
</div>
<div
ref="standardtracker"
@mousedown.stop="handle_mousedown"
class="layui-slider-track-v"
:class="[props.disabled ? 'layui-slider-disabled' : '']"
v-else
>
<lay-tooltip :content="modelValue + ''">
<div
:style="{ left: modelValue + '%' }"
class="layui-slider-btn-v"
:class="[props.disabled ? 'layui-slider-disabled' : '']"
></div>
</lay-tooltip>
<div
:style="{ width: modelValue + '%' }"
class="layui-slider-rate-v"
:class="[props.disabled ? 'layui-slider-disabled-rate' : '']"
></div>
<div class="layui-slider-line-v"></div>
</div>
</div>
</template>