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