uniapp 기반의 드래그 가능한 플로팅 박스는 각 페이지에 연락처 고객 서비스를 추가하는 데 사용됩니다.
구성 요소 mz-floating-box 만들기
<template>
<movable-area class="movable-area" :style="{width:areaWidth+'px',height:areaHeight+'px',zIndex:zindex}">
<movable-view class="movable-view" :style="{width:dragWidth+'px',height:dragHeight+'px'}" :x="x" :y="y" direction="all">
<image :src="kefuUrl" @click="dragClickHandle"></image>
</movable-view>
</movable-area>
</template>
<script>
export default {
name: "mz-floating-box",
props: {
zindex: {
type: String,
default: () => {
return '6'
}
},
x: {
type: String,
default: () => {
return '310'
}
},
y: {
type: String,
default: () => {
return '310'
}
},
dragWidth: {
type: String,
default: () => {
return '40'
}
},
dragHeight: {
type: String,
default: () => {
return '40'
}
}
},
data() {
return {
kefuUrl: require('@/static/kefu.png'),
areaWidth: 300,
areaHeight: 500,
};
},
mounted() {
this.getDeviceInfo().then(response => {
console.log("[]", response)
this.areaWidth = response.windowWidth;
this.areaHeight = response.windowHeight - 200;
})
},
methods: {
/**
* 获取当前设备的信息
* **/
getDeviceInfo() {
return new Promise((resolve, reject) => {
uni.getSystemInfo({
success: (sysInfo) => {
resolve(sysInfo)
}
})
})
},
/**
* 点击触发事件
* **/
dragClickHandle(e) {
e.preventDefault();
console.log("ok")
}
}
}
</script>
<style lang="scss" scoped>
.movable-area {
width: 100%;
height: 100vh;
position: fixed;
top: 100px;
left: 0px;
right: 0px;
bottom: 100px;
pointer-events: none; //鼠标事件可以渗透
.movable-view {
border-radius: 8px;
overflow: hidden;
width: 40px;
height: 40px;
pointer-events: auto; //恢复鼠标事件
background: rgba(255, 255, 255, 0.8);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09);
position: relative;
.image{
width: 100%;
height: 100%;
}
}
}
</style>
직접 사용
<mz-floating-box>,/mz-floating-box>