[修复] rate 评分组件

docs/docs/zh-CN/components/checkbox.md

@@ -5,7 +5,7 @@
 
 <template>
   <lay-form>
-    <lay-checkbox name="like" skin="primary"  v-model:checked="checked1" label="1" ></lay-checkbox>
+    <lay-checkbox name="like" skin="primary"  v-model="checked1" label="1" ></lay-checkbox>
  </lay-form>
 </template>
 
@@ -33,7 +33,7 @@ export default {
 
 <template>
   <lay-form>
-    <lay-checkbox name="like" label="1" v-model:checked="checked2" >普通</lay-checkbox>
+    <lay-checkbox name="like" label="1" v-model="checked2" >普通</lay-checkbox>
  </lay-form>
 </template>
 
@@ -61,9 +61,9 @@ export default {
 
 <template>
   <lay-form>
-    <lay-checkbox name="like" skin="primary" v-model:checked="checked3" label="1">写作</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" v-model="checked3" label="1">写作</lay-checkbox>
-    <lay-checkbox name="like" skin="primary" v-model:checked="checked4" label="2">画画</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" v-model="checked4" label="2">画画</lay-checkbox>
-    <lay-checkbox name="like" skin="primary" v-model:checked="checked5" label="3">运动</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" v-model="checked5" label="3">运动</lay-checkbox>
   </lay-form>
 </template>
 
@@ -93,7 +93,7 @@ export default {
 
 <template>
   <lay-form>
-    <lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model:checked="checked6">禁用</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
  </lay-form>
 </template>
 
@@ -123,7 +123,7 @@ export default {
 
 <template>
   <lay-form>
-    <lay-checkbox name="like" skin="primary" label="1" @change="change" v-model:checked="checked7">回调</lay-checkbox>
+    <lay-checkbox name="like" skin="primary" label="1" @change="change" v-model="checked7">回调</lay-checkbox>
  </lay-form>
 </template>
 
@@ -159,7 +159,7 @@ export default {
 | name                | 原始属性 name | --                   |
 | skin                | 主题          | --                   |
 | label               | 选中值        | --                   |
-| checked ( v-model ) | 是否选中      | `true` `false`       |
+| v-model | 是否选中      | `true` `false`       |
 | change              | 切换事件      | isChecked : 当前状态 |
 
 :::

src/css/layui.css

@@ -4624,36 +4624,6 @@ body .layui-util-face .layui-layer-content {
   color: #999;
 }
 
-.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);
-}
-
 .layui-colorpicker {
   width: 26px;
   height: 26px;

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>