import { css } from "@linaria/core";
import { InputNumber, Slider } from "ant-design-vue";
import { defineComponent, reactive, watchEffect } from "vue";
import { bool, number } from "vue-types";
export default defineComponent({
props: {
defaultValue: number().def(0),
disabled: bool().def(false),
value: number(),
min: number(),
max: number(),
step: number(),
},
emits: ["change"],
setup(props, { emit }) {
const state = reactive({
value: props.value,
});
const changeVal = () => {
if (state.value == props.value) return;
emit("change", state.value);
};
watchEffect(() => {
if (props.value != undefined) {
state.value = props.value;
}
});
return () => {
const { defaultValue, disabled, min, max, step } = props;
const attr = {
defaultValue,
disabled: disabled,
value: state.value,
min,
max,
step,
onChange: (value: any) => {
state.value = value;
changeVal();
},
};
return (
changeVal()}
/>
changeVal()}
// onBlur={() => {
// if (state.value !== props.value) changeVal();
// }}
/>
);
};
},
});
const SliderView = css`
flex: 1;
display: flex;
align-items: center;
justify-content: center;
.item_slider {
flex: 1;
}
/* slider style */
.ant-slider-disabled {
opacity: 0.7;
}
.ant-slider-step {
background-color: rgba(255, 255, 255, 0.27);
}
.ant-slider-track {
border-radius: 4px;
background-color: rgba(255, 255, 255, 1);
}
.ant-slider:not(.ant-slider-disabled):hover {
.ant-slider-handle {
background-color: @inf-primary-color;
&:not(.ant-tooltip-open) {
border-color: #fff;
}
}
}
.ant-slider {
&.ant-slider-disabled {
.ant-slider-handle {
background-color: #bbb;
opacity: 0.8;
}
}
}
.ant-slider-handle {
width: 8px;
border-radius: 2px;
border-color: #fff;
background-color: #fff;
}
.ant-slider-handle-click-focused {
border-color: #fff;
background-color: @inf-primary-color;
}
/* input style */
.item_input {
width: 42px;
margin-left: 10px;
border: none;
padding: 2px 0;
text-align: center;
font-size: 12px;
background-color: rgba(252, 254, 255, 0.1);
.ant-input-number-handler-wrap {
display: none;
}
.ant-input-number-input {
height: auto;
padding: 0 2px;
text-align: center;
}
}
`;