完善选择器
parent
2a66edd1c5
commit
aa5765971e
|
@ -578,3 +578,5 @@
|
||||||
@radius-progress-border: 5px;
|
@radius-progress-border: 5px;
|
||||||
|
|
||||||
@transition-theme: .4s ease;
|
@transition-theme: .4s ease;
|
||||||
|
|
||||||
|
@form-radius: 3px;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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}';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue