---初始化后台管理web页面项目

src/components/Slider/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import slider from './src/Slider.vue';
+
+export const Slider = withInstall(slider);

src/components/Slider/src/Slider.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :style="style">
+    <a-slider
+      v-model:value="value"
+      :min="min"
+      :max="max"
+      :step="step"
+      :reverse="reverse"
+      :disabled="disabled"
+      @change="handleChange"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+
+  const props = defineProps({
+    value: {
+      type: [Number, String],
+      default: 0,
+    },
+    min: Number,
+    max: Number,
+    step: Number,
+    reverse: Boolean,
+    disabled: Boolean,
+    style: Object,
+  });
+
+  const value = ref(0);
+  const emit = defineEmits(['update:value', 'change']);
+  watch(
+    () => props.value,
+    (val) => {
+      value.value = Number(val);
+    },
+    {
+      immediate: true,
+    },
+  );
+  const handleChange = (val) => {
+    emit('update:value', val);
+    emit('change');
+    value.value = props.value === undefined ? val : props.value;
+  };
+</script>