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.
61 lines
1.4 KiB
61 lines
1.4 KiB
1 year ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<page-head :title="title"></page-head>
|
||
|
|
<view class="uni-padding-wrap">
|
||
|
|
<view class="uni-btn-v">
|
||
|
|
<button class="target" type="default" @tap="actionSheetTap">弹出action sheet</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: 'action-sheet',
|
||
|
|
buttonRect: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// #ifdef H5
|
||
|
|
onReady() {
|
||
|
|
this.getNodeInfo()
|
||
|
|
window.addEventListener('resize', this.getNodeInfo)
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
window.removeEventListener('resize', this.getNodeInfo)
|
||
|
|
},
|
||
|
|
// #endif
|
||
|
|
methods: {
|
||
|
|
actionSheetTap() {
|
||
|
|
const that = this
|
||
|
|
uni.showActionSheet({
|
||
|
|
title: '标题',
|
||
|
|
itemList: ['item1', 'item2', 'item3', 'item4'],
|
||
|
|
popover: {
|
||
|
|
// 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
|
||
|
|
top: that.buttonRect.top + 104 + that.buttonRect.height,
|
||
|
|
left: that.buttonRect.left + that.buttonRect.width / 2
|
||
|
|
},
|
||
|
|
success: (e) => {
|
||
|
|
console.log(e.tapIndex);
|
||
|
|
uni.showToast({
|
||
|
|
title: "点击了第" + e.tapIndex + "个选项",
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// #ifdef H5
|
||
|
|
getNodeInfo() {
|
||
|
|
uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
|
||
|
|
const rect = ret[0]
|
||
|
|
if (rect) {
|
||
|
|
this.buttonRect = rect
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|