first

node_modules/vant/lib/slider/index.css

@@ -0,0 +1 @@
+.van-slider{position:relative;width:100%;height:2px;background-color:#ebedf0;border-radius:999px;cursor:pointer}.van-slider::before{position:absolute;top:-8px;right:0;bottom:-8px;left:0;content:''}.van-slider__bar{position:relative;width:100%;height:100%;background-color:#1989fa;border-radius:inherit;-webkit-transition:all .2s;transition:all .2s}.van-slider__button{width:24px;height:24px;background-color:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.5)}.van-slider__button-wrapper,.van-slider__button-wrapper-right{position:absolute;top:50%;right:0;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0);cursor:grab}.van-slider__button-wrapper-left{position:absolute;top:50%;left:0;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);cursor:grab}.van-slider--disabled{cursor:not-allowed;opacity:.5}.van-slider--disabled .van-slider__button-wrapper,.van-slider--disabled .van-slider__button-wrapper-left,.van-slider--disabled .van-slider__button-wrapper-right{cursor:not-allowed}.van-slider--vertical{display:inline-block;width:2px;height:100%}.van-slider--vertical .van-slider__button-wrapper,.van-slider--vertical .van-slider__button-wrapper-right{top:auto;right:50%;bottom:0;-webkit-transform:translate3d(50%,50%,0);transform:translate3d(50%,50%,0)}.van-slider--vertical .van-slider__button-wrapper-left{top:0;right:50%;left:auto;-webkit-transform:translate3d(50%,-50%,0);transform:translate3d(50%,-50%,0)}.van-slider--vertical::before{top:0;right:-8px;bottom:0;left:-8px}

node_modules/vant/lib/slider/index.js

@@ -0,0 +1,326 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _utils = require("../utils");
+
+var _deepClone = require("../utils/deep-clone");
+
+var _event = require("../utils/dom/event");
+
+var _number = require("../utils/format/number");
+
+var _touch = require("../mixins/touch");
+
+var _field = require("../mixins/field");
+
+var _createNamespace = (0, _utils.createNamespace)('slider'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+var isSameValue = function isSameValue(newValue, oldValue) {
+  return JSON.stringify(newValue) === JSON.stringify(oldValue);
+};
+
+var _default = createComponent({
+  mixins: [_touch.TouchMixin, _field.FieldMixin],
+  props: {
+    disabled: Boolean,
+    vertical: Boolean,
+    range: Boolean,
+    barHeight: [Number, String],
+    buttonSize: [Number, String],
+    activeColor: String,
+    inactiveColor: String,
+    min: {
+      type: [Number, String],
+      default: 0
+    },
+    max: {
+      type: [Number, String],
+      default: 100
+    },
+    step: {
+      type: [Number, String],
+      default: 1
+    },
+    value: {
+      type: [Number, Array],
+      default: 0
+    }
+  },
+  data: function data() {
+    return {
+      dragStatus: ''
+    };
+  },
+  computed: {
+    scope: function scope() {
+      return this.max - this.min;
+    },
+    buttonStyle: function buttonStyle() {
+      if (this.buttonSize) {
+        var size = (0, _utils.addUnit)(this.buttonSize);
+        return {
+          width: size,
+          height: size
+        };
+      }
+    }
+  },
+  created: function created() {
+    // format initial value
+    this.updateValue(this.value);
+  },
+  mounted: function mounted() {
+    if (this.range) {
+      this.bindTouchEvent(this.$refs.wrapper0);
+      this.bindTouchEvent(this.$refs.wrapper1);
+    } else {
+      this.bindTouchEvent(this.$refs.wrapper);
+    }
+  },
+  methods: {
+    onTouchStart: function onTouchStart(event) {
+      if (this.disabled) {
+        return;
+      }
+
+      this.touchStart(event);
+      this.currentValue = this.value;
+
+      if (this.range) {
+        this.startValue = this.value.map(this.format);
+      } else {
+        this.startValue = this.format(this.value);
+      }
+
+      this.dragStatus = 'start';
+    },
+    onTouchMove: function onTouchMove(event) {
+      if (this.disabled) {
+        return;
+      }
+
+      if (this.dragStatus === 'start') {
+        this.$emit('drag-start');
+      }
+
+      (0, _event.preventDefault)(event, true);
+      this.touchMove(event);
+      this.dragStatus = 'draging';
+      var rect = this.$el.getBoundingClientRect();
+      var delta = this.vertical ? this.deltaY : this.deltaX;
+      var total = this.vertical ? rect.height : rect.width;
+      var diff = delta / total * this.scope;
+
+      if (this.range) {
+        this.currentValue[this.index] = this.startValue[this.index] + diff;
+      } else {
+        this.currentValue = this.startValue + diff;
+      }
+
+      this.updateValue(this.currentValue);
+    },
+    onTouchEnd: function onTouchEnd() {
+      if (this.disabled) {
+        return;
+      }
+
+      if (this.dragStatus === 'draging') {
+        this.updateValue(this.currentValue, true);
+        this.$emit('drag-end');
+      }
+
+      this.dragStatus = '';
+    },
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      if (this.disabled) return;
+      var rect = this.$el.getBoundingClientRect();
+      var delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
+      var total = this.vertical ? rect.height : rect.width;
+      var value = +this.min + delta / total * this.scope;
+
+      if (this.range) {
+        var _this$value = this.value,
+            left = _this$value[0],
+            right = _this$value[1];
+        var middle = (left + right) / 2;
+
+        if (value <= middle) {
+          left = value;
+        } else {
+          right = value;
+        }
+
+        value = [left, right];
+      }
+
+      this.startValue = this.value;
+      this.updateValue(value, true);
+    },
+    // 处理两个滑块重叠之后的情况
+    handleOverlap: function handleOverlap(value) {
+      if (value[0] > value[1]) {
+        value = (0, _deepClone.deepClone)(value);
+        return value.reverse();
+      }
+
+      return value;
+    },
+    updateValue: function updateValue(value, end) {
+      if (this.range) {
+        value = this.handleOverlap(value).map(this.format);
+      } else {
+        value = this.format(value);
+      }
+
+      if (!isSameValue(value, this.value)) {
+        this.$emit('input', value);
+      }
+
+      if (end && !isSameValue(value, this.startValue)) {
+        this.$emit('change', value);
+      }
+    },
+    format: function format(value) {
+      var min = +this.min;
+      var max = +this.max;
+      var step = +this.step;
+      value = (0, _number.range)(value, min, max);
+      var diff = Math.round((value - min) / step) * step;
+      return (0, _number.addNumber)(min, diff);
+    }
+  },
+  render: function render() {
+    var _wrapperStyle,
+        _this = this,
+        _barStyle;
+
+    var h = arguments[0];
+    var vertical = this.vertical;
+    var mainAxis = vertical ? 'height' : 'width';
+    var crossAxis = vertical ? 'width' : 'height';
+    var wrapperStyle = (_wrapperStyle = {
+      background: this.inactiveColor
+    }, _wrapperStyle[crossAxis] = (0, _utils.addUnit)(this.barHeight), _wrapperStyle); // 计算选中条的长度百分比
+
+    var calcMainAxis = function calcMainAxis() {
+      var value = _this.value,
+          min = _this.min,
+          range = _this.range,
+          scope = _this.scope;
+
+      if (range) {
+        return (value[1] - value[0]) * 100 / scope + "%";
+      }
+
+      return (value - min) * 100 / scope + "%";
+    }; // 计算选中条的开始位置的偏移量
+
+
+    var calcOffset = function calcOffset() {
+      var value = _this.value,
+          min = _this.min,
+          range = _this.range,
+          scope = _this.scope;
+
+      if (range) {
+        return (value[0] - min) * 100 / scope + "%";
+      }
+
+      return null;
+    };
+
+    var barStyle = (_barStyle = {}, _barStyle[mainAxis] = calcMainAxis(), _barStyle.left = this.vertical ? null : calcOffset(), _barStyle.top = this.vertical ? calcOffset() : null, _barStyle.background = this.activeColor, _barStyle);
+
+    if (this.dragStatus) {
+      barStyle.transition = 'none';
+    }
+
+    var renderButton = function renderButton(i) {
+      var map = ['left', 'right'];
+      var isNumber = typeof i === 'number';
+      var current = isNumber ? _this.value[i] : _this.value;
+
+      var getClassName = function getClassName() {
+        if (isNumber) {
+          return "button-wrapper-" + map[i];
+        }
+
+        return "button-wrapper";
+      };
+
+      var getRefName = function getRefName() {
+        if (isNumber) {
+          return "wrapper" + i;
+        }
+
+        return "wrapper";
+      };
+
+      var renderButtonContent = function renderButtonContent() {
+        if (isNumber) {
+          var slot = _this.slots(i === 0 ? 'left-button' : 'right-button', {
+            value: current
+          });
+
+          if (slot) {
+            return slot;
+          }
+        }
+
+        if (_this.slots('button')) {
+          return _this.slots('button');
+        }
+
+        return h("div", {
+          "class": bem('button'),
+          "style": _this.buttonStyle
+        });
+      };
+
+      return h("div", {
+        "ref": getRefName(),
+        "attrs": {
+          "role": "slider",
+          "tabindex": _this.disabled ? -1 : 0,
+          "aria-valuemin": _this.min,
+          "aria-valuenow": _this.value,
+          "aria-valuemax": _this.max,
+          "aria-orientation": _this.vertical ? 'vertical' : 'horizontal'
+        },
+        "class": bem(getClassName()),
+        "on": {
+          "touchstart": function touchstart() {
+            if (isNumber) {
+              // 保存当前按钮的索引
+              _this.index = i;
+            }
+          },
+          "click": function click(e) {
+            return e.stopPropagation();
+          }
+        }
+      }, [renderButtonContent()]);
+    };
+
+    return h("div", {
+      "style": wrapperStyle,
+      "class": bem({
+        disabled: this.disabled,
+        vertical: vertical
+      }),
+      "on": {
+        "click": this.onClick
+      }
+    }, [h("div", {
+      "class": bem('bar'),
+      "style": barStyle
+    }, [this.range ? [renderButton(0), renderButton(1)] : renderButton()])]);
+  }
+});
+
+exports.default = _default;

node_modules/vant/lib/slider/index.less

@@ -0,0 +1,94 @@
+@import '../style/var';
+
+.van-slider {
+  position: relative;
+  width: 100%;
+  height: @slider-bar-height;
+  background-color: @slider-inactive-background-color;
+  border-radius: @border-radius-max;
+  cursor: pointer;
+
+  // use pseudo element to expand click area
+  &::before {
+    position: absolute;
+    top: -@padding-xs;
+    right: 0;
+    bottom: -@padding-xs;
+    left: 0;
+    content: '';
+  }
+
+  &__bar {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: @slider-active-background-color;
+    border-radius: inherit;
+    transition: all @animation-duration-fast;
+  }
+
+  &__button {
+    width: @slider-button-width;
+    height: @slider-button-height;
+    background-color: @slider-button-background-color;
+    border-radius: @slider-button-border-radius;
+    box-shadow: @slider-button-box-shadow;
+
+    &-wrapper,
+    &-wrapper-right {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate3d(50%, -50%, 0);
+      cursor: grab;
+    }
+
+    &-wrapper-left {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translate3d(-50%, -50%, 0);
+      cursor: grab;
+    }
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: @slider-disabled-opacity;
+
+    .van-slider__button-wrapper,
+    .van-slider__button-wrapper-left,
+    .van-slider__button-wrapper-right {
+      cursor: not-allowed;
+    }
+  }
+
+  &--vertical {
+    display: inline-block;
+    width: @slider-bar-height;
+    height: 100%;
+
+    .van-slider__button-wrapper,
+    .van-slider__button-wrapper-right {
+      top: auto;
+      right: 50%;
+      bottom: 0;
+      transform: translate3d(50%, 50%, 0);
+    }
+
+    .van-slider__button-wrapper-left {
+      top: 0;
+      right: 50%;
+      left: auto;
+      transform: translate3d(50%, -50%, 0);
+    }
+
+    // use pseudo element to expand click area
+    &::before {
+      top: 0;
+      right: -@padding-xs;
+      bottom: 0;
+      left: -@padding-xs;
+    }
+  }
+}

node_modules/vant/lib/slider/style/index.js

@@ -0,0 +1,2 @@
+require('../../style/base.css');
+require('../index.css');

node_modules/vant/lib/slider/style/less.js

@@ -0,0 +1,2 @@
+require('../../style/base.less');
+require('../index.less');