feat: 添加滑块示例

locales/en.yaml

@@ -92,6 +92,7 @@ menus:
   pureDraggable: Draggable
   pureSplitPane: Split Pane
   pureText: Text Ellipsis
+  pureSlider: Slider
   pureElButton: Button
   pureButton: Button Animation
   pureCheckButton: Check Button

locales/zh-CN.yaml

@@ -92,6 +92,7 @@ menus:
   pureDraggable: 拖拽
   pureSplitPane: 切割面板
   pureText: 文本省略
+  pureSlider: 滑块
   pureElButton: 按钮
   pureCheckButton: 可选按钮
   pureButton: 按钮动效

src/components/ReText/src/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { h, onMounted, ref, useSlots } from "vue";
 import { type TippyOptions, useTippy } from "vue-tippy";
 

src/layout/components/lay-footer/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { getConfig } from "@/config";
 
 const TITLE = getConfig("Title");

src/router/modules/components.ts

@@ -47,8 +47,7 @@ export default {
       name: "CheckCard",
       component: () => import("@/views/components/check-card.vue"),
       meta: {
-        title: $t("menus.pureCheckCard"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureCheckCard")
       }
     },
     {
@@ -112,7 +111,15 @@ export default {
       name: "PureText",
       component: () => import("@/views/components/text.vue"),
       meta: {
-        title: $t("menus.pureText"),
+        title: $t("menus.pureText")
+      }
+    },
+    {
+      path: "/components/slider",
+      name: "PureSlider",
+      component: () => import("@/views/components/slider/index.vue"),
+      meta: {
+        title: $t("menus.pureSlider"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
     },
@@ -129,8 +136,7 @@ export default {
       name: "CheckButton",
       component: () => import("@/views/components/check-button.vue"),
       meta: {
-        title: $t("menus.pureCheckButton"),
-        extraIcon: "IF-pure-iconfont-new svg"
+        title: $t("menus.pureCheckButton")
       }
     },
     {

src/views/components/slider/components/Base.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value1 = ref(0);
+const value2 = ref(10);
+const value3 = ref(0);
+const value4 = ref(0);
+const value5 = ref(0);
+
+const formatTooltip = (val: number) => {
+  return val / 100;
+};
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <span class="demonstration">默认值</span>
+    <el-slider v-model="value1" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">自定义初始值</span>
+    <el-slider v-model="value2" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">隐藏 Tooltip 提示</span>
+    <el-slider v-model="value3" :show-tooltip="false" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">格式化 Tooltip 提示</span>
+    <el-slider v-model="value4" :format-tooltip="formatTooltip" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">禁用</span>
+    <el-slider v-model="value5" disabled />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+
+.slider-demo-block .demonstration {
+  flex: 1;
+  margin-bottom: 0;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 44px;
+  color: var(--el-text-color-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slider-demo-block .demonstration + .el-slider {
+  flex: 0 0 70%;
+}
+</style>

src/views/components/slider/components/Input.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref(0);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <el-slider v-model="value" show-input />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/Marks.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import type { CSSProperties } from "vue";
+
+interface Mark {
+  style: CSSProperties;
+  label: string;
+}
+
+type Marks = Record<number, Mark | string>;
+
+const value = ref([30, 60]);
+const marks = reactive<Marks>({
+  0: "0°C",
+  8: "8°C",
+  37: "37°C",
+  50: {
+    style: {
+      color: "#1989FA"
+    },
+    label: "50%"
+  }
+});
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <el-slider v-model="value" range :marks="marks" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/Placement.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value1 = ref(0);
+const value2 = ref(0);
+const value3 = ref(0);
+const value4 = ref(0);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <span class="mr-2">上</span>
+    <el-slider v-model="value1" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="mr-2">下</span>
+    <el-slider v-model="value2" placement="bottom" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="mr-2">左</span>
+    <el-slider v-model="value4" placement="left" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="mr-2">右</span>
+    <el-slider v-model="value3" placement="right" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/Range.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref([4, 8]);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <el-slider v-model="value" range show-stops :max="10" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/Size.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref(0);
+</script>
+
+<template>
+  <div class="max-w-[600px] ml-4">
+    <el-slider v-model="value" show-input size="large" />
+    <el-slider v-model="value" show-input />
+    <el-slider v-model="value" show-input size="small" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-slider {
+  margin-top: 20px;
+}
+
+.el-slider:first-child {
+  margin-top: 0;
+}
+</style>

src/views/components/slider/components/Step.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value1 = ref(0);
+const value2 = ref(0);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <span class="demonstration">不显示断点</span>
+    <el-slider v-model="value1" :step="10" />
+  </div>
+  <div class="slider-demo-block">
+    <span class="demonstration">显示断点</span>
+    <el-slider v-model="value2" :step="10" show-stops />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+
+.slider-demo-block .demonstration {
+  flex: 1;
+  margin-bottom: 0;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 44px;
+  color: var(--el-text-color-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slider-demo-block .demonstration + .el-slider {
+  flex: 0 0 70%;
+}
+</style>

src/views/components/slider/components/Vertical.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const value = ref(0);
+</script>
+
+<template>
+  <div class="slider-demo-block">
+    <el-slider v-model="value" vertical height="200px" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-demo-block {
+  display: flex;
+  align-items: center;
+  max-width: 600px;
+}
+
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+</style>

src/views/components/slider/components/index.ts

@@ -0,0 +1,8 @@
+export { default as Base } from "./Base.vue";
+export { default as Step } from "./Step.vue";
+export { default as Size } from "./Size.vue";
+export { default as Input } from "./Input.vue";
+export { default as Range } from "./Range.vue";
+export { default as Marks } from "./Marks.vue";
+export { default as Vertical } from "./Vertical.vue";
+export { default as Placement } from "./Placement.vue";