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>
|