notarization_applet/unpackage/dist/dev/mp-weixin/components/slider-range/index.js

"use strict";
const common_vendor = require("../../common/vendor.js");
const completeUnit = (val = 0, unit = "rpx") => {
  if (isNaN(Number(val)))
    return val;
  return val + unit;
};
const multiplication = (val1, val2) => {
  let dotIndex = String(val2).indexOf(".");
  if (dotIndex != -1) {
    let floatLength = String(val2).length - (dotIndex + 1);
    return val1 * (val2 * Math.pow(10, floatLength)) / Math.pow(10, floatLength);
  } else {
    return val1 * val2;
  }
};
const _sfc_main = {
  name: "slider-range",
  props: {
    value: {
      type: [Number, Array],
      default: () => []
    },
    valueType: {
      type: String,
      default: "max"
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    },
    height: {
      type: [Number, String],
      default: 12
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tips: {
      type: Boolean,
      default: true
    },
    scale: {
      type: [Boolean, Object],
      default: true
    },
    backgroundStyle: {
      type: Object,
      default: () => {
        return { width: "100%" };
      }
    },
    activeStyle: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      // 两个值
      firstValue: 0,
      secondValue: 0,
      // 两个滑点
      firstBlock: {
        show: true,
        zIndex: 1
      },
      secondBlock: {
        show: true,
        zIndex: 2
      },
      // 滑动中
      dragging: "",
      // 刻度线设置
      scaleInfo: {
        show: true,
        min: true,
        max: true,
        interval: "auto",
        color: "#333",
        tickColor: "#999",
        fontSize: 22,
        format: null
      },
      scaleLine: []
    };
  },
  computed: {
    getStep() {
      if (this.max - this.min < this.step)
        return this.max - this.min;
      return this.step;
    },
    // 滑点坐标
    getFirstBlockPosition() {
      return (this.firstValue - this.min) / (this.max - this.min) * 100 + "%";
    },
    getSecondBlockPosition() {
      return (this.secondValue - this.min) / (this.max - this.min) * 100 + "%";
    },
    // 背景条样式
    getBackgroundStyle() {
      return {
        ...this.backgroundStyle,
        height: completeUnit(this.height)
      };
    },
    // 选中条样式
    getActiveStyle() {
      let min = Math.min(this.firstValue, this.secondValue);
      let max = Math.max(this.firstValue, this.secondValue);
      return {
        ...this.activeStyle,
        left: (min - this.min) / (this.max - this.min) * 100 + "%",
        width: (max - min) / (this.max - this.min) * 100 + "%"
      };
    }
  },
  mounted() {
    this.create();
  },
  methods: {
    create() {
      if (this.max <= this.min) {
        throw "[slider-range] max 属性不应小于或等于 min 属性";
      }
      if (typeof this.value == "number") {
        let value = this.value;
        if (this.value > this.max)
          value = this.max;
        if (this.value < this.min)
          value = this.min;
        if (this.valueType == "max") {
          this.firstBlock.show = false;
          this.firstValue = this.min;
          this.secondValue = value;
        } else {
          this.secondBlock.show = false;
          this.secondValue = this.max;
          this.firstValue = value;
        }
      } else {
        let firstValue = this.value[0] || this.min;
        if (firstValue > this.max)
          firstValue = this.max;
        if (firstValue < this.min)
          firstValue = this.min;
        let secondValue = this.value[1] || this.max;
        if (secondValue > this.max)
          secondValue = this.max;
        if (secondValue < this.min)
          secondValue = this.min;
        this.firstValue = firstValue;
        this.secondValue = secondValue;
        this.firstBlock.show = true;
        this.secondBlock.show = true;
      }
      if (typeof this.scale != "object") {
        this.scaleInfo.show = !!this.scale;
      } else {
        this.scaleInfo = { ...this.scaleInfo, ...this.scale };
      }
      if (!this.scaleInfo.show)
        return;
      let interval = this.scaleInfo.interval;
      let step = this.getStep > 0 ? this.getStep : 1;
      if (typeof interval != "number") {
        interval = Math.ceil((this.max - this.min) / step / 10);
      } else {
        interval = interval + 1;
      }
      let cumsum = this.min;
      let arr = [];
      while (cumsum <= this.max) {
        arr.push({
          value: cumsum,
          label: cumsum,
          color: this.scaleInfo.color,
          fontSize: completeUnit(this.scaleInfo.fontSize),
          tickColor: this.scaleInfo.tickColor,
          left: (cumsum - this.min) / (this.max - this.min) * 100 + "%"
        });
        cumsum = cumsum + multiplication(interval, step);
      }
      if (arr[0].value == this.min && !this.scaleInfo.min)
        arr = arr.slice(1);
      if (arr[arr.length - 1].value == this.max && !this.scaleInfo.max)
        arr = arr.slice(0, arr.length - 1);
      if (arr[arr.length - 1].value != this.max && this.scaleInfo.max)
        arr.push({
          value: this.max,
          label: this.max,
          color: this.scaleInfo.color,
          fontSize: completeUnit(this.scaleInfo.fontSize),
          tickColor: this.scaleInfo.tickColor,
          left: "100%"
        });
      let format = this.scaleInfo.format;
      if (typeof format == "function") {
        arr = arr.map((item, index) => {
          return format(item, index);
        });
      }
      this.scaleLine = [...arr];
      this.$forceUpdate();
    },
    onTouchStart(e) {
      if (this.disabled)
        return;
      this.dragging = e.currentTarget.dataset.sort;
      e.currentTarget.dataset.sort == "firstBlock" ? this.firstBlock.zIndex = this.secondBlock.zIndex + 1 : this.secondBlock.zIndex = this.firstBlock.zIndex + 1;
      this.startDragPostion = e.changedTouches ? e.changedTouches[0].pageX : e.pageX;
      this.startValue = e.currentTarget.dataset.sort == "firstBlock" ? this.firstValue : this.secondValue;
      this.$emit("start", {
        block: e.currentTarget.dataset.sort,
        value: this.startValue,
        values: [Math.min(this.firstValue, this.secondValue), Math.max(this.firstValue, this.secondValue)]
      });
    },
    onTouchMove(e) {
      if (this.disabled)
        return;
      this.onDrag(e);
    },
    onTouchEnd(e) {
      this.dragging = "";
      if (this.disabled)
        return;
      this.onDrag(e, true);
    },
    onDrag(e, end = false) {
      let pageX = e.changedTouches ? e.changedTouches[0].pageX : e.pageX;
      let view = common_vendor.index.createSelectorQuery().in(this).select(".block-bar");
      view.boundingClientRect((data) => {
        let diff = (pageX - this.startDragPostion) / data.width * (this.max - this.min);
        this.onUpdateValue(this.startValue + diff, e.currentTarget.dataset.sort, end);
      }).exec();
    },
    onUpdateValue(value, sort, end = false) {
      if (value < this.min)
        value = this.min;
      if (value > this.max)
        value = this.max;
      if (this.getStep > 0 && value != this.min && value != this.max) {
        value = this.min + multiplication(Math.round((value - this.min) / this.getStep), this.getStep);
      } else {
        value = Number(value.toFixed(2));
      }
      if (sort == "firstBlock") {
        this.firstValue = value;
      } else {
        this.secondValue = value;
      }
      this.$emit("change", {
        firstValue: this.firstValue,
        secondValue: this.secondValue,
        values: [Math.min(this.firstValue, this.secondValue), Math.max(this.firstValue, this.secondValue)]
      });
      if (end) {
        this.$emit("end", {
          block: sort,
          value,
          values: [Math.min(this.firstValue, this.secondValue), Math.max(this.firstValue, this.secondValue)]
        });
      }
    }
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return common_vendor.e({
    a: $data.scaleInfo.show
  }, $data.scaleInfo.show ? {
    b: common_vendor.f($data.scaleLine, (scaleItem, scaleIndex, i0) => {
      return {
        a: common_vendor.t(scaleItem.label),
        b: scaleItem.tickColor,
        c: scaleIndex,
        d: scaleItem.left,
        e: scaleItem.color,
        f: scaleItem.fontSize
      };
    })
  } : {}, {
    c: $props.tips
  }, $props.tips ? common_vendor.e({
    d: $data.dragging == "firstBlock"
  }, $data.dragging == "firstBlock" ? {
    e: common_vendor.t($data.firstValue),
    f: $options.getFirstBlockPosition,
    g: $data.firstBlock.zIndex
  } : {}, {
    h: $data.dragging == "secondBlock"
  }, $data.dragging == "secondBlock" ? {
    i: common_vendor.t($data.secondValue),
    j: $options.getSecondBlockPosition,
    k: $data.secondBlock.zIndex
  } : {}) : {}, {
    l: common_vendor.s($options.getActiveStyle),
    m: common_vendor.s($options.getBackgroundStyle),
    n: $data.firstBlock.show
  }, $data.firstBlock.show ? {
    o: $options.getFirstBlockPosition,
    p: $data.firstBlock.zIndex,
    q: common_vendor.o((...args) => $options.onTouchStart && $options.onTouchStart(...args)),
    r: common_vendor.o((...args) => $options.onTouchMove && $options.onTouchMove(...args)),
    s: common_vendor.o((...args) => $options.onTouchEnd && $options.onTouchEnd(...args))
  } : {}, {
    t: $data.secondBlock.show
  }, $data.secondBlock.show ? {
    v: $options.getSecondBlockPosition,
    w: $data.secondBlock.zIndex,
    x: common_vendor.o((...args) => $options.onTouchStart && $options.onTouchStart(...args)),
    y: common_vendor.o((...args) => $options.onTouchMove && $options.onTouchMove(...args)),
    z: common_vendor.o((...args) => $options.onTouchEnd && $options.onTouchEnd(...args))
  } : {}, {
    A: $props.disabled ? 1 : "",
    B: $props.tips || $data.scaleInfo.show ? 1 : ""
  });
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d6b6bfbf"], ["__file", "D:/project/赋强公证/notarization_applet/components/slider-range/index.vue"]]);
wx.createComponent(Component);