uni-app uniUI 組件

uni-app uniUI 組件

數字角標

<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size" :style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text>

當沒有內容的，是不會顯示內容的

當前組件的屬性（props）通過父組件傳遞進來

Card卡片

基本是對一些屬性得判斷

底部是用 具名插槽

<!-- 自定義底部按鈕 -->
<template v-slot:footer>
    <view class="footer-box">
        <view>喜歡</view>
    </view>
</template>

摺疊面板

• UniCollapse
  • 很簡單

<view class="uni-collapse">
	<slot />
</view>

• (1)在文件中 有個 props ==> accordion(是否開啓手風琴效果)屬性，並且沒在改文件中使用
• (2)provide: provide / inject 這對選項是需要一起使用，以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。
• (3)this.childrens

Combox組合框

<view class="uni-combox__selector" v-if="showSelector">
	<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
		<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
			<text>{{item}}</text>
		</view>
	</scroll-view>
</view>

.uni-combox__selector-scroll {
	max-height: 200px;
	box-sizing: border-box;
}
.uni-combox__selector-item {
    /* #ifdef APP-NVUE */
    display: flex;
    /* #endif */
    line-height: 36px;
    font-size: 14px;
    text-align: center;
    border-bottom: solid 1px #DDDDDD;
    margin: 0px 10px;
}

• 這樣就將每個item放進一個盒子裏面，在Y軸可以滾動

• 其中用到了 Vue中的計算屬性，對傳遞進來的數組根據用戶輸入的內容進行過濾

• watch:

  watch: {
      value: {
          handler(newVal) {
          	this.inputVal = newVal
          },
          immediate: true
          //immediate: true 將立即以表達式的當前值觸發回調：
      }
  },
  

CountDown 倒計時

• 大多是props屬性判斷
• 用的是定時器去讀秒，使用定時器的時候，在 beforeDestroy生命週期中，需要清除定時器

beforeDestroy() {
	clearInterval(this.timer)
}

Drawer 抽屜