Blame view

components/thorui/tui-tr/tui-tr.vue 1.92 KB
46b6767c   刘淇   init 提交到库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
  <template>
  	<view
  		class="tui-table__row"
  		:class="{ 'tui-flex-wrap': flexWrap, 'tui-table__fixed': fixed }"
  		:style="{
  			backgroundColor: backgroundColor,
  			borderBottom: `${borderWidth} solid ${borderColor}`,
  			borderLeft: borderLeft ? `${borderWidth} solid ${borderColor}` : '0',
  			borderTop: borderTop ? `${borderWidth} solid ${borderColor}` : '0',
  			left: fixed ? left : 'auto',
  			right: fixed ? right : 'auto',
  			top: fixed ? top : 'auto',
  			marginTop: marginTop
  		}"
  		@tap="handleClick"
  	>
  		<slot></slot>
  	</view>
  </template>
  
  <script>
  //table tr
  export default {
  	name: 'tuiTr',
  	emits: ['click'],
  	options: {
  		// 在微信小程序中将组件节点渲染为虚拟节点,更加接近Vue组件的表现
  		virtualHost: true
  	},
  	props: {
  		backgroundColor: {
  			type: String,
  			default: '#fff'
  		},
  		//border-bottom width
  		borderWidth: {
  			type: String,
  			default: '1rpx'
  		},
  		//border-bottom color
  		borderColor: {
  			type: String,
  			default: '#EAEEF5'
  		},
  		borderLeft: {
  			type: Boolean,
  			default: false
  		},
  		borderTop: {
  			type: Boolean,
  			default: false
  		},
  		flexWrap: {
  			type: Boolean,
  			default: false
  		},
  		fixed: {
  			type: Boolean,
  			default: false
  		},
  		left: {
  			type: String,
  			default: '0'
  		},
  		right: {
  			type: String,
  			default: '0'
  		},
  		top: {
  			type: String,
  			// #ifdef H5
  			default: '44px',
  			// #endif
  			// #ifndef H5
  			default: '0'
  			// #endif
  		},
  		marginTop: {
  			type: String,
  			default: '0'
  		},
  		//行数索引
  		index: {
  			type: Number,
  			default: 0
  		},
  		//参数
  		params: {
  			type: String,
  			default: ''
  		}
  	},
  	data() {
  		return {};
  	},
  	methods: {
  		handleClick() {
  			this.$emit('click', {
  				index: this.index,
  				params: this.params
  			});
  		}
  	}
  };
  </script>
  
  <style scoped>
  .tui-table__row {
  	width: 100%;
  	display: flex;
  	box-sizing: border-box;
  }
  
  .tui-flex-wrap {
  	flex-wrap: wrap;
  }
  
  .tui-table__fixed {
  	position: fixed;
  	z-index: 99;
  }
  </style>