You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
454 lines
11 KiB
454 lines
11 KiB
<template> |
|
<!-- #ifdef APP-NVUE --> |
|
<cell> |
|
<!-- #endif --> |
|
|
|
<view :class="{ 'uni-list-item--disabled': disabled }" |
|
:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'" |
|
class="uni-list-item" @click="onClick"> |
|
<view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view> |
|
<view class="uni-list-item__container" |
|
:class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }"> |
|
<slot name="header"> |
|
<view class="uni-list-item__header"> |
|
<view v-if="thumb" class="uni-list-item__icon"> |
|
<image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" /> |
|
</view> |
|
<view v-else-if="showExtraIcon" class="uni-list-item__icon"> |
|
<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" /> |
|
</view> |
|
</view> |
|
</slot> |
|
<slot name="body"> |
|
<view class="uni-list-item__content" |
|
:class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }"> |
|
<text v-if="title" class="uni-list-item__content-title" |
|
:class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text> |
|
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text> |
|
</view> |
|
</slot> |
|
<slot name="footer"> |
|
<view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra" |
|
:class="{ 'flex--justify': direction === 'column' }"> |
|
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text> |
|
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" :custom-style="badgeStyle" /> |
|
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" |
|
@change="onSwitchChange" /> |
|
</view> |
|
</slot> |
|
</view> |
|
<uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" /> |
|
</view> |
|
<!-- #ifdef APP-NVUE --> |
|
</cell> |
|
<!-- #endif --> |
|
</template> |
|
|
|
<script> |
|
/** |
|
* ListItem 列表子组件 |
|
* @description 列表子组件 |
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=24 |
|
* @property {String} title 标题 |
|
* @property {String} note 描述 |
|
* @property {String} thumb 左侧缩略图，若thumb有值，则不会显示扩展图标 |
|
* @property {String} thumbSize = [lg|base|sm] 略缩图大小 |
|
* @value lg 大图 |
|
* @value base 一般 |
|
* @value sm 小图 |
|
* @property {String} badgeText 数字角标内容 |
|
* @property {String} badgeType 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21) |
|
* @property {Object} badgeStyle 数字角标样式 |
|
* @property {String} rightText 右侧文字内容 |
|
* @property {Boolean} disabled = [true|false] 是否禁用 |
|
* @property {Boolean} clickable = [true|false] 是否开启点击反馈 |
|
* @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈 |
|
* @value navigateTo 同 uni.navigateTo() |
|
* @value redirectTo 同 uni.redirectTo() |
|
* @value reLaunch 同 uni.reLaunch() |
|
* @value switchTab 同 uni.switchTab() |
|
* @property {String | PageURIString} to 跳转目标页面 |
|
* @property {Boolean} showBadge = [true|false] 是否显示数字角标 |
|
* @property {Boolean} showSwitch = [true|false] 是否显示Switch |
|
* @property {Boolean} switchChecked = [true|false] Switch是否被选中 |
|
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标 |
|
* @property {Object} extraIcon 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'} |
|
* @property {String} direction = [row|column] 排版方向 |
|
* @value row 水平排列 |
|
* @value column 垂直排列 |
|
* @event {Function} click 点击 uniListItem 触发事件 |
|
* @event {Function} switchChange 点击切换 Switch 时触发 |
|
*/ |
|
export default { |
|
name: 'UniListItem', |
|
emits: ['click', 'switchChange'], |
|
props: { |
|
direction: { |
|
type: String, |
|
default: 'row' |
|
}, |
|
title: { |
|
type: String, |
|
default: '' |
|
}, |
|
note: { |
|
type: String, |
|
default: '' |
|
}, |
|
ellipsis: { |
|
type: [Number,String], |
|
default: 0 |
|
}, |
|
disabled: { |
|
type: [Boolean, String], |
|
default: false |
|
}, |
|
clickable: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
showArrow: { |
|
type: [Boolean, String], |
|
default: false |
|
}, |
|
link: { |
|
type: [Boolean, String], |
|
default: false |
|
}, |
|
to: { |
|
type: String, |
|
default: '' |
|
}, |
|
showBadge: { |
|
type: [Boolean, String], |
|
default: false |
|
}, |
|
showSwitch: { |
|
type: [Boolean, String], |
|
default: false |
|
}, |
|
switchChecked: { |
|
type: [Boolean, String], |
|
default: false |
|
}, |
|
badgeText: { |
|
type: String, |
|
default: '' |
|
}, |
|
badgeType: { |
|
type: String, |
|
default: 'success' |
|
}, |
|
badgeStyle:{ |
|
type: Object, |
|
default () { |
|
return {} |
|
} |
|
}, |
|
rightText: { |
|
type: String, |
|
default: '' |
|
}, |
|
thumb: { |
|
type: String, |
|
default: '' |
|
}, |
|
thumbSize: { |
|
type: String, |
|
default: 'base' |
|
}, |
|
showExtraIcon: { |
|
type: [Boolean, String], |
|
default: false |
|
}, |
|
extraIcon: { |
|
type: Object, |
|
default () { |
|
return { |
|
type: '', |
|
color: '#000000', |
|
size: 20 |
|
}; |
|
} |
|
}, |
|
border: { |
|
type: Boolean, |
|
default: true |
|
} |
|
}, |
|
// inject: ['list'], |
|
data() { |
|
return { |
|
isFirstChild: false |
|
}; |
|
}, |
|
mounted() { |
|
this.list = this.getForm() |
|
// 判断是否存在 uni-list 组件 |
|
if (this.list) { |
|
if (!this.list.firstChildAppend) { |
|
this.list.firstChildAppend = true; |
|
this.isFirstChild = true; |
|
} |
|
} |
|
}, |
|
methods: { |
|
/** |
|
* 获取父元素实例 |
|
*/ |
|
getForm(name = 'uniList') { |
|
let parent = this.$parent; |
|
let parentName = parent.$options.name; |
|
while (parentName !== name) { |
|
parent = parent.$parent; |
|
if (!parent) return false |
|
parentName = parent.$options.name; |
|
} |
|
return parent; |
|
}, |
|
onClick() { |
|
if (this.to !== '') { |
|
this.openPage(); |
|
return; |
|
} |
|
if (this.clickable || this.link) { |
|
this.$emit('click', { |
|
data: {} |
|
}); |
|
} |
|
}, |
|
onSwitchChange(e) { |
|
this.$emit('switchChange', e.detail); |
|
}, |
|
openPage() { |
|
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) { |
|
this.pageApi(this.link); |
|
} else { |
|
this.pageApi('navigateTo'); |
|
} |
|
}, |
|
pageApi(api) { |
|
let callback = { |
|
url: this.to, |
|
success: res => { |
|
this.$emit('click', { |
|
data: res |
|
}); |
|
}, |
|
fail: err => { |
|
this.$emit('click', { |
|
data: err |
|
}); |
|
} |
|
} |
|
switch (api) { |
|
case 'navigateTo': |
|
uni.navigateTo(callback) |
|
break |
|
case 'redirectTo': |
|
uni.redirectTo(callback) |
|
break |
|
case 'reLaunch': |
|
uni.reLaunch(callback) |
|
break |
|
case 'switchTab': |
|
uni.switchTab(callback) |
|
break |
|
default: |
|
uni.navigateTo(callback) |
|
} |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss"> |
|
$uni-font-size-sm:12px; |
|
$uni-font-size-base:14px; |
|
$uni-font-size-lg:16px; |
|
$uni-spacing-col-lg: 12px; |
|
$uni-spacing-row-lg: 15px; |
|
$uni-img-size-sm:20px; |
|
$uni-img-size-base:26px; |
|
$uni-img-size-lg:40px; |
|
$uni-border-color:#e5e5e5; |
|
$uni-bg-color-hover:#f1f1f1; |
|
$uni-text-color-grey:#999; |
|
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg; |
|
.uni-list-item { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
font-size: $uni-font-size-lg; |
|
position: relative; |
|
justify-content: space-between; |
|
align-items: center; |
|
background-color: #fff; |
|
flex-direction: row; |
|
/* #ifdef H5 */ |
|
cursor: pointer; |
|
/* #endif */ |
|
} |
|
.uni-list-item--disabled { |
|
opacity: 0.3; |
|
} |
|
.uni-list-item--hover { |
|
background-color: $uni-bg-color-hover; |
|
} |
|
.uni-list-item__container { |
|
position: relative; |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: row; |
|
padding: $list-item-pd; |
|
padding-left: $uni-spacing-row-lg; |
|
flex: 1; |
|
overflow: hidden; |
|
// align-items: center; |
|
} |
|
.container--right { |
|
padding-right: 0; |
|
} |
|
// .border--left { |
|
// margin-left: $uni-spacing-row-lg; |
|
// } |
|
.uni-list--border { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
left: 0; |
|
/* #ifdef APP-NVUE */ |
|
border-top-color: $uni-border-color; |
|
border-top-style: solid; |
|
border-top-width: 0.5px; |
|
/* #endif */ |
|
} |
|
/* #ifndef APP-NVUE */ |
|
.uni-list--border:after { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
left: 0; |
|
height: 1px; |
|
content: ''; |
|
-webkit-transform: scaleY(0.5); |
|
transform: scaleY(0.5); |
|
background-color: $uni-border-color; |
|
} |
|
/* #endif */ |
|
.uni-list-item__content { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
padding-right: 8px; |
|
flex: 1; |
|
color: #3b4144; |
|
// overflow: hidden; |
|
flex-direction: column; |
|
justify-content: space-between; |
|
overflow: hidden; |
|
} |
|
.uni-list-item__content--center { |
|
justify-content: center; |
|
} |
|
.uni-list-item__content-title { |
|
font-size: $uni-font-size-base; |
|
color: #3b4144; |
|
overflow: hidden; |
|
} |
|
.uni-list-item__content-note { |
|
margin-top: 6rpx; |
|
color: $uni-text-color-grey; |
|
font-size: $uni-font-size-sm; |
|
overflow: hidden; |
|
} |
|
.uni-list-item__extra { |
|
// width: 25%; |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: row; |
|
justify-content: flex-end; |
|
align-items: center; |
|
} |
|
.uni-list-item__header { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
flex-direction: row; |
|
align-items: center; |
|
} |
|
.uni-list-item__icon { |
|
margin-right: 18rpx; |
|
flex-direction: row; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
.uni-list-item__icon-img { |
|
/* #ifndef APP-NVUE */ |
|
display: block; |
|
/* #endif */ |
|
height: $uni-img-size-base; |
|
width: $uni-img-size-base; |
|
margin-right: 10px; |
|
} |
|
.uni-icon-wrapper { |
|
/* #ifndef APP-NVUE */ |
|
display: flex; |
|
/* #endif */ |
|
align-items: center; |
|
padding: 0 10px; |
|
} |
|
.flex--direction { |
|
flex-direction: column; |
|
/* #ifndef APP-NVUE */ |
|
align-items: initial; |
|
/* #endif */ |
|
} |
|
.flex--justify { |
|
/* #ifndef APP-NVUE */ |
|
justify-content: initial; |
|
/* #endif */ |
|
} |
|
.uni-list--lg { |
|
height: $uni-img-size-lg; |
|
width: $uni-img-size-lg; |
|
} |
|
.uni-list--base { |
|
height: $uni-img-size-base; |
|
width: $uni-img-size-base; |
|
} |
|
.uni-list--sm { |
|
height: $uni-img-size-sm; |
|
width: $uni-img-size-sm; |
|
} |
|
.uni-list-item__extra-text { |
|
color: $uni-text-color-grey; |
|
font-size: $uni-font-size-sm; |
|
} |
|
.uni-ellipsis-1 { |
|
/* #ifndef APP-NVUE */ |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
/* #endif */ |
|
/* #ifdef APP-NVUE */ |
|
lines: 1; |
|
text-overflow:ellipsis; |
|
/* #endif */ |
|
} |
|
.uni-ellipsis-2 { |
|
/* #ifndef APP-NVUE */ |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
/* #endif */ |
|
/* #ifdef APP-NVUE */ |
|
lines: 2; |
|
text-overflow:ellipsis; |
|
/* #endif */ |
|
} |
|
</style>
|
|
|