<template> <view :class="{ 'uni-collapse-cell--disabled': disabled,'uni-collapse-cell--notdisabled': !disabled, 'uni-collapse-cell--open': isOpen,'uni-collapse-cell--hide':!isOpen }" class="uni-collapse-cell" > <view class="uni-collapse-cell__title" @click="onClick" > <view v-if="iconText" class="uni-collapse-cell__title-iconText" v-bind:style="{background:background}" >{{iconText}}</view> <image v-if="thumb" :src="thumb" class="uni-collapse-cell__title-img" /> <text class="uni-collapse-cell__title-text">{{ title }}</text> <text class="uni-collapse-cell__time-text">{{ time }}</text> <!-- #ifdef MP-ALIPAY --> <view :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__title-arrow" > <uni-icons color="#bbb" size="20" type="arrowdown" /> </view> <!-- #endif --> <!-- #ifndef MP-ALIPAY --> <uni-icons :class="{ 'uni-collapse-cell__title-arrow-active': isOpen, 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__title-arrow" color="#bbb" size="20" type="arrowdown" /> <!-- #endif --> </view> <view :class="{'uni-collapse-cell__content--hide':!isOpen}" class="uni-collapse-cell__content" > <view :class="{ 'uni-collapse-cell--animation': showAnimation === true }" class="uni-collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-100%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-100%)'}" > <slot /> </view> </view> </view> </template> <script> import UniIcons from '../UniIcons/UniIcons.vue' export default { name: 'UniCollapseItem', components: { UniIcons }, props: { title: { // 列表标题 type: String, default: '' }, time: { // 列表时间 朱海涛加的,验光数据需要 type: String, default: '' }, name: { // 唯一标识符 type: [Number, String], default: 0 }, disabled: { // 是否禁用 type: Boolean, default: false }, showAnimation: { // 是否显示动画 type: Boolean, default: false }, open: { // 是否展开 type: Boolean, default: false }, thumb: { // 缩略图 type: String, default: '' }, iconText: { // 名字头像 type: String, default: '' } }, data() { return { isOpen: false, background: '' } }, watch: { open(val) { this.isOpen = val } }, inject: ['collapse'], created() { this.isOpen = this.open this.nameSync = this.name ? this.name : this.collapse.childrens.length this.collapse.childrens.push(this) if (String(this.collapse.accordion) === 'true') { if (this.isOpen) { const lastEl = this.collapse.childrens[this.collapse.childrens.length - 2] if (lastEl) { this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false } } } }, computed: { // 给头像搞个随机背景颜色,验光数据页面需要 getRandomColor() { const r = Math.floor(Math.random() * 256) const g = Math.floor(Math.random() * 256) const b = Math.floor(Math.random() * 256) const color = '#' + r.toString(16) + g.toString(16) + b.toString(16) this.background = color // return color; } }, methods: { onClick() { if (this.disabled) { return } if (String(this.collapse.accordion) === 'true') { this.collapse.childrens.forEach(vm => { if (vm === this) { return } vm.isOpen = false }) } this.isOpen = !this.isOpen this.collapse.onChange && this.collapse.onChange() this.$forceUpdate() // console.log(this.isOpen) } } } </script> <style lang="scss" scoped> @import "@/uni.scss"; .uni-collapse-cell { flex-direction: column; border-color: #ffffff; border-bottom-width: 1px; border-bottom-style: solid; } .uni-collapse-cell--hover { background-color: #ffffff; } .uni-collapse-cell--open { background-color: #ffffff; } .uni-collapse-cell--disabled { background-color: #ffffff; // opacity: 0.3; } .uni-collapse-cell--hide { height: 48px; } .uni-collapse-cell--animation { transition: transform all 0.5s ease; transition-property: transform; transition-duration: 0.5s; transition-timing-function: ease; } .uni-collapse-cell__title { // padding: 12px 12px; font-size: 16px; color: #333333; position: relative; /* #ifndef APP-NVUE */ display: flex; width: 100%; box-sizing: border-box; /* #endif */ height: 48px; line-height: 24px; flex-direction: row; justify-content: space-between; align-items: center; } .uni-collapse-cell__title-iconText { border: 1px solid #ffffff; height: 50rpx; width: 50rpx; border-radius: 26rpx; // background-color: #47A6F0; font-size: 12px; color: #ffffff; line-height: 50rpx; text-align: center; margin-right: 20rpx; } .uni-collapse-cell__title:active { background-color: #ffffff; } .uni-collapse-cell__title-img { height: $uni-img-size-base; width: $uni-img-size-base; margin-right: 10px; // height: 50rpx; // width: 50rpx; // border-radius: 25rpx; // border-radius: 25rpx; } .uni-collapse-cell__title-arrow { width: 20px; height: 20px; transform: rotate(-90deg); transform-origin: center center; } .uni-collapse-cell__title-arrow-active { transform: rotate(0deg); } .uni-collapse-cell__title-text { flex: 1; font-size: $uni-font-size-base; /* #ifndef APP-NVUE */ white-space: nowrap; color: inherit; /* #endif */ /* #ifdef APP-NVUE */ lines: 1; /* #endif */ overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: #333333; } .uni-collapse-cell__time-text { font-size: 12px; color: #999999; margin-right: 20rpx; } .uni-collapse-cell__content { overflow: hidden; } .uni-collapse-cell__wrapper { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; } .uni-collapse-cell__content--hide { // height: 0px; // line-height: 0px; } </style>