init

uni_modules/nutui-uni/components/rate/rate.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed, defineComponent, ref, toRef } from 'vue'
+import { CHANGE_EVENT, PREFIX, UPDATE_MODEL_EVENT } from '../_constants'
+import { getMainClass, getRandomId, pxCheck } from '../_utils'
+import { useFormDisabled } from '../form/form'
+import NutIcon from '../icon/icon.vue'
+import { rateEmits, rateProps } from './rate'
+
+const props = defineProps(rateProps)
+const emit = defineEmits(rateEmits)
+const disabled = useFormDisabled(toRef(props, 'disabled'))
+
+const refRandomId = getRandomId()
+const rateRefs = ref<HTMLElement[]>([])
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+function updateVal(value: number) {
+  emit(UPDATE_MODEL_EVENT, value)
+  emit(CHANGE_EVENT, value)
+}
+function onClick(e: number, index: number) {
+  if (disabled.value || 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)
+}
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-rate`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <view
+      v-for="n in Number(count)"
+      :id="`rateRefs-${refRandomId}${n}`"
+      :key="n"
+      ref="rateRefs"
+      class="nut-rate-item"
+      :style="n < Number(count) ? { marginRight: pxCheck(spacing!) } : {}"
+    >
+      <view class="nut-rate-item__icon--full" @click="onClick(1, n)">
+        <NutIcon
+          :size="props.size"
+          :custom-class="`nut-rate-item__icon ${disabled || n > +modelValue ? 'nut-rate-item__icon--disabled' : ''}`"
+          :name="customIcon"
+          :custom-color="n <= +modelValue ? activeColor : voidColor"
+        />
+      </view>
+      <view v-if="allowHalf && Number(modelValue) + 1 > n" class="nut-rate-item__icon--half" @click="onClick(2, n)">
+        <NutIcon
+          :size="props.size"
+          custom-class="nut-rate-item__icon"
+          :name="customIcon"
+          :custom-color="n <= Number(modelValue) + 1 ? activeColor : voidColor"
+          @click="onClick(2, n)"
+        />
+      </view>
+      <view v-else-if="allowHalf && Number(modelValue) + 1 < n" class="nut-rate-item__icon--half" @click="onClick(2, n)">
+        <NutIcon
+          :size="props.size"
+          :name="customIcon"
+          custom-class="nut-rate-item__icon nut-rate-item__icon--disabled"
+          :custom-color="voidColor"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>