You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.5 KiB
115 lines
2.5 KiB
<template>
|
|
<view>
|
|
<view @longpress.stop="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd">
|
|
<slot></slot>
|
|
</view>
|
|
<view v-if="isShowMenu" class="menu-mask" @touchstart="onClose()" @contextmenu.prevent=""></view>
|
|
<view v-if="isShowMenu" class="menu" :style="menuStyle">
|
|
<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)">
|
|
<text :style="itemStyle(item)"> {{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "long-press-menu",
|
|
data() {
|
|
return {
|
|
isShowMenu: false,
|
|
isTouchMove: false,
|
|
menuStyle: "" // 必须声明，保证响应式
|
|
}
|
|
},
|
|
props: {
|
|
items: {
|
|
type: Array,
|
|
default: () => [] // 默认空数组
|
|
}
|
|
},
|
|
methods: {
|
|
onLongPress(e) {
|
|
if (this.isTouchMove) return
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
const touches = e.touches[0]
|
|
let style = ""
|
|
if (touches.clientY > res.windowHeight / 2) {
|
|
style = `bottom:${res.windowHeight - touches.clientY}px;`
|
|
} else {
|
|
style = `top:${touches.clientY}px;`
|
|
}
|
|
if (touches.clientX > res.windowWidth / 2) {
|
|
style += `right:${res.windowWidth - touches.clientX}px;`
|
|
} else {
|
|
style += `left:${touches.clientX}px;`
|
|
}
|
|
this.menuStyle = style
|
|
this.$nextTick(() => {
|
|
this.isShowMenu = true
|
|
})
|
|
}
|
|
})
|
|
},
|
|
onTouchMove() {
|
|
this.onClose()
|
|
this.isTouchMove = true
|
|
},
|
|
onTouchEnd() {
|
|
this.isTouchMove = false
|
|
},
|
|
onSelectMenu(item) {
|
|
this.$emit("select", item)
|
|
this.isShowMenu = false
|
|
},
|
|
onClose() {
|
|
this.isShowMenu = false
|
|
},
|
|
itemStyle(item) {
|
|
return item.color ? `color:${item.color};` : `color:#000;`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.menu-mask {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
}
|
|
|
|
.menu {
|
|
position: fixed;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
z-index: 1000;
|
|
box-shadow: $im-box-shadow-dark;
|
|
|
|
.menu-item {
|
|
height: 28px;
|
|
min-width: 120rpx;
|
|
line-height: 28px;
|
|
font-size: $im-font-size-small;
|
|
display: flex;
|
|
padding: 6px 20px;
|
|
justify-content: flex-start;
|
|
|
|
&:hover {
|
|
background: $im-bg-active;
|
|
}
|
|
|
|
.menu-icon {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|