123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <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',
- emits: ['click'],
- props: {
-
- arrow: {
- type: Boolean,
- default: false
- },
-
- 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:active {
- background-color: #f1f1f1 !important;
- }
- .tui-list-cell::after {
- content: '';
- position: absolute;
- border-bottom: 1px 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;
- pointer-events: none;
- }
- .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>
|