You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
1.7 KiB
Vue
98 lines
1.7 KiB
Vue
<template>
|
|
<view class="tui-list-view tui-view-class" :style="{backgroundColor:backgroundColor,marginTop:marginTop}">
|
|
<view class="tui-list-title" :style="{color:color,fontSize:size+'rpx',lineHeight:30+'rpx'}" v-if="title">{{title}}</view>
|
|
<view class="tui-list-content" :class="[unlined?'tui-border-'+unlined:'']">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "tuiListView",
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
color:{
|
|
type: String,
|
|
default: '#666'
|
|
},
|
|
//rpx
|
|
size:{
|
|
type:Number,
|
|
default:30
|
|
},
|
|
backgroundColor:{
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
unlined: {
|
|
type: String,
|
|
default: '' //top,bottom,all
|
|
},
|
|
marginTop:{
|
|
type:String,
|
|
default:'0'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tui-list-title {
|
|
width: 100%;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tui-list-content {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.tui-list-content::before {
|
|
content: " ";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
border-top: 1px solid #eaeef1;
|
|
-webkit-transform: scaleY(0.5) translateZ(0);
|
|
transform: scaleY(0.5) translateZ(0);
|
|
transform-origin: 0 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tui-list-content::after {
|
|
content: '';
|
|
width: 100%;
|
|
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;
|
|
}
|
|
|
|
.tui-border-top::before {
|
|
border-top: 0;
|
|
}
|
|
|
|
.tui-border-bottom::after {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.tui-border-all::after {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.tui-border-all::before {
|
|
border-top: 0;
|
|
}
|
|
</style>
|