This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

完成number组件的调整

old
宇天 2021-02-24 15:02:39 +08:00
parent 1f889a47fa
commit 9617a7000a
2 changed files with 120 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/form/input.wc
View File

@ -35,7 +35,7 @@ li {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 32px; height: 36px;
font-size: 14px; font-size: 14px;
border: 2px solid var(--color-plain-2); border: 2px solid var(--color-plain-2);
border-radius: inherit; border-radius: inherit;
@ -45,10 +45,10 @@ li {
input { input {
flex: 1; flex: 1;
min-width: 32px; min-width: 36px;
width: 0; width: 0;
height: 100%; height: 100%;
padding: 0 6px; padding: 0 8px;
border: 0; border: 0;
border-radius: inherit; border-radius: inherit;
color: inherit; color: inherit;
@ -69,7 +69,7 @@ li {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: auto; width: auto;
height: 28px; height: 32px;
padding: 0 10px; padding: 0 10px;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
@ -167,7 +167,7 @@ li {
} }
:host([size='large']) { :host([size='large']) {
min-width: 232px; min-width: 234px;
.label { .label {
height: 52px; height: 52px;
font-size: 18px; font-size: 18px;
@ -190,7 +190,7 @@ li {
:host([size='medium']) { :host([size='medium']) {
min-width: 160px; min-width: 160px;
.label { .label {
height: 36px; height: 44px;
input { input {
padding: 0 10px; padding: 0 10px;
@ -198,7 +198,21 @@ li {
} }
.prepend, .prepend,
.append { .append {
height: 40px;
}
}
:host([size='small']) {
min-width: 96px;
.label {
height: 32px; height: 32px;
input {
padding: 0 6px;
}
}
.prepend,
.append {
height: 28px;
} }
} }
:host([size='mini']) { :host([size='mini']) {

145
src/form/number.wc
View File

@ -1,23 +1,23 @@
<template> <template>
<div class="label"> <div class="label">
<span data-act="-">-</span> <span data-act="-">-</span>
<!-- <wc-icon class="icon" is="minus"></wc-icon> -->
<input value="0" maxlength="9" /> <input value="0" maxlength="9" />
<span data-act="+">+</span> <span data-act="+">+</span>
<!-- <wc-icon class="icon" is="plus"></wc-icon> -->
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
:host { :host {
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-flex;
width: 128px; min-width: 128px;
height: 32px; height: 36px;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: var(--color-dark-2); color: var(--color-dark-1);
border-radius: 2px; border-radius: 6px;
cursor: text;
transition: box-shadow 0.15s linear;
} }
.label { .label {
@ -27,7 +27,7 @@
margin: 0 auto; margin: 0 auto;
line-height: 1; line-height: 1;
font-size: 14px; font-size: 14px;
border: 1px solid var(--color-plain-3); border: 2px solid var(--color-plain-2);
border-radius: inherit; border-radius: inherit;
background: var(--bg-color, #fff); background: var(--bg-color, #fff);
color: inherit; color: inherit;
@ -39,17 +39,16 @@
align-items: center; align-items: center;
width: 32px; width: 32px;
height: 100%; height: 100%;
background: var(--bg-color, --color-plain-1);
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
&:first-child { &:first-child {
border-radius: 2px 0 0 2px; border-radius: 4px 0 0 4px;
border-right: 1px solid var(--color-plain-3); border-right: 2px solid var(--color-plain-1);
} }
&:last-child { &:last-child {
border-radius: 0 2px 2px 0; border-radius: 0 4px 4px 0;
border-left: 1px solid var(--color-plain-3); border-left: 2px solid var(--color-plain-1);
} }
&.disabled { &.disabled {
@ -60,16 +59,15 @@
input { input {
flex: 1; flex: 1;
min-width: 0; min-width: 32px;
width: 0; width: 0;
height: 100%; height: 100%;
padding: 0 5px; padding: 0 6px;
border: 0; border: 0;
border-radius: inherit; border-radius: inherit;
color: inherit; color: inherit;
font: inherit;
text-align: center; text-align: center;
font-size: inherit;
font-family: inherit;
background: none; background: none;
outline: none; outline: none;
box-shadow: none; box-shadow: none;
@ -104,12 +102,6 @@
cursor: inherit; cursor: inherit;
} }
} }
:host(:focus-within) {
@include focus1;
}
:host(:focus-within[readonly]) {
@include focus2;
}
/* 额外样式 */ /* 额外样式 */
:host([round]) { :host([round]) {
@ -124,48 +116,111 @@
} }
:host([size='large']) { :host([size='large']) {
width: 192px; min-width: 234px;
height: 42px; height: 52px;
.label { .label {
font-size: 16px; font-size: 18px;
span { span {
width: 48px; width: 52px;
font-size: 24px;
} }
} }
.prepend,
.append {
height: 40px;
}
} }
:host([size='medium']) { :host([size='medium']) {
width: 144px; min-width: 160px;
height: 36px; height: 44px;
.label { .label {
span { span {
width: 36px; width: 44px;
font-size: 22px;
} }
} }
.prepend, }
.append { :host([size='small']) {
height: 34px; min-width: 96px;
height: 32px;
.label {
span {
width: 32px;
}
} }
} }
:host([size='mini']) { :host([size='mini']) {
width: 96px; min-width: 72px;
height: 24px; height: 26px;
.label { .label {
font-size: 12px; font-size: 12px;
span { span {
width: 28px; width: 26px;
} }
} }
.icon {
--size: 16px;
} }
.prepend, //
.append { :host(:focus-within) {
height: 18px; box-shadow: 0 0 0 2px var(--color-plain-a);
}
:host([type='primary']:focus-within) {
box-shadow: 0 0 0 2px var(--color-teal-a);
}
:host([type='default']:focus-within) {
box-shadow: 0 0 0 2px var(--color-grey-a);
}
:host([type='info']:focus-within) {
box-shadow: 0 0 0 2px var(--color-blue-a);
}
:host([type='success']:focus-within) {
box-shadow: 0 0 0 2px var(--color-green-a);
}
:host([type='danger']:focus-within) {
box-shadow: 0 0 0 2px var(--color-red-a);
}
:host([type='warning']:focus-within) {
box-shadow: 0 0 0 2px var(--color-orange-a);
}
:host([type='inverse']:focus-within) {
box-shadow: 0 0 0 2px var(--color-dark-a);
}
:host([type='primary']) .label {
border-color: var(--color-teal-2);
span {
border-color: var(--color-teal-a);
}
}
:host([type='default']) .label {
border-color: var(--color-grey-2);
span {
border-color: var(--color-grey-a);
}
}
:host([type='info']) .label {
border-color: var(--color-blue-2);
span {
border-color: var(--color-blue-a);
}
}
:host([type='success']) .label {
border-color: var(--color-green-2);
span {
border-color: var(--color-green-a);
}
}
:host([type='danger']) .label {
border-color: var(--color-red-2);
span {
border-color: var(--color-red-a);
}
}
:host([type='warning']) .label {
border-color: var(--color-orange-2);
span {
border-color: var(--color-orange-a);
}
}
:host([type='inverse']) .label {
border-color: var(--color-dark-2);
span {
border-color: var(--color-dark-a);
} }
} }
</style> </style>