@cqmcui/cqmcui/dist/packages/_es/Rate.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { ref, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, normalizeStyle, createElementVNode, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
import { StarFillN } from "@cqmcui/icons-vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { r as renderIcon } from "./renderIcon-3d0fd47c.js";
import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
import { u as useTouch } from "./index-7a7385e4.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { create, componentName } = createComponent("rate");
const _sfc_main = create({
  props: {
    count: {
      type: [String, Number],
      default: 5
    },
    modelValue: {
      type: [String, Number],
      default: 0
    },
    customIcon: {
      type: Object,
      default: () => {
        return StarFillN;
      }
    },
    size: {
      type: [String, Number],
      default: void 0
    },
    activeColor: {
      type: String,
      default: ""
    },
    voidColor: {
      type: String,
      default: ""
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    allowHalf: {
      type: Boolean,
      default: false
    },
    touchable: {
      type: Boolean,
      default: true
    },
    spacing: {
      type: [String, Number],
      default: void 0
    }
  },
  components: { StarFillN },
  emits: ["update:modelValue", "change"],
  setup(props, { emit, slots }) {
    const rateRefs = ref([]);
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true
      };
    });
    const updateVal = (value) => {
      emit("update:modelValue", value);
      emit("change", value);
    };
    const onClick = (e, index) => {
      if (props.disabled || props.readonly)
        return;
      let value = 0;
      if (index === 1 && props.modelValue === index)
        ;
      else {
        value = index;
        if (props.allowHalf && e == 2) {
          value -= 0.5;
        }
      }
      updateVal(value);
    };
    const getScoreByPosition = (x, rateRefs2, allowHalf) => {
      let v = 0;
      for (let index = rateRefs2.value.length - 1; index >= 0; index--) {
        const item = rateRefs2.value[index];
        if (x > item.offsetLeft) {
          if (allowHalf) {
            v = index + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
          } else {
            v = index + 1;
          }
          break;
        }
      }
      return v;
    };
    const touch = useTouch();
    const touchMethods = {
      onTouchStart(event) {
        if (!props.touchable || props.readonly)
          return;
        touch.start(event);
      },
      onTouchMove(event) {
        if (!props.touchable)
          return;
        touch.move(event);
        if (touch.isHorizontal()) {
          if (rateRefs.value) {
            event.preventDefault();
            updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
          }
        }
      }
    };
    const refRandomId = Math.random().toString(36).slice(-8);
    return {
      classes,
      ...touchMethods,
      onClick,
      pxCheck,
      rateRefs,
      refRandomId,
      renderIcon,
      slots
    };
  }
});
const _hoisted_1 = ["id"];
const _hoisted_2 = {
  key: 0,
  class: "cqmc-rate-item__icon--half"
};
const _hoisted_3 = {
  key: 1,
  class: "cqmc-rate-item__icon--half"
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("view", {
    class: normalizeClass(_ctx.classes),
    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args))
  }, [
    (openBlock(true), createElementBlock(Fragment, null, renderList(Number(_ctx.count), (n) => {
      return openBlock(), createElementBlock("view", {
        class: "cqmc-rate-item",
        key: n,
        ref_for: true,
        ref: "rateRefs",
        id: "rateRefs-" + _ctx.refRandomId + n,
        style: normalizeStyle(n < Number(_ctx.count) ? { marginRight: _ctx.pxCheck(_ctx.spacing) } : {})
      }, [
        createElementVNode("view", null, [
          (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.customIcon, { width: _ctx.size, height: _ctx.size, size: _ctx.size, color: n <= _ctx.modelValue ? _ctx.activeColor : _ctx.voidColor })), {
            class: normalizeClass(["cqmc-rate-item__icon", { "cqmc-rate-item__icon--disabled": _ctx.disabled || n > _ctx.modelValue }]),
            onClick: ($event) => _ctx.onClick(1, n)
          }, null, 8, ["class", "onClick"]))
        ]),
        _ctx.allowHalf && Number(_ctx.modelValue) + 1 > n ? (openBlock(), createElementBlock("view", _hoisted_2, [
          (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.customIcon, { width: _ctx.size, height: _ctx.size, size: _ctx.size, color: n <= Number(_ctx.modelValue) + 1 ? _ctx.activeColor : _ctx.voidColor })), {
            class: "cqmc-rate-item__icon",
            onClick: ($event) => _ctx.onClick(2, n)
          }, null, 8, ["onClick"]))
        ])) : _ctx.allowHalf && Number(_ctx.modelValue) + 1 < n ? (openBlock(), createElementBlock("view", _hoisted_3, [
          (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderIcon(_ctx.customIcon, { width: _ctx.size, height: _ctx.size, size: _ctx.size, color: _ctx.voidColor })), {
            class: "cqmc-rate-item__icon cqmc-rate-item__icon--disabled",
            onClick: ($event) => _ctx.onClick(2, n)
          }, null, 8, ["onClick"]))
        ])) : createCommentVNode("", true)
      ], 12, _hoisted_1);
    }), 128))
  ], 34);
}
const Rate = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", render]]);
export {
  Rate as default
};