uniapp实现单选组件覆盖选中样式的方法

2024-04-18 0 786

uniapp实现单选组件覆盖选中样式

uniapp实现单选组件覆盖选中样式的方法

完整代码:

<!– 是否选择组件: trueOfFalseChooseBtn –>
<template>
<view class=\”is-true-body\”>
<view class=\”btn-con\” :class=\”isTrue ? \’btn-con-active\’ : \’\’\” @click=\”clickBtn(true)\”>
<text>是</text>
</view>
<view class=\”btn-con\” :class=\”isTrue ? \’\’ : \’btn-con-active\’\” @click=\”clickBtn(false)\”>
<text>否</text>
</view>
</view>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: true,
},
},
watch: {
isTrue(nv) {
this.$emit(\’input\’, nv)
}
},
data() {
return {
isTrue: this.value,
}
},
methods: {
clickBtn(e) {
this.isTrue = e;
}
}
}
</script>
<style lang=\”scss\” scoped>
.is-true-body {
width: 100%;
display: flex;
justify-content: space-between;
.btn-con {
flex: 1;
height: 40px;
border-radius: 10px;
text-align: center;
line-height: 40px;
position: relative;
border: 1px solid rgba(255, 255, 255, 0);
}
.btn-con-active {
border: 1px solid $uni-color-primary;
}
// 左上角三角形
.btn-con-active::after {
content: \’\’;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 28px solid $uni-color-primary;
border-right: 30px solid rgba(255, 255, 255, 1);
border-radius: 8px 0 0 0;
}
// 左上角勾勾图片
.btn-con-active::before {
content: url(\’@/static/images/icon/gg.svg\’);
position: absolute;
top: -12px;
left: 3px;
width: 10px;
height: 10px;
z-index: 999;
}
}
</style>

补充:

修改uniapp组件默认样式

最近使用uniapp开发,有些组件渲染之后会生成一些标签,需要修改生成标签的样式。比如<uni-data-picker > 等组件,自定义类名还是加重权限均无法覆盖原有样式,解决办法如下:

style标签上加scoped,同时类名前加/deep/ 穿透,即可覆盖原有样式

/deep/ .input-value-border{
border: none;
}

到此这篇关于uniapp实现单选组件覆盖选中样式的文章就介绍到这了,更多相关uniapp内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • uniapp项目实践之全局公共组件样式及方法使用示例详解
  • uniapp组件之tab选项卡滑动切换功能实现
  • uniapp使用u-upload组件来实现图片上传功能
  • Uniapp全局消息提示以及其组件的实现方法
  • uniapp组件uni-popup弹出层的使用

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript uniapp实现单选组件覆盖选中样式的方法 https://www.u-9.cn/biancheng/javascript/186909.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务