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; } } `;