有關插槽-想給插槽增加默認值的優雅解決方式
在使用小程式組件的slot插槽的時候，我們發現這個插槽是不能給默認值的，并不像vue和react那么好用，原因是我們不能給插槽提供默認值，在使用組件的時候傳值就不顯示默認值，
最簡單的方式當然是使用一個布爾型別的變數，通過wx:if和wx:else來控制是顯示插槽的值，還是顯示組件內部的默認值，
很明顯，這個方式不優雅，不是我們大多數人所希望的，
事實上，還是有一種方式可以優雅的解決這個問題，需要利用css的一些特性，
我們可以使用一個empty偽類來解決，
<view class="header">
<!-- 標題 -->
<view class="title">{{title}}</view>
<view class="slot">
<slot></slot>
</view>
<!-- 插槽不傳遞值的時候，則作為默認值顯示 默認情況下 我們不讓其顯示 -->
<view class="right">
<text class="right-title">{{rightText}}</text>
<!-- 圖示 -->
<image class="icon" src="../common/images/icon/arrow-right.png"/>
</view>
</view>
樣式采用的是less進行書寫
/* components/area-header/index.wxss */
.header {
height: 80rpx;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.title {
color: #000;
font-weight: bold;
font-size: 34rpx;
}
// 默認插槽是否顯示 如果默認插槽組件內是空的，也就是沒有傳組件，此時<slot/>
// 標簽在渲染的時候，會消失，則slot標簽的父容器此時為空
.slot:empty + .right {
// 插槽是空 則顯示默認插槽
display: block;
}
.right {
// 默認情況 我們認為插槽會傳值 則不顯示
display: none;
.right-title {
font-size: 28rpx;
color: #bbb;
line-height: 80rpx;
text-align: center;
}
.icon {
// 圖片 文字對齊方式
vertical-align: middle;
height: 48rpx;
width: 48rpx;
}
}
}
如果我們沒有給插槽傳值，則會顯示下面類名為right的標簽：
如果我們在使用組件的時候，給插槽傳值了，則會顯示我們傳入的值：
可以解決多使用變數，在給插槽傳值的時候，還需要使用變數控制默認標簽是否顯示的問題，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/403984.html
標籤：其他
上一篇：【Spring Boot實戰教程】Spring Boot + Vue + 移動端專案開發實戰教程（十四、文章功能實作（上））