feat(slider): 初步集成 slider 滑块组件

src/index.ts

@@ -54,6 +54,7 @@ import LayTable from './module/table/index'
 import LayPage from './module/page/index'
 import LayTransfer from './module/transfer/index'
 import LayCheckboxGroup from './module/checkboxGroup/index'
+import LaySlider from './module/slider/index'
 
 const components: Record<string, IDefineComponent> = {
   LayRadio,
@@ -107,7 +108,8 @@ const components: Record<string, IDefineComponent> = {
   LayTable,
   LayPage,
   LayTransfer,
-  LayCheckboxGroup
+  LayCheckboxGroup,
+  LaySlider
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -175,6 +177,7 @@ export {
   LayPage,
   LayTransfer,
   LayCheckboxGroup,
+  LaySlider,
   install,
 }
 

src/module/slider/index.ts

@@ -0,0 +1,9 @@
+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)
+}
+
+export default Component as IDefineComponent

src/module/slider/index.vue

@@ -0,0 +1,38 @@
+<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-wrap" style="bottom: 0%">
+      <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>
+  </div>
+</template>
+
+<script setup name="LaySlider" lang="ts">
+import { defineProps } from 'vue'
+
+const props =
+  defineProps<{
+    vertical?: boolean
+  }>()
+</script>