[修复] rate 评分组件

src/module/checkbox/index.vue

@@ -37,7 +37,7 @@ const handleClick = function () {
       class="layui-unselect layui-form-checkbox"
       :class="{
         'layui-checkbox-disbaled layui-disabled': disabled,
-        'layui-form-checked': props.checked,
+        'layui-form-checked': props.modelValue,
       }"
       :lay-skin="skin"
     >

src/module/rate/index.less

@@ -0,0 +1,29 @@
+.layui-rate,
+.layui-rate * {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.layui-rate {
+    padding: 10px 5px 10px 0;
+    font-size: 0;
+}
+
+.layui-rate li i.layui-icon {
+    font-size: 20px;
+    color: #ffb800;
+    margin-right: 5px;
+    transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+}
+
+.layui-rate li i:hover {
+    cursor: pointer;
+    transform: scale(1.12);
+    -webkit-transform: scale(1.12);
+}
+
+.layui-rate[readonly] li i:hover {
+    cursor: default;
+    transform: scale(1);
+}

src/module/rate/index.vue

@@ -1,3 +1,46 @@
+
+<script lang="ts">
+export default {
+  name: "LayRate",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps, withDefaults } from "vue";
+import "./index.less";
+
+export interface LayRateProps {
+  theme?: string;
+  length?: number;
+  modelValue: number;
+  readonly?: boolean | string;
+}
+
+const props = withDefaults(defineProps<LayRateProps>(), {
+  length: 5,
+  modelValue: 0,
+  readonly: false,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const currentValue = computed({
+  get: function () {
+    return props.modelValue;
+  },
+  set: function (val) {
+    emit("update:modelValue", val);
+  },
+});
+
+const mouseenter = function (index: number, event: any) {
+  if (props.readonly) {
+    return false;
+  }
+  currentValue.value = index;
+};
+</script>
+
 <template>
   <ul class="layui-rate">
     <li
@@ -18,39 +61,3 @@
     }}
   </ul>
 </template>
-<script setup lang="ts">
-import { computed, defineProps, withDefaults } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    length?: number
-    modelValue: number
-    readonly?: boolean | string
-    theme?: string
-  }>(),
-  {
-    length: 5,
-    modelValue: 0,
-    readonly: false,
-    theme: 'green',
-  }
-)
-
-const emit = defineEmits(['update:modelValue'])
-
-const currentValue = computed({
-  get: function () {
-    return props.modelValue
-  },
-  set: function (val) {
-    emit('update:modelValue', val)
-  },
-})
-
-const mouseenter = function (index: number, event: any) {
-  if (props.readonly) {
-    return false
-  }
-  currentValue.value = index
-}
-</script>

src/module/switch/index.vue

@@ -1,9 +1,41 @@
+<script lang="ts">
+export default {
+  name: "LaySwitch",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from "vue";
+import "./index.less"
+
+export interface LaySwitchProps {
+  modelValue: boolean;
+  disabled?: boolean;
+  activeText?: string;
+  inactiveText?: string;
+}
+
+const props = withDefaults(defineProps<LaySwitchProps>(), {
+  activeText: "启用",
+  inactiveText: "禁用",
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const handleClick = function () {
+  if (!props.disabled) {
+    emit("update:modelValue", !props.modelValue);
+    emit("change", !props.modelValue);
+  }
+};
+</script>
+
 <template>
   <span @click.stop="handleClick">
     <div
       class="layui-unselect layui-form-switch"
       :class="{
-        'layui-form-onswitch': modelValue == true,
+        'layui-form-onswitch': modelValue,
         'layui-checkbox-disbaled layui-disabled': disabled,
       }"
     >
@@ -12,30 +44,3 @@
     </div>
   </span>
 </template>
-
-<script setup name="LaySwitch" lang="ts">
-import { defineProps, defineEmits } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    disabled?: boolean
-    activeText?: string
-    inactiveText?: string
-  }>(),
-  {
-    activeText: '启用',
-    inactiveText: '禁用',
-  }
-)
-
-const emit = defineEmits(['update:modelValue', 'change'])
-
-const handleClick = function () {
-  if (props.disabled) {
-    return false
-  }
-  emit('update:modelValue', !props.modelValue)
-  emit('change', !props.modelValue)
-}
-</script>