完善选择器

pull/166/head
lyswhut 2020-03-07 13:21:13 +08:00
parent 2a66edd1c5
commit aa5765971e
7 changed files with 36 additions and 12 deletions

View File

@ -578,3 +578,5 @@
@radius-progress-border: 5px; @radius-progress-border: 5px;
@transition-theme: .4s ease; @transition-theme: .4s ease;
@form-radius: 3px;

View File

@ -24,7 +24,7 @@ export default {
.btn { .btn {
display: inline-block; display: inline-block;
border: none; border: none;
border-radius: 3px; border-radius: @form-radius;
cursor: pointer; cursor: pointer;
padding: 8px 15px; padding: 8px 15px;
color: @color-btn; color: @color-btn;

View File

@ -78,7 +78,7 @@ export default {
button { button {
background-color: transparent; background-color: transparent;
border: none; border: none;
border-radius: 3px; border-radius: @form-radius;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
padding: 4px 7px; padding: 4px 7px;

View File

@ -49,7 +49,7 @@ export default {
.input { .input {
display: inline-block; display: inline-block;
border: none; border: none;
border-radius: 3px; border-radius: @form-radius;
padding: 7px 8px; padding: 7px 8px;
color: @color-btn; color: @color-btn;
outline: none; outline: none;

View File

@ -91,7 +91,7 @@ export default {
button { button {
background-color: transparent; background-color: transparent;
border: none; border: none;
border-radius: 3px; border-radius: @form-radius;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
padding: 4px 7px; padding: 4px 7px;

View File

@ -133,7 +133,7 @@ export default {
@import '../../assets/styles/layout.less'; @import '../../assets/styles/layout.less';
.search { .search {
border-radius: 3px; border-radius: @form-radius;
transition: box-shadow .4s ease, background-color @transition-theme; transition: box-shadow .4s ease, background-color @transition-theme;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;

View File

@ -2,7 +2,7 @@
div(:class="[$style.select, show ? $style.active : '']") div(:class="[$style.select, show ? $style.active : '']")
div(:class="$style.label" ref="dom_btn" @click="handleShow") {{label}} div(:class="$style.label" ref="dom_btn" @click="handleShow") {{label}}
ul(:class="$style.list") ul(:class="$style.list")
li(v-for="item in list" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}} li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
</template> </template>
<script> <script>
@ -70,11 +70,17 @@ export default {
<style lang="less" module> <style lang="less" module>
@import '../../assets/styles/layout.less'; @import '../../assets/styles/layout.less';
@selection-height: 28px;
.select { .select {
font-size: 12px; font-size: 12px;
position: relative; position: relative;
width: 300px;
&.active { &.active {
.label {
background-color: @color-btn-background;
}
.list { .list {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
@ -83,13 +89,16 @@ export default {
} }
.label { .label {
// background-color: @color-btn-background; background-color: @color-btn-background;
padding: 0 10px;
transition: background-color @transition-theme; transition: background-color @transition-theme;
border: 1px solid #ccc; height: @selection-height;
height: 28px; line-height: 27px;
box-sizing: border-box; box-sizing: border-box;
color: @color-btn; color: @color-btn;
border-radius: @form-radius;
cursor: pointer; cursor: pointer;
.mixin-ellipsis-1;
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-theme_2-hover;
@ -101,24 +110,30 @@ export default {
.list { .list {
position: absolute; position: absolute;
top: 100%; top: 0;
left: 0; left: 0;
width: 100%;
background-color: @color-theme_2-background_2; background-color: @color-theme_2-background_2;
opacity: 0; opacity: 0;
transform: scaleY(0); transform: scaleY(0);
transform-origin: 0 0 0; transform-origin: 0 @selection-height / 2 0;
transition: .25s ease; transition: .25s ease;
transition-property: transform, opacity; transition-property: transform, opacity;
z-index: 10; z-index: 10;
border-radius: @form-radius;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
li { li {
cursor: pointer; cursor: pointer;
padding: 8px 15px; padding: 0 10px;
line-height: @selection-height;
// color: @color-btn; // color: @color-btn;
outline: none; outline: none;
transition: background-color @transition-theme; transition: background-color @transition-theme;
background-color: @color-btn-background; background-color: @color-btn-background;
box-sizing: border-box; box-sizing: border-box;
.mixin-ellipsis-1;
&:hover { &:hover {
background-color: @color-theme_2-hover; background-color: @color-theme_2-hover;
@ -126,6 +141,9 @@ export default {
&:active { &:active {
background-color: @color-theme_2-active; background-color: @color-theme_2-active;
} }
&.active {
color: @color-btn;
}
} }
} }
@ -134,6 +152,7 @@ each(@themes, {
:global(#container.@{value}) { :global(#container.@{value}) {
.label { .label {
color: ~'@{color-@{value}-btn}'; color: ~'@{color-@{value}-btn}';
background-color: ~'@{color-@{value}-btn-background}';
&:hover { &:hover {
background-color: ~'@{color-@{value}-theme_2-hover}'; background-color: ~'@{color-@{value}-theme_2-hover}';
} }
@ -153,6 +172,9 @@ each(@themes, {
&:active { &:active {
background-color: ~'@{color-@{value}-theme_2-active}'; background-color: ~'@{color-@{value}-theme_2-active}';
} }
&.active {
color: ~'@{color-@{value}-btn}';
}
} }
} }
} }