关于uniapp + vue3 封装uni弹窗组件里内再使用其他uni组件样式失效
问题: uniapp + vue3 封装uni弹窗组件里内再使用其他uni组件 在弹窗组件内修改样式失效
- 封装一个弹窗自定义组件usePopup 并在弹窗组件内使用uni步进器 以及修改该样式
<template>
<!-- 用法用量组件 -->
<uni-popup ref="popup" type="bottom" :safe-area="false" @touchmove.stop="">
<view class="uniNumber">
<uni-number-box v-model="Quantity":min="1" />
</view>
</unipopup>
</template>
- 在父页面使用该组件修改样式
<template>
<usePopup class='usePopup'/>
</template>
//修改样式弹窗组件内的步进器样式
<style scoped>
.usePopup .uniNumber:deep(.uni-numbox__value) {
border: 0px !important;
background: transparent !important;
width: 60rpx;
height: 60rpx;
}
.usePopup .uniNumber:deep(.uni-numbox__minus) {
background: #ffffff !important;
width: 60rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
color: #000 !important;
border: 1px solid #dad5d5 !important;
}
.usePopup .uniNumber:deep(.uni-numbox__plus) {
background: #ffffff !important;
width: 60rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
color: #000 !important;
border: 1px solid #dad5d5 !important;
}
</style>