yijianbao_user_uniapp/pages_im/pages/conversation/setFontSize/FontSizeSlider.vue

<template>
  <view>
    <view class="u-slider_title">
      <span style="font-size: 24rpx">小</span>
      <span style="font-size: 28rpx">标准</span>
      <span style="font-size: 32rpx">A</span>
    </view>
    <view
      class="u-slider"
      @tap="onClick"
      :class="[disabled ? 'u-slider--disabled' : '']"
      :style="{
        backgroundColor: inactiveColor,
      }"
    >
      <view class="u-slider_scale">
        <view
          class="u-slider_scale_item"
          v-for="item in stepList"
          :key="item"
        ></view>
      </view>
      <view
        class="u-slider__gap"
        :style="[
          barStyle,
          createStyle,
          {
            height: height + 'rpx',
            backgroundColor: activeColor,
          },
        ]"
      >
        <view
          class="u-slider__button-wrap"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          @touchend="onTouchEnd"
          @touchcancel="onTouchEnd"
        >
          <view
            class="u-slider__button"
            :style="[
              blockStyle,
              {
                height: blockWidth + 'rpx',
                width: blockWidth + 'rpx',
                backgroundColor: blockColor,
              },
            ]"
          ></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * slider 滑块选择器
 * @tutorial https://uviewui.com/components/slider.html
 * @property {Number | String} value 滑块默认值（默认0
 * @property {Number | String} step 步长（默认1）
 * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
 * @property {Number | String} height 滑块条高度，单位rpx（默认6）
 * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
 * @property {String} blockColor 滑块颜色（默认#ffffff）
 * @property {Object} blockStyle 给滑块自定义样式，对象形式
 * @property {Boolean} disabled 是否禁用滑块(默认为false)
 * @event {Function} start 滑动触发
 * @event {Function} moving 正在滑动中
 * @event {Function} end 滑动结束
 * @example <u-slider v-model="value" />
 */
export default {
  name: "u-slider",
  props: {
    // 当前进度百分比值，范围0-100
    value: {
      type: [Number, String],
      default: 0,
    },
    // 是否禁用滑块
    disabled: {
      type: Boolean,
      default: false,
    },
    // 滑块宽度，高等于宽，单位rpx
    blockWidth: {
      type: [Number, String],
      default: 30,
    },
    // 步进值
    step: {
      type: [Number, String],
      default: 1,
    },
    // 滑块条高度，单位rpx
    height: {
      type: [Number, String],
      default: 2,
    },
    // 进度条的背景颜色
    inactiveColor: {
      type: String,
      default: "#90959b",
    },
    activeColor: {
      type: String,
      default: "#90959b",
    },
    // 滑块的背景颜色
    blockColor: {
      type: String,
      default: "#ffffff",
    },
    // 用户对滑块的自定义颜色
    blockStyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    stepList: function () {
      let arr = [];
      const length = 100 / Number(this.step);
      for (let i = 0; i < length; i++) {
        arr.push(i);
      }
      return arr;
    },
  },
  data() {
    return {
      startX: 0,
      status: "end",
      newValue: 0,
      distanceX: 0,
      startValue: 0,
      barStyle: {},
      sliderRect: {
        left: 0,
        width: 0,
      },
      createStyle: {},
      min: 0,
      // 最大值
      max: 100,
    };
  },
  watch: {
    value(n) {
      // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
      if (this.status == "end") this.updateValue(this.value, false);
    },
  },
  created() {
    this.updateValue(this.value, false);
    this.createStyle = {};
  },
  mounted() {
    // 获取滑块条的尺寸信息
    this.$uGetRect(".u-slider").then((rect) => {
      this.sliderRect = rect;
    });
  },
  methods: {
    onTouchStart(event) {
      if (this.disabled) return;
      this.startX = 0;
      // 触摸点集
      let touches = event.touches[0];
      // 触摸点到屏幕左边的距离
      this.startX = touches.clientX;
      // 此处的this.value虽为props值，但是通过$emit('input')进行了修改
      this.startValue = this.format(this.value);
      // 标示当前的状态为开始触摸滑动
      this.status = "start";
    },
    onTouchMove(event) {
      if (this.disabled) return;
      // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
      // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
      if (this.status == "start") this.$emit("start");
      let touches = event.touches[0];
      // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
      this.distanceX = touches.clientX - this.sliderRect.left;
      // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
      // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
      this.newValue = (this.distanceX / this.sliderRect.width) * 100;
      this.status = "moving";
      // 发出moving事件
      this.$emit("moving");
      this.updateValue(this.newValue, true);
    },
    onTouchEnd() {
      if (this.disabled) return;
      if (this.status === "moving") {
        this.updateValue(this.newValue, false);
        this.$emit("end");
      }
      this.status = "end";
    },
    updateValue(value, drag) {
      // 去掉小数部分，同时也是对step步进的处理
      const width = this.format(value);
      // 不允许滑动的值超过max最大值，百分比也不能超过100
      if (width > this.max || width > 100) return;
      // 设置移动的百分比值
      let barStyle = {
        width: width + "%",
      };
      // 移动期间无需过渡动画
      if (drag == true) {
        barStyle.transition = "none";
      } else {
        // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
        delete barStyle.transition;
      }
      // 修改value值
      this.$emit("input", width);
      this.barStyle = barStyle;
    },
    format(value) {
      // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
      return (
        Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) *
        this.step
      );
    },
    onClick(event) {
      if (this.disabled) return;
      // 直接点击滑块的情况，计算方式与onTouchMove方法相同
      const value =
        ((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * 100;
      this.updateValue(value, false);
    },
  },
};
</script>

<style lang="scss" scoped>
// @import "../../libs/css/style.components.scss";

.u-slider {
  width: 94%;
  margin: 0 auto;
  position: relative;
  border-radius: 999px;
  border-radius: 999px;
  background-color: #ebedf0;
}

.u-slider:before {
  position: absolute;
  right: 0;
  left: 0;
  content: "";
  top: -8px;
  bottom: -8px;
  z-index: -1;
}
.u-slider_scale {
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  display: flex;
  // z-index: 10;
}

.u-slider_scale_item {
  width: 25%;
  height: 9px;
  border-left: 1px solid #90959b;
  &:last-child {
    border-right: 1px solid #90959b;
  }
}

.u-slider__gap {
  position: relative;
  border-radius: inherit;
  transition: width 0.2s;
  transition: width 0.2s;
  // background-color: #1989fa;
  background-color: transparent !important;
}

.u-slider__button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background-color: #fff;
  cursor: pointer;
}
.u-slider_title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 20rpx;
}
.u-slider__button-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 11;
  transform: translate3d(50%, -50%, 0);
}

.u-slider--disabled {
  opacity: 0.5;
}
</style>