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.
171 lines
3.0 KiB
171 lines
3.0 KiB
<template> |
|
<view |
|
class="tui-list-class tui-list-cell" |
|
:class="[ |
|
arrow ? 'tui-cell-arrow' : '', |
|
arrow && arrowRight ? '' : 'tui-arrow-right', |
|
unlined ? 'tui-cell-unlined' : '', |
|
lineLeft ? 'tui-line-left' : '', |
|
lineRight ? 'tui-line-right' : '', |
|
arrow && arrowColor ? 'tui-arrow-' + arrowColor : '', |
|
radius ? 'tui-radius' : '' |
|
]" |
|
:hover-class="hover ? 'tui-cell-hover' : ''" |
|
:style="{ backgroundColor: backgroundColor, fontSize: size + 'rpx', color: color, padding: padding }" |
|
:hover-stay-time="150" |
|
@tap="handleClick" |
|
> |
|
<slot></slot> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: 'tuiListCell', |
|
props: { |
|
//是否有箭头 |
|
arrow: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
//箭头颜色 传值： white，gray,warning,danger |
|
arrowColor: { |
|
type: String, |
|
default: '' |
|
}, |
|
//是否有点击效果 |
|
hover: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
//隐藏线条 |
|
unlined: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
//线条是否有左偏移距离 |
|
lineLeft: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
//线条是否有右偏移距离 |
|
lineRight: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
padding: { |
|
type: String, |
|
default: '26rpx 30rpx' |
|
}, |
|
//背景颜色 |
|
backgroundColor: { |
|
type: String, |
|
default: '#fff' |
|
}, |
|
//字体大小 |
|
size: { |
|
type: Number, |
|
default: 28 |
|
}, |
|
//字体颜色 |
|
color: { |
|
type: String, |
|
default: '#333' |
|
}, |
|
//是否加圆角 |
|
radius: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
//箭头是否有偏移距离 |
|
arrowRight: { |
|
type: Boolean, |
|
default: true |
|
}, |
|
index: { |
|
type: Number, |
|
default: 0 |
|
} |
|
}, |
|
methods: { |
|
handleClick() { |
|
this.$emit('click', { |
|
index: this.index |
|
}); |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.tui-list-cell { |
|
position: relative; |
|
width: 100%; |
|
box-sizing: border-box; |
|
} |
|
.tui-radius { |
|
border-radius: 6rpx; |
|
overflow: hidden; |
|
} |
|
|
|
.tui-cell-hover { |
|
background-color: #f1f1f1 !important; |
|
} |
|
|
|
.tui-list-cell::after { |
|
content: ''; |
|
position: absolute; |
|
/* border-bottom: 1rpx solid #eaeef1; */ |
|
-webkit-transform: scaleY(0.5) translateZ(0); |
|
transform: scaleY(0.5) translateZ(0); |
|
transform-origin: 0 100%; |
|
bottom: 0; |
|
right: 0; |
|
left: 0; |
|
} |
|
|
|
.tui-line-left::after { |
|
left: 30rpx !important; |
|
} |
|
|
|
.tui-line-right::after { |
|
right: 30rpx !important; |
|
} |
|
|
|
.tui-cell-unlined::after { |
|
border-bottom: 0 !important; |
|
} |
|
|
|
.tui-cell-arrow::before { |
|
content: ' '; |
|
height: 10px; |
|
width: 10px; |
|
border-width: 2px 2px 0 0; |
|
border-color: #c0c0c0; |
|
border-style: solid; |
|
-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); |
|
transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0); |
|
position: absolute; |
|
top: 50%; |
|
margin-top: -6px; |
|
right: 30rpx; |
|
} |
|
.tui-arrow-right::before { |
|
right: 0 !important; |
|
} |
|
.tui-arrow-gray::before { |
|
border-color: #666666 !important; |
|
} |
|
.tui-arrow-white::before { |
|
border-color: #ffffff !important; |
|
} |
|
.tui-arrow-warning::before { |
|
border-color: #ff7900 !important; |
|
} |
|
.tui-arrow-success::before { |
|
border-color: #19be6b !important; |
|
} |
|
.tui-arrow-danger::before { |
|
border-color: #eb0909 !important; |
|
} |
|
</style>
|
|
|