captain-ui/es/slider/src/main.js

有赞vue wap业务组件库

import draggable from '../../common/utils/draggable';
var DEFAULT_COLOR = '#07c160';
var INACTIVE_COLOR = '#cacaca';
var DEFAULT_LOADED_COLOR = '#fff';
var DEFAULT_PIVOT_OFFSET = '-8px';
var RECT_OFFSET_MAP = {
  X: 'left',
  Y: 'top'
};
var RECT_SIZE_MAP = {
  X: 'width',
  Y: 'height'
};
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-slider"
    }, [_c('div', {
      ref: "bar",
      staticClass: "cap-slider__bar",
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.onSliderClicked($event);
        }
      }
    }, [_vm.loadedValue ? _c('span', {
      staticClass: "cap-slider__loaded-portion",
      style: _vm.loadedStyle
    }) : _vm._e(), _c('span', {
      staticClass: "cap-slider__finished-portion",
      style: _vm.finishedStyle
    }), _c('span', {
      ref: "pivot",
      staticClass: "cap-slider__pivot",
      style: _vm.pivotStyle
    })])]);
  },
  name: 'cap-slider',
  props: {
    value: {
      type: Number,
      required: true,
      validator: function validator(value) {
        return value <= 100 && value >= 0;
      }
    },
    loadedStartValue: {
      type: Number,
      default: 0
    },
    loadedValue: {
      type: Number,
      validator: function validator(value) {
        return value <= 100 && value >= 0;
      }
    },
    inactive: Boolean,
    color: {
      type: String,
      default: DEFAULT_COLOR
    },
    inactiveColor: {
      type: String,
      default: INACTIVE_COLOR
    },
    finishedColor: {
      type: String,
      default: DEFAULT_COLOR
    },
    loadedColor: {
      type: String,
      default: DEFAULT_LOADED_COLOR
    },
    orientation: {
      type: String,
      default: 'X'
    },
    pivotOffset: {
      type: String,
      default: DEFAULT_PIVOT_OFFSET
    }
  },
  data: function data() {
    return {
      innerValue: 0
    };
  },
  computed: {
    sliderWidth: function sliderWidth() {
      var rect = this.$refs.bar.getBoundingClientRect();
      return rect[RECT_SIZE_MAP[this.orientation]];
    },
    componentColor: function componentColor() {
      return this.inactive ? this.inactiveColor : this.color;
    },
    loadedStyle: function loadedStyle() {
      return {
        backgroundColor: this.loadedColor,
        left: this.loadedStartValue + '%',
        width: this.loadedValue + '%'
      };
    },
    finishedStyle: function finishedStyle() {
      return {
        backgroundColor: this.finishedColor,
        width: this.innerValue + '%'
      };
    },
    pivotStyle: function pivotStyle() {
      var pivotStyle = {
        backgroundColor: this.componentColor,
        left: this.innerValue + '%',
        marginLeft: this.pivotOffset
      };
      return pivotStyle;
    }
  },
  watch: {
    value: function value(val) {
      if (this.isDragging) return;
      this.innerValue = val;
    }
  },
  created: function created() {
    this.innerValue = this.value;
  },
  mounted: function mounted() {
    this.initDragEvents();
  },
  methods: {
    initDragEvents: function initDragEvents() {
      var _this = this;

      var el = this.$refs.pivot;
      var startX;
      var startValue;
      draggable(el, {
        stopPropagation: true,
        start: function start(e) {
          if (_this.inactive) return;
          _this.isDragging = true;
          startX = e['client' + _this.orientation];
          startValue = _this.innerValue;
        },
        drag: function drag(e) {
          if (_this.isDragging) {
            var diff = (e['client' + _this.orientation] - startX) / _this.sliderWidth * 100;
            _this.newValue = startValue + diff;

            _this.updateValue(_this.newValue);
          }
        },
        end: function end(e) {
          if (_this.isDragging) {
            setTimeout(function () {
              _this.isDragging = false;

              _this.updateValue(_this.newValue, true);
            }, 0);
          }
        }
      });
    },
    onSliderClicked: function onSliderClicked(e) {
      if (this.inactive || this.isDragging) return;
      var sliderRect = this.$refs.bar.getBoundingClientRect();
      var sliderOffset = sliderRect[RECT_OFFSET_MAP[this.orientation]];
      this.updateValue((e['client' + this.orientation] - sliderOffset) / this.sliderWidth * 100, true);
    },
    updateValue: function updateValue(value, triggerEvent) {
      value = Math.max(0, Math.min(value, 100));
      this.innerValue = value;

      if (triggerEvent) {
        this.$emit('valueUpdate', value);
      }
    }
  }
};