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";

src/views/components/slider/index.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {
+  Base,
+  Step,
+  Input,
+  Size,
+  Placement,
+  Range,
+  Vertical,
+  Marks
+} from "./components";
+
+defineOptions({
+  name: "PureSlider"
+});
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <p class="font-medium">滑块</p>
+        <el-link
+          class="mt-2"
+          href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/components/slider/index.vue"
+          target="_blank"
+        >
+          代码位置 src/views/components/slider/index.vue
+        </el-link>
+      </div>
+    </template>
+    <p class="mb-2">基础用法</p>
+    <Base />
+    <el-divider />
+    <p class="mb-2">离散值</p>
+    <Step />
+    <el-divider />
+    <p class="mb-2">带有输入框的滑块</p>
+    <Input />
+    <el-divider />
+    <p class="mb-2">不同尺寸</p>
+    <Size />
+    <el-divider />
+    <p class="mb-2">位置</p>
+    <Placement />
+    <el-divider />
+    <p class="mb-2">范围选择</p>
+    <Range />
+    <el-divider />
+    <p class="mb-2">垂直模式</p>
+    <Vertical />
+    <el-divider />
+    <p class="mb-2">显示标记</p>
+    <Marks class="mb-6" />
+  </el-card>
+</template>

src/views/components/text.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import dayjs from "dayjs";
 import { ref } from "vue";
 import { ReText } from "@/components/ReText";

src/views/components/upload/form.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { reactive, ref } from "vue";
 import { formUpload } from "@/api/mock";
 import { message } from "@/utils/message";

src/views/table/virtual/list.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { VxeTableBar } from "@/components/ReVxeTableBar";
 

src/views/table/virtual/pageList.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref, reactive, computed } from "vue";
 import { VxeTableBar } from "@/components/ReVxeTableBar";
 

src/views/table/virtual/treeList.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import treeList from "./tree.json";
 import { VxeTableBar } from "@/components/ReVxeTableBar";

src/views/vue-flow/layouting/animationEdge.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, nextTick, ref, toRef, watch } from "vue";
 import { TransitionPresets, executeTransition } from "@vueuse/core";
 import {

src/views/vue-flow/layouting/icon.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps({
   name: {
     type: String,

src/views/vue-flow/layouting/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import "@vue-flow/core/dist/style.css";
 import "@vue-flow/core/dist/theme-default.css";
 import Icon from "./icon.vue";

src/views/vue-flow/layouting/processNode.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import { toRef } from "vue";
 import { Handle, useHandleConnections } from "@vue-flow/core";