queenshow/src/modules/editor/components/CompUI/formItems/Slider.tsx

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 (
        <div class={SliderView}>
          <Slider
            class="item_slider"
            tooltipVisible={false}
            {...attr}
            onAfterChange={() => changeVal()}
          />
          <InputNumber
            class="item_input"
            {...attr}
            onPressEnter={() => changeVal()}
            // onBlur={() => {
            //   if (state.value !== props.value) changeVal();
            // }}
          />
        </div>
      );
    };
  },
});
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;
    }
  }
`;