"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);