65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<template>
|
||
<view class="fixed-btn" id="fixedBtn">
|
||
<div class="btn">
|
||
<u-button type="primary" :shape="shape" size="large">添加</u-button>
|
||
</div>
|
||
<div class="btn" v-if="showCancel">
|
||
<u-button shape="circle" size="large">取消</u-button>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, nextTick } from 'vue';
|
||
|
||
const props = defineProps({
|
||
confirmText: {
|
||
type: String,
|
||
default: '添加'
|
||
},
|
||
showCancel: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
shape: {
|
||
type: String,
|
||
default: 'squre' // squre circle
|
||
}
|
||
});
|
||
|
||
const emits = defineEmits(['load']);
|
||
|
||
function load() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.selectComponent('#fixedBtn') // 若用ref，需注意：ref是字符串时，这里用#ref值；ref是变量时需其他方式
|
||
.boundingClientRect((data) => {
|
||
console.log('组件内元素高度：', data?.height);
|
||
})
|
||
.exec();
|
||
}
|
||
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
load();
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.fixed-btn {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
gap: 20upx;
|
||
flex-direction: column;
|
||
padding: 20upx 28upx calc(40upx + env(safe-area-inset-bottom) / 2) 20upx;
|
||
background-color: #fff;
|
||
.btn {
|
||
flex: 1;
|
||
}
|
||
}
|
||
</style>
|