xt-element-ui 1.2.8 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/index.common.js +118 -58
  2. package/lib/index.css +1 -1
  3. package/lib/index.umd.js +118 -58
  4. package/lib/index.umd.min.js +1 -1
  5. package/package.json +1 -1
  6. package/src/components/xt-button/index.vue +53 -10
  7. package/src/components/xt-button/style/index.scss +147 -43
  8. package/src/components/xt-input/index.vue +66 -37
  9. package/src/components/xt-input/style/index.scss +70 -13
  10. package/src/components/xt-step-price/index.vue +12 -10
  11. package/src/components/xt-step-price/style/index.scss +32 -24
  12. package/src/components/xt-step-price-item/index.vue +10 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xt-element-ui",
3
- "version": "1.2.8",
3
+ "version": "1.3.0",
4
4
  "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
5
5
  "main": "lib/index.common.js",
6
6
  "module": "lib/index.esm.js",
package/src/components/xt-button/index.vue CHANGED
@@ -1,21 +1,31 @@
1
1
  <template>
2
- <button
2
+ <button
3
3
  class="xt-button"
4
4
  :class="[
5
- type ?'xt-button--' + type: '',
5
+ type ? 'xt-button--' + type : '',
6
6
  size ? 'xt-button--' + size : '',
7
7
  {
8
- 'is-plain': plain,
8
+ 'is-plain': plain,
9
9
  'is-disabled': disabled,
10
- 'is-round': round
10
+ 'is-round': round,
11
+ 'is-circle': circle,
12
+ 'is-dashed': dashed,
13
+ 'is-text': text,
14
+ 'is-link': link,
15
+ 'is-loading': loading
11
16
  }
12
- ]"
13
- :disabled="disabled"
17
+ ]"
18
+ :disabled="disabled || loading"
14
19
  @click="handleClick"
15
20
  >
16
- <slot></slot>
21
+ <i v-if="loading" class="el-icon-loading"></i>
22
+ <i v-else-if="icon" :class="iconClass"></i>
23
+ <span v-if="$slots.default" class="xt-button__inner">
24
+ <slot></slot>
25
+ </span>
17
26
  </button>
18
27
  </template>
28
+
19
29
  <script>
20
30
  export default {
21
31
  name: 'XtButton',
@@ -23,7 +33,7 @@ export default {
23
33
  type: {
24
34
  type: String,
25
35
  default: '',
26
- validator: (val) => ['', 'primary', 'success', 'warning', 'danger'].includes(val)
36
+ validator: (val) => ['', 'primary', 'success', 'warning', 'danger', 'info'].includes(val)
27
37
  },
28
38
  size: {
29
39
  type: String,
@@ -41,14 +51,47 @@ export default {
41
51
  round: {
42
52
  type: Boolean,
43
53
  default: false
54
+ },
55
+ circle: {
56
+ type: Boolean,
57
+ default: false
58
+ },
59
+ dashed: {
60
+ type: Boolean,
61
+ default: false
62
+ },
63
+ text: {
64
+ type: Boolean,
65
+ default: false
66
+ },
67
+ link: {
68
+ type: Boolean,
69
+ default: false
70
+ },
71
+ icon: {
72
+ type: String,
73
+ default: ''
74
+ },
75
+ loading: {
76
+ type: Boolean,
77
+ default: false
78
+ }
79
+ },
80
+ computed: {
81
+ iconClass() {
82
+ if (!this.icon) return ''
83
+ if (this.icon.indexOf('el-icon') === 0) {
84
+ return this.icon
85
+ }
86
+ return 'el-icon-' + this.icon
44
87
  }
45
88
  },
46
89
  methods: {
47
90
  handleClick() {
48
- if (!this.disabled) {
91
+ if (!this.disabled && !this.loading) {
49
92
  this.$emit('click')
50
93
  }
51
94
  }
52
95
  }
53
96
  }
54
- </script>
97
+ </script>
package/src/components/xt-button/style/index.scss CHANGED
@@ -300,29 +300,19 @@
300
300
 
301
301
  &.is-disabled {
302
302
  background-color: transparent !important;
303
+ color: var(--xt-button-disabled-text-color);
303
304
  }
304
305
 
305
306
  &:not(.is-disabled) {
306
307
  &:hover {
307
- background-color: var(--xt-fill-color-light);
308
+ background-color: transparent;
309
+ color: var(--xt-button-hover-text-color);
310
+ border-color: transparent;
308
311
  }
309
312
  &:active {
310
- background-color: var(--xt-fill-color);
311
- }
312
- &:focus-visible {
313
- outline: 2px solid var(--xt-button-outline-color);
314
- outline-offset: 1px;
315
- transition: outline-offset 0s, outline 0s;
316
- }
317
-
318
- &.is-has-bg {
319
- background-color: var(--xt-fill-color-light);
320
- &:hover {
321
- background-color: var(--xt-fill-color);
322
- }
323
- &:active {
324
- background-color: var(--xt-fill-color-dark);
325
- }
313
+ background-color: transparent;
314
+ color: var(--xt-button-active-text-color);
315
+ border-color: transparent;
326
316
  }
327
317
  }
328
318
  }
@@ -350,18 +340,14 @@
350
340
  }
351
341
  }
