uni-app uniUI 官方组件源码分析（其实就是vue文件）

uni-app uniUI 官方组件源码分析（其实就是vue文件）

数字角标

<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 抽屉