79 lines
1.4 KiB
Vue
79 lines
1.4 KiB
Vue
<template>
|
||
<view class="tm-position relative ">
|
||
<view class="tm-position-content">
|
||
<slot name="default"></slot>
|
||
</view>
|
||
<view :style="{
|
||
top:position_s.top==true?0:'null'+'px',
|
||
bottom:position_s.bottom==true?0:'null'+'px',
|
||
transform:`translateY(${offset[1]}px) translateX(${offset[0]}px)`,
|
||
|
||
}" class="tm-position-body absolute" :class="[
|
||
position_s.left?'flex-start':'',
|
||
position_s.right?'flex-end':'',
|
||
]" >
|
||
<slot name="position"></slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 定位组件
|
||
* @property {Object} position = [] 位置{top:false,left:false,right:false,bottom:false}
|
||
* @property {Array} offset = [] 默认：[0,0]，偏移x,y
|
||
*/
|
||
export default {
|
||
name:"tm-position",
|
||
props:{
|
||
position:{
|
||
type:Object,
|
||
default:()=>{
|
||
return {};
|
||
}
|
||
},
|
||
offset:{
|
||
type:Array,
|
||
default:()=>{
|
||
return [0,0];
|
||
}
|
||
},
|
||
|
||
},
|
||
computed:{
|
||
position_s:function(){
|
||
let p = {
|
||
top:false,
|
||
left:false,
|
||
right:false,
|
||
bottom:false
|
||
};
|
||
return {...p,...this.position}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
height:0
|
||
};
|
||
},
|
||
async mounted() {
|
||
// this.$nextTick(async function(){
|
||
// let syinfo = await this.$Querey('.tm-position-content',this).catch(e=>{})
|
||
// console.log(syinfo);
|
||
// this.height = syinfo[0].height;
|
||
// })
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.tm-position{
|
||
.tm-position-body{
|
||
width: 100%;
|
||
}
|
||
.tm-position-content{
|
||
|
||
}
|
||
}
|
||
</style>
|