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.3 KiB

<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: {
top: that.buttonRect.top * 2 + 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() {
let i = 1
console.log(i++)
uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
const rect = ret[0]
if (rect) {
this.buttonRect = rect
}
});
}
// #endif
}
}
</script>