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

你可能感兴趣的:(uni-app)