You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.0 KiB
95 lines
2.0 KiB
7 months ago
|
<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>
|