优化组件尺寸设置;dropdown组件支持设置尺寸
parent
a4a8f7dfe1
commit
18119bab27
|
@ -9,8 +9,7 @@
|
||||||
:host {
|
:host {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
min-width: 72px;
|
min-width: 128px;
|
||||||
width: 128px;
|
|
||||||
height: 36px;
|
height: 36px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
@ -51,7 +50,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([size='large']) {
|
:host([size='large']) {
|
||||||
width: 212px;
|
min-width: 212px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|
||||||
|
@ -73,7 +72,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:host([size='medium']) {
|
:host([size='medium']) {
|
||||||
width: 160px;
|
min-width: 160px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
@ -85,7 +84,7 @@
|
||||||
width: 44px;
|
width: 44px;
|
||||||
}
|
}
|
||||||
:host([size='small']) {
|
:host([size='small']) {
|
||||||
width: 96px;
|
min-width: 96px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
:host([size='small'][circle]) {
|
:host([size='small'][circle]) {
|
||||||
|
@ -93,7 +92,7 @@
|
||||||
width: 32px;
|
width: 32px;
|
||||||
}
|
}
|
||||||
:host([size='mini']) {
|
:host([size='mini']) {
|
||||||
width: 72px;
|
min-width: 72px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
|
|
|
@ -11,8 +11,7 @@
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:host {
|
:host {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
min-width: 72px;
|
min-width: 128px;
|
||||||
width: 128px;
|
|
||||||
height: 36px;
|
height: 36px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
@ -85,6 +84,44 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host([size='large']) {
|
||||||
|
min-width: 234px;
|
||||||
|
height: 52px;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
.options-box {
|
||||||
|
top: 52px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([size='medium']) {
|
||||||
|
min-width: 160px;
|
||||||
|
height: 44px;
|
||||||
|
.options-box {
|
||||||
|
top: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([size='small']) {
|
||||||
|
min-width: 96px;
|
||||||
|
height: 32px;
|
||||||
|
.options-box {
|
||||||
|
top: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([size='mini']) {
|
||||||
|
min-width: 72px;
|
||||||
|
height: 26px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
wc-icon {
|
||||||
|
--size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.options-box {
|
||||||
|
top: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:host(:focus-within) {
|
:host(:focus-within) {
|
||||||
box-shadow: 0 0 0 2px var(--color-plain-a);
|
box-shadow: 0 0 0 2px var(--color-plain-a);
|
||||||
}
|
}
|
||||||
|
@ -110,6 +147,7 @@ export default class Dropdown {
|
||||||
props = {
|
props = {
|
||||||
value: '',
|
value: '',
|
||||||
placeholder: '',
|
placeholder: '',
|
||||||
|
size: '',
|
||||||
disabled: false
|
disabled: false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -214,10 +252,24 @@ export default class Dropdown {
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
switch (name) {
|
switch (name) {
|
||||||
|
case 'value':
|
||||||
|
if (val !== null) {
|
||||||
|
this.value = val
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
case 'placeholder':
|
case 'placeholder':
|
||||||
this.__INPUT__.placeholder = val || ''
|
this.__INPUT__.placeholder = val || ''
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case 'size':
|
||||||
|
if (val) {
|
||||||
|
Array.from(this.children).forEach(it => {
|
||||||
|
it.setAttribute('size', val)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
break
|
||||||
|
|
||||||
case 'disabled':
|
case 'disabled':
|
||||||
this.disabled = val !== null
|
this.disabled = val !== null
|
||||||
break
|
break
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 32px;
|
height: 36px;
|
||||||
transition: background 0.15s linear;
|
transition: background 0.15s linear;
|
||||||
color: var(--color-dark-1);
|
color: var(--color-dark-1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -23,6 +23,19 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host([size='large']) {
|
||||||
|
height: 52px;
|
||||||
|
}
|
||||||
|
:host([size='medium']) {
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
:host([size='small']) {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
:host([size='mini']) {
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
:host(:hover),
|
:host(:hover),
|
||||||
:host([active]) {
|
:host([active]) {
|
||||||
label {
|
label {
|
||||||
|
|
|
@ -14,6 +14,8 @@
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
display: block;
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
|
|
||||||
&.load {
|
&.load {
|
||||||
|
|
Reference in New Issue