parent
74280076b4
commit
b777572112
@ -0,0 +1,225 @@
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowSelector:false,
|
||||
width:300,
|
||||
left:0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initStyle(){
|
||||
const header = document.querySelector('.v-header').getBoundingClientRect()
|
||||
this.width = header.width
|
||||
const select = document.querySelector('.xy-selectors').getBoundingClientRect()
|
||||
this.left = select.left - header.left
|
||||
|
||||
this.$forceUpdate()
|
||||
},
|
||||
|
||||
showSelector(){
|
||||
this.isShowSelector =! this.isShowSelector
|
||||
},
|
||||
renderAdd(){
|
||||
return (<Button
|
||||
class="xy-selectors-btn__item"
|
||||
type='primary'
|
||||
on={{
|
||||
['click']:()=>this.$emit('add')
|
||||
}}>
|
||||
新增
|
||||
</Button>)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initStyle()
|
||||
|
||||
window.onresize = this.initStyle
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null
|
||||
},
|
||||
render(h) {
|
||||
let {isShowSelector,showSelector,$scopedSlots} = this
|
||||
|
||||
return (
|
||||
<div class="xy-selectors">
|
||||
<div v-show={isShowSelector} style={{'width':'100vw','height':'100vh','position':'fixed','top':0,'left':0,'z-index':1}} on={{['click']:()=>this.isShowSelector = false}}></div>
|
||||
<Button
|
||||
icon='md-arrow-dropdown'
|
||||
ghost={isShowSelector}
|
||||
class={isShowSelector ? 'xy-selectors-btn__item xy-selectors-btn__select xy-selectors-btn-active__select' : 'xy-selectors-btn__item xy-selectors-btn__select"'}
|
||||
type='primary'
|
||||
on={{
|
||||
['click']:() => showSelector()
|
||||
}}>
|
||||
高级搜索
|
||||
</Button>
|
||||
|
||||
<transition
|
||||
enter-active-class="scale-enter"
|
||||
leave-to-class="scale-leave">
|
||||
<div class="xy-selectors-card" style={{'width':`${this.width}px`,'left':`-${this.left}px`}} v-show={isShowSelector}>
|
||||
<Icon
|
||||
type="md-close"
|
||||
size={24}
|
||||
class="xy-selectors-card__close"
|
||||
on={{['click']:()=> {
|
||||
this.isShowSelector = false
|
||||
}}}/>
|
||||
<div class="xy-selectors-card-content">
|
||||
{$scopedSlots?.selected ? $scopedSlots?.selected() : ''}
|
||||
{$scopedSlots?.default ? $scopedSlots?.default() : ''}
|
||||
</div>
|
||||
<div class="xy-selectors-card-btn">
|
||||
<Button
|
||||
class="xy-selectors-card-btn__item"
|
||||
type="primary"
|
||||
ghost={true}
|
||||
on={{['click']:()=>{this.$emit('reset')}}}>重置</Button>
|
||||
<Button
|
||||
class="xy-selectors-card-btn__item"
|
||||
type="primary"
|
||||
on={{['click']:()=>{
|
||||
this.$emit('search')
|
||||
this.isShowSelector = false
|
||||
}}}>搜索</Button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.xy-selectors{
|
||||
|
||||
&__item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 8px 20px;
|
||||
|
||||
&--name{
|
||||
width: 100px;
|
||||
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
@import "../../styles/variables";
|
||||
.xy-selectors{
|
||||
|
||||
position: relative;
|
||||
&-btn{
|
||||
//display: flex;
|
||||
//justify-content: flex-start;
|
||||
//align-items: center;
|
||||
&__item{
|
||||
|
||||
//margin-right: 10px;
|
||||
}
|
||||
&__select{
|
||||
|
||||
}
|
||||
&-active__select{
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 2px 10px 1px $primaryColor;
|
||||
|
||||
position: relative;
|
||||
&::after{
|
||||
content:'';
|
||||
height: 12px;
|
||||
background: linear-gradient(to top,rgba(235,238,244,0.98) 40%,#0000 80%,#0000);
|
||||
|
||||
z-index: 5;
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-card{
|
||||
//width: 100%;
|
||||
background: rgba(239,242,250,0.95);
|
||||
border-radius: 0 4px 4px 4px;
|
||||
border: $primaryColor solid 1px;
|
||||
box-shadow: 0 4px 10px 1px $primaryColor;
|
||||
|
||||
z-index: 4;
|
||||
position: absolute;
|
||||
&__close{
|
||||
cursor: pointer;
|
||||
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 14px;
|
||||
}
|
||||
&-content{
|
||||
min-height: 50px;
|
||||
max-height: 400px;
|
||||
overflow: scroll;
|
||||
|
||||
padding: 36px 0 44px 8px;
|
||||
&::-webkit-scrollbar-thumb{
|
||||
background: $primaryColor;
|
||||
}
|
||||
}
|
||||
&-btn{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
background: rgba(239,242,250,0.95);
|
||||
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
&__item{
|
||||
width: 120px;
|
||||
|
||||
margin: 10px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scale-enter{
|
||||
transform-origin: 0 0%;
|
||||
animation: scale-enter 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
@keyframes scale-enter {
|
||||
from{
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
to{
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.scale-leave{
|
||||
transform-origin: 0 0%;
|
||||
animation: scale-leave 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
|
||||
}
|
||||
@keyframes scale-leave {
|
||||
from{
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
}
|
||||
to{
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue