uniapp實現(xiàn)單選組件覆蓋選中樣式的方法
更新時間：2024年03月28日 11:26:07 作者：星月前端
最近使用uniapp開發(fā),有些組件渲染之后會生成一些標(biāo)簽,需要修改生成標(biāo)簽的樣式,下面通過實例代碼講解uniapp實現(xiàn)單選組件覆蓋選中樣式的方法,感興趣的朋友一起看看吧
uniapp實現(xiàn)單選組件覆蓋選中樣式
完整代碼：
<!-- 是否選擇組件: 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>補(bǔ)充：
修改uniapp組件默認(rèn)樣式
最近使用uniapp開發(fā)，有些組件渲染之后會生成一些標(biāo)簽，需要修改生成標(biāo)簽的樣式。比如
<uni-data-picker > 等組件，自定義類名還是加重權(quán)限均無法覆蓋原有樣式，解決辦法如下：
style標(biāo)簽上加scoped，同時類名前加/deep/ 穿透，即可覆蓋原有樣式
/deep/ .input-value-border{
border: none;
}到此這篇關(guān)于uniapp實現(xiàn)單選組件覆蓋選中樣式的文章就介紹到這了,更多相關(guān)uniapp內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
我們在做項目的時候，特別是注冊用戶的時候，基本上都需要有注冊協(xié)議之類的東西，那么我們?nèi)绾闻袛嘤脩羰欠窆催x了同意了此協(xié)議呢？2014-06-06
相信大家都遇到過,在各種圖表框架中經(jīng)常會有將一段折線平滑的需求,不僅能給用戶帶來一種柔和的感覺,還能美化界面,讓折線看起來沒那么生硬,這篇文章主要給大家介紹了關(guān)于如何利用Javascript生成平滑曲線的相關(guān)資料,需要的朋友可以參考下
2021-07-07 
快速排序是一種平均性能非常優(yōu)秀的排序算法，在很多場合都會應(yīng)用到他，了解快速排序于對開放高效率的軟件有很重要的作用
2013-12-12 
這篇文章主要介紹了基于JS實現(xiàn)視頻上傳顯示進(jìn)度條,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-05-05 
JAVASCRIPT實現(xiàn)的WEB頁面跳轉(zhuǎn)以及頁面間傳值方法
在WEB頁面中，我們實現(xiàn)頁面跳轉(zhuǎn)的方法通常是用LINK,BUTTON LINK ,IMG LINK等等，由用戶點擊某處，然后直接由瀏覽器幫我們跳轉(zhuǎn)。
2010-05-05 
