✨(component): 修复按需模式下的样式污染

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.3.12-alpha.5",
+  "version": "1.3.12-alpha.6",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

package/component/src/component/checkbox/index.less

@@ -1,12 +1,12 @@
-@lg: 18px;
+@checkbox-lg: 18px;
-@md: 16px;
+@checkbox-md: 16px;
-@sm: 14px;
+@checkbox-sm: 14px;
-@xs: 12px;
+@checkbox-xs: 12px;
 
-@lg-font-size: 16px;
+@checkbox-lg-font-size: 16px;
-@md-font-size: 14px;
+@checkbox-md-font-size: 14px;
-@sm-font-size: 12px;
+@checkbox-sm-font-size: 12px;
-@xs-font-size: 10px;
+@checkbox-xs-font-size: 10px;
 
 .set-size(@size, @font-size) {
   & {
@@ -30,16 +30,16 @@
 
 .layui-checkbox{
   &[size="lg"] {
-    .set-size(@lg, @lg-font-size);
+    .set-size(@checkbox-lg, @checkbox-lg-font-size);
   }
   &[size="md"] {
-    .set-size(@md, @md-font-size);
+    .set-size(@checkbox-md, @checkbox-md-font-size);
   }
   &[size="sm"] {
-    .set-size(@sm, @sm-font-size);
+    .set-size(@checkbox-sm, @checkbox-sm-font-size);
   }
   &[size="xs"] {
-    .set-size(@xs, @xs-font-size);
+    .set-size(@checkbox-xs, @checkbox-xs-font-size);
   }
 }
 

package/component/src/component/input/index.less

@@ -3,10 +3,10 @@
   --input-border-color: var(--global-neutral-color-3);
 }
 
-@lg: 44px;
+@input-lg: 44px;
-@md: 38px;
+@input-md: 38px;
-@sm: 32px;
+@input-sm: 32px;
-@xs: 26px;
+@input-xs: 26px;
 
 .set-size(@size) {
   & {
@@ -105,15 +105,15 @@
 
 .layui-input{
   &[size="lg"] {
-    .set-size(@lg);
+    .set-size(@input-lg);
   }
   &[size="md"] {
-    .set-size(@md);
+    .set-size(@input-md);
   }
   &[size="sm"] {
-    .set-size(@sm);
+    .set-size(@input-sm);
   }
   &[size="xs"] {
-    .set-size(@xs);
+    .set-size(@input-xs);
   }
 }

package/component/src/component/inputNumber/index.less

@@ -3,18 +3,19 @@
 
 @border-color: #eee;
 @hover-border-color: var(--global-primary-color);
-@lg: 44px;
+
-@lg-wdith: 200px;
+@input-number-lg: 44px;
-@lg-right: 22px;
+@input-number-lg-wdith: 200px;
-@md: 38px;
+@input-number-lg-right: 22px;
-@md-wdith: 160px;
+@input-number-md: 38px;
-@md-right: 19px;
+@input-number-md-wdith: 160px;
-@sm: 32px;
+@input-number-md-right: 19px;
-@sm-wdith: 140px;
+@input-number-sm: 32px;
-@sm-right: 16px;
+@input-number-sm-wdith: 140px;
-@xs: 26px;
+@input-number-sm-right: 16px;
-@xs-wdith: 120px;
+@input-number-xs: 26px;
-@xs-right: 13px;
+@input-number-xs-wdith: 120px;
+@input-number-xs-right: 13px;
 
 .set-size(@width, @size, @right-size) {
   & {
@@ -123,15 +124,15 @@
   }
 
   &[size="lg"] {
-    .set-size(@lg-wdith, @lg, @lg-right);
+    .set-size(@input-number-lg-wdith, @input-number-lg, @input-number-lg-right);
   }
   &[size="md"] {
-    .set-size(@md-wdith, @md, @md-right);
+    .set-size(@input-number-md-wdith, @input-number-md, @input-number-md-right);
   }
   &[size="sm"] {
-    .set-size(@sm-wdith, @sm, @sm-right);
+    .set-size(@input-number-sm-wdith, @input-number-sm, @input-number-sm-right);
   }
   &[size="xs"] {
-    .set-size(@xs-wdith, @xs, @xs-right);
+    .set-size(@input-number-xs-wdith, @input-number-xs, @input-number-xs-right);
   }
 }

package/component/src/component/radio/index.less

@@ -1,7 +1,7 @@
-@lg: 24px;
+@radio-lg: 24px;
-@md: 22px;
+@radio-md: 22px;
-@sm: 20px;
+@radio-sm: 20px;
-@xs: 18px;
+@radio-xs: 18px;
 
 .set-size(@size) {
   & {
@@ -13,16 +13,16 @@
 
 .layui-radio{
   &[size="lg"] {
-    .set-size(@lg);
+    .set-size(@radio-lg);
   }
   &[size="md"] {
-    .set-size(@md);
+    .set-size(@radio-md);
   }
   &[size="sm"] {
-    .set-size(@sm);
+    .set-size(@radio-sm);
   }
   &[size="xs"] {
-    .set-size(@xs);
+    .set-size(@radio-xs);
   }
 }
 

package/component/src/component/select/index.less

@@ -2,18 +2,18 @@
 @import "../checkbox/index.less";
 @import "../input/index.less";
 
-@lg: 44px;
+@select-lg: 44px;
-@md: 38px;
+@select-md: 38px;
-@sm: 32px;
+@select-sm: 32px;
-@xs: 26px;
+@select-xs: 26px;
-@lg-badge:32px;
+@select-lg-badge:32px;
-@md-badge:26px;
+@select-md-badge:26px;
-@sm-badge:20px;
+@select-sm-badge:20px;
-@xs-badge:14px;
+@select-xs-badge:14px;
-@lg-width: 260px;
+@select-lg-width: 260px;
-@md-width: 220px;
+@select-md-width: 220px;
-@sm-width: 180px;
+@select-sm-width: 180px;
-@xs-width: 140px;
+@select-xs-width: 140px;
 
 .set-size(@size,@badge-size,@width) {
   & {
@@ -229,15 +229,15 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 }
 .layui-form-select{
   &[size="lg"] {
-    .set-size(@lg, @lg-badge, @lg-width);
+    .set-size(@select-lg, @select-lg-badge, @select-lg-width);
   }
   &[size="md"] {
-    .set-size(@md, @md-badge, @md-width);
+    .set-size(@select-md, @select-md-badge, @select-md-width);
   }
   &[size="sm"] {
-    .set-size(@sm, @sm-badge, @sm-width);
+    .set-size(@select-sm, @select-sm-badge, @select-sm-width);
   }
   &[size="xs"] {
-    .set-size(@xs, @xs-badge, @xs-width);
+    .set-size(@select-xs, @select-xs-badge, @select-xs-width);
   }
 }

package/component/src/component/switch/index.less

@@ -1,12 +1,12 @@
-@lg: 24px;
+@switch-lg: 24px;
-@md: 22px;
+@switch-md: 22px;
-@sm: 20px;
+@switch-sm: 20px;
-@xs: 18px;
+@switch-xs: 18px;
 
-@lg-min-width: 42px;
+@switch-lg-min-width: 42px;
-@md-min-width: 37px;
+@switch-md-min-width: 37px;
-@sm-min-width: 32px;
+@switch-sm-min-width: 32px;
-@xs-min-width: 27px;
+@switch-xs-min-width: 27px;
 
 .set-size(@size, @min-width) {
   & {
@@ -36,16 +36,16 @@
 
 .layui-switch-container{
   &[size="lg"] {
-    .set-size(@lg,@lg-min-width);
+    .set-size(@switch-lg,@switch-lg-min-width);
   }
   &[size="md"] {
-    .set-size(@md,@md-min-width);
+    .set-size(@switch-md,@switch-md-min-width);
   }
   &[size="sm"] {
-    .set-size(@sm,@sm-min-width);
+    .set-size(@switch-sm,@switch-sm-min-width);
   }
   &[size="xs"] {
-    .set-size(@xs,@xs-min-width);
+    .set-size(@switch-xs,@switch-xs-min-width);
   }
 }