<i-bottom-popup v-model:show="showBottomPopup">
<view style="height:400rpx;"><text>测试v-model:xxx语法</text></view>
</i-bottom-popup>
<template>
<view @touchmove.stop.prevent>
<view
class="tui-bottom-popup"
:class="{ 'tui-popup-show': show, 'tui-popup-radius': radius }"
:style="{ backgroundColor: backgroundColor, height: height ? height + 'rpx' : 'auto', zIndex: zIndex, transform: `translate3d(0, ${show ? translateY : '100%'}, 0)` }"
>
<slot></slot>
</view>
<view v-if="mask" class="tui-popup-mask" :class="[show ? 'tui-mask-show' : '']" :style="{ zIndex: maskZIndex }" @tap="handleClose"></view>
</view>
</template>
<script>
import { defineComponent, computed, watch } from 'vue'
export default defineComponent({
name: 'iBottomPopup',
emits: ['update:show', 'close'],
props: {
//是否需要mask
mask: {
type: Boolean,
default: true
},
//控制显示
show: {
type: Boolean,
default: false
},
//背景颜色
backgroundColor: {
type: String,
default: '#fff'
},
//高度 rpx
height: {
type: Number,
default: 0
},
//设置圆角
radius: {
type: Boolean,
default: true
},
zIndex: {
type: [Number, String],
default: 997
},
maskZIndex: {
type: [Number, String],
default: 996
},
//弹层显示时,垂直方向移动的距离
translateY: {
type: String,
default: '0'
}
},
setup(props, context) {
const { emit } = context
watch(
() => props.show,
nVal => {
console.log('watch: ', nVal)
emit('update:show', nVal)
}
)
const handleClose = () => {
if (!props.show) {
return
}
emit('update:show', false)
}
return {
handleClose
}
}
})
</script>
<style lang="scss" scoped>
.tui-bottom-popup {
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transform: translate3d(0, 100%, 0);
transform-origin: center;
transition: all 0.3s ease-in-out;
min-height: 30rpx;
}
.tui-popup-radius {
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
padding-bottom: env(safe-area-inset-bottom);
overflow: hidden;
}
.tui-popup-show {
opacity: 1;
}
.tui-popup-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
transition: all 0.3s ease-in-out;
opacity: 0;
visibility: hidden;
}
.tui-mask-show {
opacity: 1;
visibility: visible;
}
</style>
- 发布:2021-11-26 15:40
- 更新:2021-12-20 13:44
- 阅读:879
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: Mac big sur 11.6.1
HBuilderX类型: Alpha
HBuilderX版本号: 3.2.15
第三方开发者工具版本号: 1.05.2110290
基础库版本号: 2.21.0
项目创建方式: HBuilderX
示例代码:
操作步骤:
通过设置showBottomPopup为true不能正常显示底部弹窗,点击遮罩层关闭也无法隐藏弹窗
通过设置showBottomPopup为true不能正常显示底部弹窗,点击遮罩层关闭也无法隐藏弹窗
预期结果:
可以通过v-model:show双向绑定显示隐藏底部弹窗
可以通过v-model:show双向绑定显示隐藏底部弹窗
实际结果:
无法正常双向绑定显示隐藏底部弹窗
无法正常双向绑定显示隐藏底部弹窗
bug描述:
uni-app vue3 微信小程序端不支持v-model:xxx属性双向绑定
2 个回复
DCloud_UNI_Anne
后续优化,已加分,感谢您的反馈!
DCloud_UNI_FXY
更新至最新HBuilderX Alpha