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.

172 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>