352
342
 
353
- // 纯文字按钮变体
343
+ // 纯文字按钮变体（与 is-text 语义一致，保留兼容）
354
344
  &.xt-button--text {
355
345
  border-color: transparent;
356
346
  background: transparent;
357
347
  color: var(--xt-color-primary);
358
- padding-left: 0;
359
- padding-right: 0;
360
348
 
361
349
  &.is-disabled {
362
350
  color: var(--xt-button-disabled-text-color);
363
- background-color: transparent !important;
364
- border-color: transparent !important;
365
351
  }
366
352
  &:not(.is-disabled) {
367
353
  &:hover {
@@ -401,9 +387,7 @@
401
387
  --xt-button-disabled-bg-color: var(--xt-color-primary-light-5);
402
388
  --xt-button-disabled-border-color: var(--xt-color-primary-light-5);
403
389
 
404
- &.is-plain,
405
- &.is-text,
406
- &.is-link {
390
+ &.is-plain {
407
391
  --xt-button-text-color: var(--xt-color-primary);
408
392
  --xt-button-bg-color: var(--xt-color-primary-light-9);
409
393
  --xt-button-border-color: var(--xt-color-primary-light-5);
@@ -411,13 +395,40 @@
411
395
  --xt-button-hover-bg-color: var(--xt-color-primary);
412
396
  --xt-button-hover-border-color: var(--xt-color-primary);
413
397
  --xt-button-active-text-color: var(--xt-color-white);
414
-
398
+ --xt-button-active-bg-color: var(--xt-color-primary);
399
+ --xt-button-active-border-color: var(--xt-color-primary);
400
+ }
401
+ &.is-text {
402
+ --xt-button-text-color: var(--xt-color-primary);
403
+ --xt-button-hover-text-color: var(--xt-color-primary-light-3);
404
+ --xt-button-active-text-color: var(--xt-color-primary-dark-2);
405
+ --xt-button-bg-color: transparent;
406
+ --xt-button-border-color: transparent;
407
+ --xt-button-hover-bg-color: transparent;
408
+ --xt-button-active-bg-color: transparent;
409
+ }
410
+ &.is-link {
411
+ --xt-button-text-color: var(--xt-color-primary);
412
+ --xt-button-hover-text-color: var(--xt-color-primary-light-3);
413
+ --xt-button-active-text-color: var(--xt-color-primary-dark-2);
414
+ --xt-button-bg-color: transparent;
415
+ --xt-button-border-color: transparent;
416
+ --xt-button-hover-bg-color: transparent;
417
+ --xt-button-active-bg-color: transparent;
418
+ }
419
+ &.is-plain {
415
420
  &.is-disabled {
416
421
  color: var(--xt-color-primary-light-5);
417
422
  background-color: var(--xt-color-primary-light-9);
418
423
  border-color: var(--xt-color-primary-light-8);
419
424
  }
420
425
  }
426
+ &.is-text,
427
+ &.is-link {
428
+ &.is-disabled {
429
+ color: var(--xt-color-primary-light-5);
430
+ }
431
+ }
421
432
 
422
433
  &.is-dashed {
423
434
  --xt-button-text-color: var(--xt-color-primary);
@@ -455,9 +466,7 @@
455
466
  --xt-button-disabled-bg-color: var(--xt-color-success-light-5);
456
467
  --xt-button-disabled-border-color: var(--xt-color-success-light-5);
457
468
 
458
- &.is-plain,
459
- &.is-text,
460
- &.is-link {
469
+ &.is-plain {
461
470
  --xt-button-text-color: var(--xt-color-success);
462
471
  --xt-button-bg-color: var(--xt-color-success-light-9);
463
472
  --xt-button-border-color: var(--xt-color-success-light-5);
@@ -465,13 +474,40 @@
465
474
  --xt-button-hover-bg-color: var(--xt-color-success);
466
475
  --xt-button-hover-border-color: var(--xt-color-success);
467
476
  --xt-button-active-text-color: var(--xt-color-white);
468
-
477
+ --xt-button-active-bg-color: var(--xt-color-success);
478
+ --xt-button-active-border-color: var(--xt-color-success);
479
+ }
480
+ &.is-text {
481
+ --xt-button-text-color: var(--xt-color-success);
482
+ --xt-button-hover-text-color: var(--xt-color-success-light-3);
483
+ --xt-button-active-text-color: var(--xt-color-success-dark-2);
484
+ --xt-button-bg-color: transparent;
485
+ --xt-button-border-color: transparent;
486
+ --xt-button-hover-bg-color: transparent;
487
+ --xt-button-active-bg-color: transparent;
488
+ }
489
+ &.is-link {
490
+ --xt-button-text-color: var(--xt-color-success);
491
+ --xt-button-hover-text-color: var(--xt-color-success-light-3);
492
+ --xt-button-active-text-color: var(--xt-color-success-dark-2);
493
+ --xt-button-bg-color: transparent;
494
+ --xt-button-border-color: transparent;
495
+ --xt-button-hover-bg-color: transparent;
496
+ --xt-button-active-bg-color: transparent;
497
+ }
498
+ &.is-plain {
469
499
  &.is-disabled {
470
500
  color: var(--xt-color-success-light-5);
471
501
  background-color: var(--xt-color-success-light-9);
472
502
  border-color: var(--xt-color-success-light-8);
473
503
  }
474
504
  }
505
+ &.is-text,
506
+ &.is-link {
507
+ &.is-disabled {
508
+ color: var(--xt-color-success-light-5);
509
+ }
510
+ }
475
511
 
476
512
  &.is-dashed {
477
513
  --xt-button-text-color: var(--xt-color-success);
@@ -509,9 +545,7 @@
509
545
  --xt-button-disabled-bg-color: var(--xt-color-warning-light-5);
510
546
  --xt-button-disabled-border-color: var(--xt-color-warning-light-5);
511
547
 
512
- &.is-plain,
513
- &.is-text,
514
- &.is-link {
548
+ &.is-plain {
515
549
  --xt-button-text-color: var(--xt-color-warning);
516
550
  --xt-button-bg-color: var(--xt-color-warning-light-9);
517
551
  --xt-button-border-color: var(--xt-color-warning-light-5);
@@ -519,13 +553,38 @@
519
553
  --xt-button-hover-bg-color: var(--xt-color-warning);
520
554
  --xt-button-hover-border-color: var(--xt-color-warning);
521
555
  --xt-button-active-text-color: var(--xt-color-white);
522
-
556
+ --xt-button-active-bg-color: var(--xt-color-warning);
557
+ --xt-button-active-border-color: var(--xt-color-warning);
523
558
  &.is-disabled {
524
559
  color: var(--xt-color-warning-light-5);
525
560
  background-color: var(--xt-color-warning-light-9);
526
561
  border-color: var(--xt-color-warning-light-8);
527
562
  }
528
563
  }
564
+ &.is-text {
565
+ --xt-button-text-color: var(--xt-color-warning);
566
+ --xt-button-hover-text-color: var(--xt-color-warning-light-3);
567
+ --xt-button-active-text-color: var(--xt-color-warning-dark-2);
568
+ --xt-button-bg-color: transparent;
569
+ --xt-button-border-color: transparent;
570
+ --xt-button-hover-bg-color: transparent;
571
+ --xt-button-active-bg-color: transparent;
572
+ &.is-disabled {
573
+ color: var(--xt-color-warning-light-5);
574
+ }
575
+ }
576
+ &.is-link {
577
+ --xt-button-text-color: var(--xt-color-warning);
578
+ --xt-button-hover-text-color: var(--xt-color-warning-light-3);
579
+ --xt-button-active-text-color: var(--xt-color-warning-dark-2);
580
+ --xt-button-bg-color: transparent;
581
+ --xt-button-border-color: transparent;
582
+ --xt-button-hover-bg-color: transparent;
583
+ --xt-button-active-bg-color: transparent;
584
+ &.is-disabled {
585
+ color: var(--xt-color-warning-light-5);
586
+ }
587
+ }
529
588
 
530
589
  &.is-dashed {
531
590
  --xt-button-text-color: var(--xt-color-warning);
@@ -563,9 +622,7 @@
563
622
  --xt-button-disabled-bg-color: var(--xt-color-danger-light-5);
564
623
  --xt-button-disabled-border-color: var(--xt-color-danger-light-5);
565
624
 
566
- &.is-plain,
567
- &.is-text,
568
- &.is-link {
625
+ &.is-plain {
569
626
  --xt-button-text-color: var(--xt-color-danger);
570
627
  --xt-button-bg-color: var(--xt-color-danger-light-9);
571
628
  --xt-button-border-color: var(--xt-color-danger-light-5);
@@ -573,13 +630,38 @@
573
630
  --xt-button-hover-bg-color: var(--xt-color-danger);
574
631
  --xt-button-hover-border-color: var(--xt-color-danger);
575
632
  --xt-button-active-text-color: var(--xt-color-white);
576
-
633
+ --xt-button-active-bg-color: var(--xt-color-danger);
634
+ --xt-button-active-border-color: var(--xt-color-danger);
577
635
  &.is-disabled {
578
636
  color: var(--xt-color-danger-light-5);
579
637
  background-color: var(--xt-color-danger-light-9);
580
638
  border-color: var(--xt-color-danger-light-8);
581
639
  }
582
640
  }
641
+ &.is-text {
642
+ --xt-button-text-color: var(--xt-color-danger);
643
+ --xt-button-hover-text-color: var(--xt-color-danger-light-3);
644
+ --xt-button-active-text-color: var(--xt-color-danger-dark-2);
645
+ --xt-button-bg-color: transparent;
646
+ --xt-button-border-color: transparent;
647
+ --xt-button-hover-bg-color: transparent;
648
+ --xt-button-active-bg-color: transparent;
649
+ &.is-disabled {
650
+ color: var(--xt-color-danger-light-5);
651
+ }
652
+ }
653
+ &.is-link {
654
+ --xt-button-text-color: var(--xt-color-danger);
655
+ --xt-button-hover-text-color: var(--xt-color-danger-light-3);
656
+ --xt-button-active-text-color: var(--xt-color-danger-dark-2);
657
+ --xt-button-bg-color: transparent;
658
+ --xt-button-border-color: transparent;
659
+ --xt-button-hover-bg-color: transparent;
660
+ --xt-button-active-bg-color: transparent;
661
+ &.is-disabled {
662
+ color: var(--xt-color-danger-light-5);
663
+ }
664
+ }
583
665
 
584
666
  &.is-dashed {
585
667
  --xt-button-text-color: var(--xt-color-danger);
@@ -617,9 +699,7 @@
617
699
  --xt-button-disabled-bg-color: var(--xt-color-info-light-5);
618
700
  --xt-button-disabled-border-color: var(--xt-color-info-light-5);
619
701
 
620
- &.is-plain,
621
- &.is-text,
622
- &.is-link {
702
+ &.is-plain {
623
703
  --xt-button-text-color: var(--xt-color-info);
624
704
  --xt-button-bg-color: var(--xt-color-info-light-9);
625
705
  --xt-button-border-color: var(--xt-color-info-light-5);
@@ -627,14 +707,38 @@
627
707
  --xt-button-hover-bg-color: var(--xt-color-info);
628
708
  --xt-button-hover-border-color: var(--xt-color-info);
629
709
  --xt-button-active-text-color: var(--xt-color-white);
630
-
710
+ --xt-button-active-bg-color: var(--xt-color-info);
711
+ --xt-button-active-border-color: var(--xt-color-info);
631
712
  &.is-disabled {
632
713
  color: var(--xt-color-info-light-5);
633
714
  background-color: var(--xt-color-info-light-9);
634
715
  border-color: var(--xt-color-info-light-8);
635
716
  }
636
717
  }
637
-
718
+ &.is-text {
719
+ --xt-button-text-color: var(--xt-color-info);
720
+ --xt-button-hover-text-color: var(--xt-color-info-light-3);
721
+ --xt-button-active-text-color: var(--xt-color-info-dark-2);
722
+ --xt-button-bg-color: transparent;
723
+ --xt-button-border-color: transparent;
724
+ --xt-button-hover-bg-color: transparent;
725
+ --xt-button-active-bg-color: transparent;
726
+ &.is-disabled {
727
+ color: var(--xt-color-info-light-5);
728
+ }
729
+ }
730
+ &.is-link {
731
+ --xt-button-text-color: var(--xt-color-info);
732
+ --xt-button-hover-text-color: var(--xt-color-info-light-3);
733
+ --xt-button-active-text-color: var(--xt-color-info-dark-2);
734
+ --xt-button-bg-color: transparent;
735
+ --xt-button-border-color: transparent;
736
+ --xt-button-hover-bg-color: transparent;
737
+ --xt-button-active-bg-color: transparent;
738
+ &.is-disabled {
739
+ color: var(--xt-color-info-light-5);
740
+ }
741
+ }
638
742
  &.is-dashed {
639
743
  --xt-button-text-color: var(--xt-color-info);
640
744
  --xt-button-bg-color: var(--xt-color-info-light-9);
package/src/components/xt-input/index.vue CHANGED
@@ -1,37 +1,66 @@
1
- <template>
2
- <div class="xt-input">
3
- <el-input
4
- :value="value"
5
- :placeholder="placeholder"
6
- :style="inputStyle"
7
- @input="$emit('input', $event)"
8
- />
9
- </div>
10
- </template>
11
-
12
- <script>
13
- export default {
14
- name: 'XtInput',
15
- props: {
16
- value: [String, Number],
17
- placeholder: {
18
- type: String,
19
- default: '请输入内容'
20
- },
21
- color: {
22
- type: String,
23
- default: ''
24
- }
25
- },
26
- computed: {
27
- inputStyle() {
28
- if (this.color) {
29
- return {
30
- '--xt-input-focus-color': this.color
31
- }
32
- }
33
- return {}
34
- }
35
- }
36
- }
37
- </script>
1
+ <template>
2
+ <div
3
+ class="xt-input"
4
+ :class="[
5
+ size ? 'xt-input--' + size : '',
6
+ { 'is-disabled': disabled }
7
+ ]"
8
+ >
9
+ <el-input
10
+ :value="value"
11
+ :placeholder="placeholder"
12
+ :type="type"
13
+ :size="size"
14
+ :disabled="disabled"
15
+ :readonly="readonly"
16
+ :style="inputStyle"
17
+ @input="$emit('input', $event)"
18
+ @change="$emit('change', $event)"
19
+ @focus="$emit('focus', $event)"
20
+ @blur="$emit('blur', $event)"
21
+ />
22
+ </div>
23
+ </template>
24
+
25
+ <script>
26
+ export default {
27
+ name: 'XtInput',
28
+ props: {
29
+ value: [String, Number],
30
+ placeholder: {
31
+ type: String,
32
+ default: '请输入内容'
33
+ },
34
+ type: {
35
+ type: String,
36
+ default: 'text'
37
+ },
38
+ size: {
39
+ type: String,
40
+ default: ''
41
+ },
42
+ disabled: {
43
+ type: Boolean,
44
+ default: false
45
+ },
46
+ readonly: {
47
+ type: Boolean,
48
+ default: false
49
+ },
50
+ color: {
51
+ type: String,
52
+ default: ''
53
+ }
54
+ },
55
+ computed: {
56
+ inputStyle() {
57
+ if (this.color) {
58
+ return {
59
+ '--xt-input-focus-color': this.color
60
+ }
61
+ }
62
+ return {}
63
+ }
64
+ }
65
+ }
66
+ </script>
package/src/components/xt-input/style/index.scss CHANGED
@@ -1,27 +1,84 @@
1
1
  @import '../../../styles/variables.scss';
2
2
 
3
- .xt-input .el-input__inner {
3
+ // 基础变量定义 - 通过组件顶层设置统一的 CSS 变量
4
+ .xt-input {
5
+ --xt-input-bg-color: var(--xt-fill-color-blank, #ffffff);
6
+ --xt-input-text-color: var(--xt-text-color-regular, #606266);
7
+ --xt-input-border-color: var(--xt-border-color, #dcdfe6);
8
+ --xt-input-border-color-hover: var(--xt-border-color-dark, #c0c4cc);
9
+ --xt-input-border-color-focus: var(--xt-color-primary, #1890ff);
10
+ --xt-input-placeholder-color: var(--xt-text-color-placeholder, #c0c4cc);
11
+ --xt-input-disabled-bg-color: var(--xt-fill-color-light, #f5f7fa);
12
+ --xt-input-disabled-text-color: var(--xt-text-color-placeholder, #c0c4cc);
13
+ --xt-input-disabled-border-color: var(--xt-border-color-light, #e4e7ed);
4
14
  --xt-input-focus-color: var(--xt-color-primary, #1890ff);
5
-
6
- background-color: var(--xt-input-bg-color, #ffffff);
7
- border-color: var(--xt-input-border-color, #DCDFE6);
8
- color: var(--xt-input-text-color, #303133);
9
- font-size: var(--xt-font-size-base, 14px);
15
+ --xt-input-border-radius: var(--xt-border-radius-base, 4px);
16
+ --xt-input-font-size: var(--xt-font-size-base, 14px);
17
+ --xt-input-height: 32px;
18
+ --xt-input-padding-x: 15px;
19
+ }
20
+
21
+ // 尺寸：small
22
+ .xt-input--small {
23
+ --xt-input-height: 28px;
24
+ --xt-input-font-size: var(--xt-font-size-small, 12px);
25
+ --xt-input-padding-x: 10px;
26
+ }
27
+
28
+ // 尺寸：medium（默认，无需单独覆盖）
29
+ .xt-input--medium {
30
+ --xt-input-height: 32px;
31
+ --xt-input-font-size: var(--xt-font-size-base, 14px);
32
+ --xt-input-padding-x: 15px;
33
+ }
34
+
35
+ // 尺寸：large
36
+ .xt-input--large {
37
+ --xt-input-height: 40px;
38
+ --xt-input-font-size: var(--xt-font-size-large, 16px);
39
+ --xt-input-padding-x: 16px;
40
+ }
41
+
42
+ // 内部结构样式（Element UI 2.x 结构）
43
+ .xt-input .el-input {
44
+ height: var(--xt-input-height);
45
+ }
46
+
47
+ .xt-input .el-input__inner {
48
+ background-color: var(--xt-input-bg-color);
49
+ border-color: var(--xt-input-border-color);
50
+ color: var(--xt-input-text-color);
51
+ font-size: var(--xt-input-font-size);
52
+ border-radius: var(--xt-input-border-radius);
53
+ height: var(--xt-input-height);
54
+ line-height: var(--xt-input-height);
55
+ padding: 0 var(--xt-input-padding-x);
56
+ transition: border-color var(--xt-transition-duration-fast, 0.2s) ease;
10
57
  }
11
58
 
12
59
  .xt-input .el-input__inner::placeholder {
13
- color: var(--xt-input-placeholder-color, #C0C4CC);
60
+ color: var(--xt-input-placeholder-color);
14
61
  }
15
62
 
63
+ // hover 状态
64
+ .xt-input .el-input__inner:hover {
65
+ border-color: var(--xt-input-border-color-hover);
66
+ }
67
+
68
+ // focus 状态
16
69
  .xt-input .el-input__inner:focus {
17
- border-color: var(--xt-input-focus-color);
70
+ border-color: var(--xt-input-border-color-focus);
18
71
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--xt-input-focus-color) 20%, transparent);
19
72
  }
20
73
 
21
- .xt-input .el-input {
22
- height: var(--xt-input-height, 32px);
74
+ // disabled 状态
75
+ .xt-input.is-disabled .el-input__inner {
76
+ background-color: var(--xt-input-disabled-bg-color);
77
+ border-color: var(--xt-input-disabled-border-color);
78
+ color: var(--xt-input-disabled-text-color);
79
+ cursor: not-allowed;
23
80
  }
24
81
 
25
- .xt-input .el-input .el-input__wrapper {
26
- padding: 0 var(--xt-input-padding-x, 15px);
27
- }
82
+ .xt-input.is-disabled .el-input__inner::placeholder {
83
+ color: var(--xt-input-disabled-text-color);
84
+ }