push

lib/component/form/slider/slider.vue

@@ -0,0 +1,94 @@
+<template>
+  <a-row>
+    <a-col :span="16">
+      <a-slider
+        v-model:value="inputValue"
+        :min="min"
+        :max="max"
+        :marks="marks"
+        :tooltipVisible="tooltipVisible"
+        @change="changeValues"
+        :default-value="defaultValue"
+      />
+    </a-col>
+    <a-col :span="4" style="padding-left: 20px; padding-top: 4px">
+      <a-input-number v-model:value="inputValue" :min="min" :max="max" />
+    </a-col>
+  </a-row>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    name: 'NsSlider',
+    props: {
+      // 最小值
+      min: {
+        type: Number,
+        default: 0,
+      },
+      // 最大值
+      max: {
+        type: Number,
+        require: true,
+      },
+      // 默认值
+      defaultValue: {
+        type: Number,
+        default: () => {
+          // return this.min;
+        },
+      },
+      tooltipVisible: {
+        type: Boolean,
+        default: () => {
+          return false;
+        },
+      },
+    },
+    setup(props) {
+      console.log(props.max);
+      const { min, max, marks, defaultValue, tooltipVisible } = props;
+      let inputValue = ref(defaultValue);
+      // const sliderState = reactive({
+      //   value: 1,
+      //   defaultValue: 10,
+      // });
+      // const markerState = reactive({
+      //   marks: {
+      //     1: '1',
+      //     3: '3',
+      //     5: '5',
+      //     10: '10',
+      //     20: {
+      //       style: {
+      //         color: '#f50',
+      //       },
+      //       label: '100'
+      //     }
+      //   },
+      // });
+      const changeValues = function (value) {
+        inputValue.value = value;
+        // sliderState.value = value;
+      };
+
+      return {
+        // sliderState,
+        // markerState,
+        inputValue,
+        tooltipVisible,
+
+        min,
+        max,
+        marks,
+        defaultValue,
+        tooltipVisible,
+        changeValues,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped></style>